/**
 * About landing: page-templates/about.php (2167:568).
 * Hero (2167:655): 200px top, 210px bottom, 28px gaps; H1 Display/XL
 * centred, 820px; text Body/L muted, 560px; dark "View more". Four brand
 * visuals around it (radius 32, 0 24 48 shadow), each a fill with the mascot
 * cropped as framed: Flowers 270 x 320 +8deg, Pens 220 x 270 -7deg,
 * Extracts 270 x 320 -8deg, Superior 240 x 280 +6deg. From 1024 they keep the
 * frame's place around the text, scaled with the page (cqw, at most the
 * frame size) from 1280; below (not designed) a row of four under the text,
 * 2 x 2 on phones.
 * Why we started (2160:4118): orange card 458px, the Figma background
 * export (fill and line, cover-cropped), title Display/L
 * centred 560px, text Body/L white 90% centred 712px.
 * Quality promise (2168:574): 120px top, 104px to the finder (the frame's
 * 160px bottom padding runs under it), title Display/L, 48px
 * to four cream cards (24px gaps, radius 20, 32px padding, 251px, 56px icon
 * circle, 50px to the text: Heading/H4, 10px, Body/M muted).
 * Find your match (2168:604): the title card's green (item 27), radius 40,
 * 56px padding (72px left), 48px gap; title Display/XL white; the mascot at
 * the laptop 951px wide, 179px left of the card and 299px down, cut by it;
 * quiz card white, radius 25, 36px padding, 600px (see .finder). 60px under.
 * Numbers (2168:657): four tilted 230px tiles over each other (+3, -7.32,
 * +2, -2.81deg), radius 32, 32px padding, number Display/XL, label Body/L,
 * on the frame's fills. 60px under. Below 1280 (not designed): 2 x 2.
 * Reviews: the homepage component. Closing card (2168:798): the CTA card
 * on a 143px cream band, 279px.
 */

/* Hero */
/* Below 1280 only the sides are clipped (the tilted cards must not make the
 * page scroll sideways), so the cards' shadows show under them. */
.about-hero {
	position: relative;
	overflow: clip visible;
	padding: 56px 0 48px;
	container-type: inline-size;
}

.about-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	text-align: center;
}

.about-hero__title {
	max-width: 820px;
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-display-xl);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-xl);
	line-height: var(--leading-display-xl);
}

.about-hero__text {
	max-width: 560px;
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.about-hero__visuals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
	max-width: 420px;
	margin: 48px auto 0;
	padding: 0 var(--container-gutter);
}

.about-visual {
	position: relative;
	overflow: hidden;
	aspect-ratio: 270 / 320;
	border-radius: 24px;
	background: center / cover no-repeat;
	box-shadow: 0 24px 48px rgb(18 38 26 / 18%);
	transform: rotate(var(--tilt));
}

.about-visual--flowers {
	--tilt: 8deg;

	background-image: image-set(url("../../images/about-fill-green.webp") 1x, url("../../images/about-fill-green@2x.webp") 2x);
}

.about-visual--pens {
	--tilt: -7deg;

	aspect-ratio: 220 / 270;
	background-image: image-set(url("../../images/about-fill-orange.webp") 1x, url("../../images/about-fill-orange@2x.webp") 2x);
}

.about-visual--extracts {
	--tilt: -8deg;

	background-image: image-set(url("../../images/about-fill-yellow.webp") 1x, url("../../images/about-fill-yellow@2x.webp") 2x);
}

.about-visual--superior {
	--tilt: 6deg;

	aspect-ratio: 240 / 280;
	background-image: image-set(url("../../images/about-fill-dark.webp") 1x, url("../../images/about-fill-dark@2x.webp") 2x);
}

/* Mascot crops as framed: the crop box relative to the card, the image
 * relative to the crop box (2160:4345-4348). */
.about-visual__crop {
	position: absolute;
	top: var(--crop-top);
	left: var(--crop-left);
	overflow: hidden;
	width: var(--crop-width);
	height: var(--crop-height);
}

.about-visual__mascot {
	position: absolute;
	top: 0;
	left: var(--img-left);
	width: var(--img-width);
	max-width: none;
	height: auto;
}

.about-visual--flowers .about-visual__crop {
	--crop-top: 1.32%;
	--crop-left: -23.11%;
	--crop-width: 120.1%;
	--crop-height: 111.43%;
	--img-left: -18.54%;
	--img-width: 137.07%;
}

.about-visual--pens .about-visual__crop {
	--crop-top: 7.33%;
	--crop-left: 4.39%;
	--crop-width: 96.82%;
	--crop-height: 98.69%;
	--img-left: -41.56%;
	--img-width: 161.99%;
}

.about-visual--extracts .about-visual__crop {
	--crop-top: 3.71%;
	--crop-left: -18.57%;
	--crop-width: 115.05%;
	--crop-height: 100.12%;
	--img-left: -15.67%;
	--img-width: 131.34%;
}

/* Superior: the frame turns the crop box -12deg and mirrors it. */
.about-visual--superior .about-visual__crop {
	--crop-top: 2.99%;
	--crop-left: 0.71%;
	--crop-width: 107.3%;
	--crop-height: 101.89%;
	--img-left: -26.66%;
	--img-width: 153.31%;

	transform: rotate(-12deg) scaleX(-1);
}

/* Why we started */
.about-story-wrap {
	padding-top: var(--space-lg);
}

.about-story {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	overflow: hidden;
	padding: 48px 24px;
	border-radius: var(--radius-section);
	background: var(--gradient-newsletter-card);
	color: var(--color-white);
	text-align: center;
	isolation: isolate;
}

/* The Figma background (fill and line), cover-cropped; the gradient above
 * stays under it while it loads. */
.about-story__bg {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.about-story__title {
	max-width: 560px;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

.about-story__text {
	max-width: 712px;
	margin: 0;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
	opacity: 0.9;
}

/* Quality promise */
.about-promise {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 27.3307px + 1.2451vw, 48px);
	padding-top: var(--section-space);
	padding-bottom: clamp(64px, 52.3268px + 3.1128vw, 104px);
}

.about-section-title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-display-l);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-l);
	line-height: var(--leading-display-l);
}

/* One column on phones, two from 768, four from 1024. */
.about-promise__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-promise__card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-cream);
}

.about-promise__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.about-promise__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.about-promise__body {
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

/* Find your match */
.about-finder-wrap {
	padding-bottom: 60px;
	scroll-margin-top: 0;
}

.about-finder {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	overflow: hidden;
	padding: 36px 20px 0;
	border-radius: var(--radius-section);
	background: var(--gradient-why-stacked);
}

.about-finder__left {
	display: contents;
}

.about-finder__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: var(--text-display-xl);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-xl);
	line-height: var(--leading-display-xl);
}

.about-finder__mascot {
	order: 2;
	align-self: center;
	width: min(480px, 112%);
	margin-bottom: -18%;
	filter: drop-shadow(7px 10px 33px rgb(0 0 0 / 40%));
	pointer-events: none;
}

.about-finder__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Quiz card (2168:610) */
.finder {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: var(--space-md) 20px;
	border-radius: 20px;
	background: var(--color-white);
	color: var(--color-ink);
}

.finder__progress {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}

.finder__bar {
	flex: 1 1 0;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-line);
	transition: background-color 0.3s ease;
}

.finder__bar.is-on {
	background: var(--color-orange);
}

.finder__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.finder-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--space-md) 0;
	transition: opacity 0.3s ease;
}

.finder-step + .finder-step {
	border-top: 1px solid var(--color-line);
}

.finder-step.is-locked {
	opacity: 0.45;
}

.finder-step__head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.finder-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.finder-step.is-current .finder-step__num,
.finder-step.is-done .finder-step__num {
	background: var(--color-orange);
	color: var(--color-white);
}

.finder-step__label {
	color: var(--color-muted);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

.finder-step__question {
	margin: 0;
	padding: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

/* Step 1: the Turnstile widget in the framed cream box (2168:622). */
.finder__captcha {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0 4px;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: 16px;
	background: var(--color-cream);
}

.finder__widget {
	width: 100%;
	min-height: 65px;
}

.finder__note,
.finder__status,
.finder__no {
	margin: 0;
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-body-s);
}

.finder__status:empty {
	display: none;
}

.finder__status.is-error,
.finder__no {
	color: var(--color-orange-dark);
}

.finder__status.is-done {
	color: var(--color-green);
}

/* Steps 2 and 3: pills (2168:631, 2168:642). */
.finder__fieldset {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A legend is not a flex item of its fieldset, so the 14px gap of the other
 * steps is its own padding here. */
.finder__fieldset > .finder-step__question {
	padding-bottom: 14px;
}

.finder__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.finder-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 64px;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.finder-pill:hover:not(:disabled, :has(input:disabled)) {
	border-color: var(--color-ink);
}

.finder-pill[aria-pressed="true"],
.finder-pill:has(input:checked) {
	border-color: var(--color-black);
	background: var(--color-black);
	color: var(--color-white);
}

.finder-pill:disabled,
.finder-pill:has(input:disabled) {
	cursor: not-allowed;
}

.finder-pill--radio input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

/* Orange in the frame (2168:652). */
.finder__cta {
	margin-top: var(--space-xs);
	border-color: var(--color-orange);
	background: var(--color-orange);
}

.finder__cta:hover {
	background: var(--color-orange-dark);
}

@media (prefers-reduced-motion: reduce) {
	.finder__bar,
	.finder-step,
	.finder-step__num,
	.finder-pill {
		transition: none;
	}
}

/* Numbers */
.about-stats-wrap {
	padding-bottom: 60px;
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
}

.about-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 150px;
	padding: 20px;
	border-radius: 24px;
	background: center / cover no-repeat;
	color: var(--color-white);
	transform: rotate(var(--tilt));
}

/* Tiles 1 and 2 crop their fill as framed (2168:1098: image 239.93% high at
 * -114.56%, the dark red wave at the bottom; 2168:1104: 285.21% at -35.5%),
 * as a background position: offset / (tile - image). Tiles 3 and 4 are
 * centred, as the frame's object-cover. */
.about-stat--1 {
	--tilt: 3deg;

	background-position: center 81.87%;
}

.about-stat--2 {
	--tilt: -4deg;

	background-position: center 19.17%;
}

.about-stat--3 {
	--tilt: 2deg;
}

.about-stat--4 {
	--tilt: -2.81deg;
}

.about-stat--orange {
	background-image: image-set(url("../../images/about-fill-orange.webp") 1x, url("../../images/about-fill-orange@2x.webp") 2x);
}

.about-stat--mint {
	background-image: image-set(url("../../images/about-fill-mint.webp") 1x, url("../../images/about-fill-mint@2x.webp") 2x);
}

.about-stat--yellow {
	background-image: image-set(url("../../images/about-fill-yellow.webp") 1x, url("../../images/about-fill-yellow@2x.webp") 2x);
}

.about-stat--dark {
	background-image: image-set(url("../../images/about-fill-dark.webp") 1x, url("../../images/about-fill-dark@2x.webp") 2x);
}

.about-stat__number {
	font-family: var(--font-display);
	font-size: clamp(48px, 33.9922px + 3.7354vw, 96px);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-display-xl);
	line-height: var(--leading-display-xl);
}

.about-stat__label {
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

/* Closing card (2168:798): cream band, 279px card, the mascot 419px wide,
 * 58px from the right edge, 40px above the card. */
.cta-section--about {
	--cta-split: 143px;

	background: linear-gradient(to bottom, var(--color-cream) var(--cta-split), var(--color-green-deep) var(--cta-split));
}

@media (min-width: 768px) {
	.about-hero__visuals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: center;
		max-width: 760px;
		gap: 32px;
	}

	.about-story {
		padding: 72px 48px;
	}

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

	.about-promise__card {
		padding: 32px;
	}

	.about-finder {
		padding: 48px 48px 0;
	}

	.finder {
		padding: 36px;
		border-radius: 25px;
	}

	.about-stat {
		min-height: 200px;
		padding: 32px;
		border-radius: 32px;
	}
}

@media (min-width: 1024px) {
	.about-story-wrap {
		padding-top: 0;
	}

	.about-promise__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-md);
	}

	.about-promise__card {
		gap: 50px;
		min-height: 251px;
		box-sizing: border-box;
	}
}

/* From 1280: the framed composition, scaled with the page (cqw), never
 * larger than the frame. The H1 scales with it so the visuals stay clear of
 * the text. */
@media (min-width: 1280px) {
	.about-hero {
		overflow: clip;
		min-height: min(822px, 49.52cqw);
		box-sizing: border-box;
		padding: clamp(120px, 12.05cqw, 200px) 0 clamp(120px, 12.65cqw, 210px);
	}

	.about-hero__inner {
		gap: 28px;
	}

	.about-hero__title {
		max-width: min(820px, 49.4cqw);
		font-size: clamp(64px, 5.783cqw, 96px);
	}

	/* Each visual: its frame centre from the page centre and from the top of
	 * the hero, its frame size; scaled down with the page, never up. */
	.about-hero__visuals {
		position: absolute;
		inset: 0;
		display: block;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.about-visual {
		position: absolute;
		width: min(var(--w), var(--w-cqw));
		border-radius: min(32px, 1.928cqw);
		transform: translate(-50%, -50%) rotate(var(--tilt));
	}

	.about-visual--flowers {
		--w: 270px;
		--w-cqw: 16.265cqw;

		top: 32.5%;
		left: calc(50% + max(-598.6px, -36.06cqw));
	}

	.about-visual--pens {
		--w: 220px;
		--w-cqw: 13.253cqw;

		top: 73.07%;
		left: calc(50% + max(-414.4px, -24.96cqw));
	}

	.about-visual--extracts {
		--w: 270px;
		--w-cqw: 16.265cqw;

		top: 26.72%;
		left: calc(50% + min(595.95px, 35.9cqw));
	}

	.about-visual--superior {
		--w: 240px;
		--w-cqw: 14.458cqw;

		top: 75.65%;
		left: calc(50% + min(454.7px, 27.39cqw));
	}

	.about-stats {
		position: relative;
		display: block;
		height: 293px;
		padding: 0;
	}

	.about-stat {
		position: absolute;
		top: 51.3%;
		width: var(--w);
		height: 230px;
		transform: translate(-50%, -50%) rotate(var(--tilt));
	}

	.about-stat--1 {
		--w: 34.44%;

		left: 18.49%;
	}

	.about-stat--2 {
		--tilt: -7.32deg;
		--w: 40.95%;

		left: 40.95%;
	}

	.about-stat--3 {
		--w: 35.98%;

		left: 59.25%;
	}

	.about-stat--4 {
		--w: 35.19%;

		left: 81.1%;
	}}

@media (min-width: 1280px) {
	.about-story {
		min-height: 458px;
		box-sizing: border-box;
		justify-content: center;
		padding: 72px;
	}

	.about-finder {
		flex-direction: row;
		gap: 48px;
		align-items: flex-start;
		min-height: 793px;
		box-sizing: border-box;
		padding: 56px 56px 56px 72px;
		background: var(--gradient-title-card);
	}

	.about-finder__left {
		display: block;
		flex: 1 1 0;
		align-self: stretch;
		padding-top: 24px;
	}

	.about-finder__mascot {
		position: absolute;
		top: 299px;
		left: -179px;
		width: 951px;
		margin: 0;
	}

	.finder {
		flex: none;
		width: 600px;
	}

	.cta-card--about {
		min-height: 279px;
		padding: 64px 420px 64px 72px;
	}

	.cta-card--about .cta-card__content {
		gap: 32px;
	}

	.cta-card--about .cta-card__title {
		max-width: 754px;
	}

	.cta-card--about .cta-card__mascot {
		top: -40px;
		right: 58px;
		width: 419px;
	}
}