/*
 * Science & Quality page (phase 6). Loaded on that page only, after home.css (shared foundation).
 *
 * Units: --u is "1 design px" (see home.css). Mobile 320-767: --u = --m (1px at 390). Desktop 768+:
 * --u = --d (1px at 1440, capped). Boxes are sized in --u; type uses floors so it never gets tiny,
 * which is why text containers stay flexible (min-height / auto) instead of fixed.
 * Colors, radii and shadows come from tokens.css; classes are prefixed sq-.
 */

.pt-science {
	--q54: max(36px, calc(54 * var(--ms)));
	--q36: var(--t36);
	--sq-ink: var(--color-text-brand);
	--sq-on: var(--color-text-body);
	--sq-off: rgba(24, 24, 24, 0.35);
	--sq-sh: 0 4px 100px rgba(157, 195, 255, 0.25);
}

@media (min-width: 768px) {
	.pt-science {
		--q36: max(24px, calc(36 * var(--d)));
		--sq-on: #000;
		--sq-off: rgba(0, 0, 0, 0.15);
		--sq-sh: 0 4px 200px rgba(157, 195, 255, 0.25);
	}
}

/* Section rhythm (Figma gaps): 120 desktop, 48 mobile. */
.pt-science > section {
	margin-top: calc(48 * var(--u));
}

.pt-science > .sq-hero {
	margin-top: 0;
}

@media (min-width: 768px) {
	.pt-science > section {
		margin-top: calc(120 * var(--d));
	}
}

.pt-science img {
	display: block;
}

:where(.pt-science) ol,
:where(.pt-science) ul,
:where(.pt-science) dl,
:where(.pt-science) dd {
	margin: 0;
	padding: 0;
}

:where(.pt-science) ol,
:where(.pt-science) ul {
	list-style: none;
}

:where(.pt-science) h4 {
	margin: 0;
}

/* ---- Shared ------------------------------------------------------- */
.sq-h3 {
	color: var(--sq-on);
	font-size: var(--q36);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
}

@media (min-width: 768px) {
	.sq-h3 {
		font-size: var(--t48);
		color: #000;
	}
}

.sq-btn {
	--px: 20;
	--py: 12;
	gap: 0;
	min-height: 0;
	padding: calc(var(--py) * var(--u) - 1px) calc(var(--px) * var(--u) - 1px);
	font-size: var(--t16);
	line-height: 1.21;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.sq-btn {
		--px: 29.4;
		--py: 14.7;
		font-size: var(--t20);
		line-height: 1.3;
	}
}

.sq-arrow {
	margin-left: 0.25em;
	font-family: var(--font-sans);
}

.btn.btn--outline.sq-btn {
	border-color: var(--color-border-strong);
	color: var(--sq-ink);
}

.btn.btn--outline.sq-btn:hover {
	background: var(--color-surface-3);
}

/* Soft blue blob/gradient card used by the rounded sections. */
.sq-tested__card,
.sq-reports__card,
.sq-cta__card,
.sq-hero__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: calc(28 * var(--u));
}

@media (min-width: 768px) {
	.sq-tested__card,
	.sq-reports__card,
	.sq-cta__card,
	.sq-hero__card {
		border-radius: calc(48 * var(--d));
	}
}

.sq-tested__bg,
.sq-reports__bg,
.sq-cta__bg,
.sq-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* =====================================================================
 * 1. Hero
 * =================================================================== */
.sq-hero__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: calc(33 * var(--u));
	background: linear-gradient(172.06deg, #e4ecff 0%, #f4f7ff 55%, #fff 100%);
	color: var(--sq-ink);
	text-align: center;
}

.sq-hero__bg {
	opacity: 0.6;
	object-position: 30% 50%;
}

.sq-hero__title {
	max-width: calc(260 * var(--u));
	color: #16267e;
	font-size: var(--q54);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	order: 1;
}

.sq-hero__intro {
	order: 2;
	max-width: calc(257 * var(--u));
	margin-top: max(calc(8 * var(--u)), 10px);
	color: rgba(19, 38, 107, 0.76);
	font-size: var(--t14);
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
}

.sq-hero__stat {
	display: none;
}

.sq-hero__actions {
	order: 3;
	margin-top: calc(18 * var(--u));
}

.sq-hero__actions .sq-btn {
	min-width: calc(264 * var(--u));
	height: calc(44 * var(--u));
	min-height: 44px;
}

.sq-hero__tags {
	display: none;
}

.sq-hero__strip {
	order: 4;
	align-self: stretch;
	height: calc(22 * var(--u));
	margin-top: calc(16 * var(--u));
	overflow: hidden;
	background: var(--color-surface-3);
	color: var(--color-muted);
	font-size: var(--t10);
	letter-spacing: 0.05em;
	line-height: calc(22 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
	text-align: left;
}

/* Mobile-only infinite marquee: two identical sets, the track moves by exactly one set. */
.sq-hero__track {
	display: flex;
	width: max-content;
	margin-left: calc(-18 * var(--u));
	animation: sq-marquee 30s linear infinite;
	will-change: transform;
}

.sq-hero__set {
	flex: none;
	display: block;
}

@keyframes sq-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sq-hero__track {
		animation: none;
	}

	.sq-hero__set + .sq-hero__set {
		display: none;
	}
}

.sq-report {
	order: 5;
	position: relative;
	width: calc(310 * var(--u));
	height: calc(247 * var(--u));
	margin-top: calc(24 * var(--u));
	overflow: hidden;
}

.sq-report::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(340 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
}

.sq-report::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(112 * var(--u));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 90%);
	pointer-events: none;
}

.sq-report__frame {
	position: absolute;
	left: calc(16 * var(--u));
	top: calc(16 * var(--u));
	width: calc(278 * var(--u));
	height: calc(320 * var(--u));
	overflow: hidden;
	border-radius: calc(10 * var(--u));
	background: #f1f2f4;
}

.sq-report__img {
	position: absolute;
	left: calc(-5 * var(--u));
	top: calc(-5 * var(--u));
	width: calc(312 * var(--u));
	height: calc(459 * var(--u));
	border: 0.483px solid var(--color-border-soft);
	border-radius: calc(7.7 * var(--u));
}

@media (min-width: 768px) {
	.sq-hero__card {
		display: block;
		height: calc(719 * var(--d));
		padding: 0;
		background: #ececec;
		text-align: left;
	}

	.sq-hero__bg {
		opacity: 1;
		object-position: 50% 50%;
	}

	.sq-hero__intro {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(72 * var(--d));
		max-width: none;
		width: calc(475 * var(--d));
		margin: 0;
		font-size: var(--t20);
		line-height: 1.3;
		opacity: 0.75;
		color: var(--sq-ink);
	}

	.sq-hero__stat {
		position: absolute;
		left: calc(922 * var(--d));
		top: calc(59 * var(--d));
		display: flex;
		align-items: flex-start;
		gap: calc(16 * var(--d));
		width: calc(380 * var(--d));
		color: var(--sq-ink);
	}

	.sq-hero__num {
		display: block;
		font-size: var(--t72);
		font-weight: var(--fw-regular);
		line-height: 1.1;
		letter-spacing: var(--ls-tight);
	}

	.sq-hero__stat-label {
		flex: none;
		margin-top: calc(20 * var(--d));
		width: max(calc(138 * var(--d)), 6.5em);
		font-size: var(--t20);
		line-height: 1.3;
		letter-spacing: var(--ls-tight);
	}

	.sq-hero__title {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(260 * var(--d));
		max-width: none;
		width: calc(470 * var(--d));
		color: var(--sq-ink);
		font-size: var(--t96);
		line-height: 1.05;
	}

	.sq-hero__actions {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(593 * var(--d));
		display: flex;
		align-items: center;
		gap: calc(32 * var(--d));
		margin: 0;
	}

	.sq-hero__actions .sq-btn {
		min-width: 0;
		height: auto;
		min-height: 0;
	}

	.sq-hero__tags {
		display: block;
		max-width: calc(560 * var(--d));
		font-size: var(--t16);
		letter-spacing: 0.1em;
		line-height: 1.3;
		text-transform: uppercase;
		opacity: 0.75;
	}

	.sq-hero__strip {
		display: none;
	}

	.sq-report {
		position: absolute;
		left: calc(922 * var(--d));
		top: calc(199 * var(--d));
		width: calc(306 * var(--d));
		height: calc(448 * var(--d));
		margin: 0;
		overflow: visible;
	}

	.sq-report::before {
		height: 100%;
		border-radius: calc(24 * var(--d));
		box-shadow: 0 calc(4 * var(--d)) calc(118.3 * var(--d)) #cee1ff;
	}

	.sq-report::after {
		display: none;
	}

	.sq-report__frame {
		left: calc(16 * var(--d));
		top: calc(65 * var(--d));
		width: calc(274 * var(--d));
		height: calc(367 * var(--d));
		border-radius: calc(12 * var(--d));
		background: transparent;
	}

	.sq-report__img {
		left: calc(-8 * var(--d));
		top: calc(-7 * var(--d));
		width: calc(291 * var(--d));
		height: calc(429 * var(--d));
	}
}

/* =====================================================================
 * 2. Process
 * =================================================================== */
.sq-process__head {
	position: relative;
	text-align: center;
}

.sq-process__aside {
	display: none;
}

.sq-process__title {
	max-width: calc(319 * var(--u));
	margin-inline: auto;
	font-size: var(--t42);
	font-weight: var(--fw-medium);
	line-height: 1.15;
	letter-spacing: -0.05em;
}

.sq-process__on,
.sq-process__off {
	display: block;
}

.sq-process__title,
.sq-big {
	--pt-rv-on: var(--sq-on);
	--pt-rv-off: var(--sq-off);
}

.sq-process__on {
	color: var(--sq-on);
}

.sq-process__off {
	color: var(--sq-off);
}

.sq-stages {
	display: flex;
	flex-direction: column;
	margin-top: calc(48 * var(--u));
}

.sq-stages__head {
	display: contents;
}

.sq-stages__head .sq-h3 {
	display: none;
}

.sq-stages__list {
	order: 1;
	display: flex;
	flex-direction: column;
	gap: calc(36 * var(--u));
}

.sq-stage {
	padding-top: calc(22 * var(--u));
	border-top: 2px solid var(--stage-c, #c0d7ff);
}

.sq-stage--1 { --stage-c: #f0f6ff; }
.sq-stage--2 { --stage-c: #e7f0ff; }
.sq-stage--3 { --stage-c: #c0d7ff; }
.sq-stage--4 { --stage-c: #9bbfff; }
.sq-stage--5 { --stage-c: #73a6ff; }

.sq-stage__n {
	color: rgba(19, 38, 107, 0.76);
	font-size: var(--t12);
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sq-stage__title {
	margin-top: calc(8 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t20);
	font-weight: var(--fw-medium);
	line-height: 1.2;
}

.sq-stage__text {
	margin-top: calc(12 * var(--u));
	color: rgba(24, 24, 24, 0.8);
	font-size: var(--t14);
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
}

.sq-btn__d {
	display: none;
}

.sq-stages__btn {
	order: 2;
	align-self: center;
	margin-top: calc(44 * var(--u));
	min-width: calc(245 * var(--u));
	justify-content: center;
}

@media (min-width: 768px) {
	.sq-process__head {
		min-height: calc(410 * var(--d));
	}

	.sq-process__aside {
		position: absolute;
		display: block;
		width: calc(202 * var(--d));
		color: var(--color-text-body);
		font-size: var(--t16);
		line-height: 1.3;
		letter-spacing: var(--ls-tight);
		text-align: left;
		opacity: 0.5;
	}

	.sq-process__aside--l {
		left: calc(5 * var(--d));
		top: calc(48 * var(--d));
	}

	.sq-process__aside--r {
		left: calc(1133 * var(--d));
		top: calc(293 * var(--d));
		width: calc(172 * var(--d));
	}

	.sq-process__title {
		max-width: calc(780 * var(--d));
		font-size: var(--t96);
		line-height: 1.05;
		letter-spacing: var(--ls-tight);
	}

	.sq-process__off {
		margin-top: calc(6 * var(--d));
		letter-spacing: -0.05em;
	}

	.sq-stages {
		display: block;
		margin-top: calc(120 * var(--d));
	}

	.sq-stages__head {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		min-height: calc(106 * var(--d));
	}

	.sq-stages__head .sq-h3 {
		display: block;
	}

	.sq-stages__btn .sq-arrow,
	.sq-btn__m {
		display: none;
	}

	.sq-btn__d {
		display: inline;
	}

	.sq-stages__btn {
		margin: 0;
		min-width: 0;
		--py: 11;
		--px: 30;
		border-color: #73a6ff;
		color: var(--color-text-accent);
	}

	.btn.btn--outline.sq-stages__btn {
		border-color: #73a6ff;
		color: var(--color-text-accent);
	}

	.sq-stages__list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: calc(20 * var(--d));
	}

	.sq-stage {
		padding: calc(36 * var(--d)) calc(24 * var(--d)) 0 calc(2 * var(--d));
		border-top: 0;
		position: relative;
	}

	.sq-stage::before {
		content: "";
		position: absolute;
		left: calc(-2 * var(--d));
		right: 0;
		top: 0;
		height: calc(5 * var(--d));
		border-radius: calc(3 * var(--d));
		background: var(--stage-c);
	}

	.sq-stage--1 { --stage-c: rgba(192, 215, 255, 0.25); }
	.sq-stage--2 { --stage-c: rgba(155, 191, 255, 0.25); }
	.sq-stage--3 { --stage-c: #73a6ff; }
	.sq-stage--4 { --stage-c: #254ad1; }
	.sq-stage--5 { --stage-c: #13266b; }

	.sq-stage__n {
		margin-top: calc(1 * var(--d));
		color: var(--color-text-accent);
		font-size: var(--t14);
		font-weight: var(--fw-regular);
		letter-spacing: 0.05em;
	}

	.sq-stage__title {
		max-width: max(calc(170 * var(--d)), 7.4em);
		margin-top: calc(32 * var(--d));
		color: var(--sq-ink);
		font-size: var(--t24);
		letter-spacing: var(--ls-tight);
		line-height: 1.2;
	}

	.sq-stage__text {
		margin-top: calc(16 * var(--d));
		color: var(--color-text-body);
		font-size: var(--t16);
		line-height: 1.2;
		opacity: 0.5;
	}
}

/* =====================================================================
 * 3. Tested beyond our own walls
 * =================================================================== */
.sq-tested__card {
	min-height: calc(545 * var(--u));
	padding: calc(36 * var(--u)) calc(20 * var(--u)) calc(320 * var(--u));
	background: linear-gradient(170.79deg, #e4ecff 0%, #f4f7ff 55%, #fff 100%);
	text-align: center;
}

.sq-tested__bg {
	/* Mobile composition (Figma 2046:1340): the blob artwork is turned a quarter and enlarged so its
	   light-blue arcs sit where the design has them. Desktop resets this below. */
	inset: auto;
	left: calc(-340.5 * var(--u));
	top: calc(95.5 * var(--u));
	width: calc(911 * var(--u));
	height: calc(420 * var(--u));
	transform: rotate(90deg);
	opacity: 0.9;
}

.sq-tested__title {
	max-width: calc(269 * var(--u));
	margin-inline: auto;
	color: #16267e;
	font-size: var(--q36);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
}

.sq-tested__text {
	max-width: calc(273 * var(--u));
	margin: calc(8 * var(--u)) auto 0;
	color: rgba(19, 38, 107, 0.76);
	font-size: var(--t16);
	line-height: 1.3;
	letter-spacing: var(--ls-tight);
}

.sq-tested__photo {
	position: absolute;
	left: calc(20 * var(--u));
	right: calc(20 * var(--u));
	bottom: calc(20 * var(--u));
	height: calc(280 * var(--u));
	overflow: hidden;
	border-radius: calc(20 * var(--u));
	background: #fff;
}

.sq-tested__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.sq-tested__btn {
	display: flex;
	width: calc(264 * var(--u));
	height: calc(44 * var(--u));
	min-height: 44px;
	margin: calc(24 * var(--u)) auto 0;
	justify-content: center;
}

@media (min-width: 768px) {
	.sq-tested {
		position: relative;
	}

	.sq-tested__card {
		height: calc(618 * var(--d));
		min-height: 0;
		padding: 0;
		background: transparent;
		text-align: left;
	}

	.sq-tested__bg {
		inset: 0;
		width: 100%;
		height: 100%;
		transform: none;
		opacity: 1;
	}

	.sq-tested__title {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(72 * var(--d));
		max-width: none;
		width: calc(473 * var(--d));
		margin: 0;
		color: var(--sq-ink);
		font-size: var(--t72);
		font-weight: var(--fw-regular);
		line-height: 1.1;
	}

	.sq-tested__text {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(380 * var(--d));
		max-width: none;
		width: max(calc(348 * var(--d)), 280px);
		margin: 0;
		color: var(--sq-ink);
		font-size: var(--t20);
		line-height: 1.3;
		opacity: 0.75;
	}

	.sq-tested__photo {
		left: calc(744 * var(--d));
		top: calc(36 * var(--d));
		right: auto;
		bottom: auto;
		width: calc(560 * var(--d));
		height: calc(546 * var(--d));
		border-radius: calc(36 * var(--d));
	}

	.sq-tested__btn {
		position: absolute;
		left: calc(var(--pad) + 72 * var(--d));
		top: max(calc(490 * var(--d)), 280px);
		width: auto;
		height: auto;
		min-height: 0;
		margin: 0;
	}
}

/* =====================================================================
 * 4. Purity
 * =================================================================== */
.sq-big {
	font-size: var(--t42);
	font-weight: var(--fw-medium);
	line-height: 1.15;
	letter-spacing: -0.05em;
}

.sq-big__on,
.sq-big__off {
	display: block;
}

.sq-big__on {
	color: var(--sq-on);
}

.sq-big__off {
	color: var(--sq-off);
}

.sq-terms {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--u)) calc(20 * var(--u));
	margin-top: calc(24 * var(--u));
	color: rgba(24, 24, 24, 0.8);
	font-size: var(--t14);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sq-terms__item {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--u));
}

.sq-terms__i {
	flex: none;
	width: calc(14 * var(--u));
	min-width: 12px;
	height: auto;
	color: var(--color-text-body);
}

.sq-purity__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(12 * var(--u));
	margin-top: calc(24 * var(--u));
}

.sq-pcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: calc(12 * var(--u));
	min-height: calc(180 * var(--u));
	padding: calc(16 * var(--u));
	border-radius: calc(20 * var(--u));
	background: #fff;
	box-shadow: var(--sq-sh);
}

.sq-pcard__title {
	color: #000;
	font-size: var(--t16);
	font-weight: var(--fw-medium);
	line-height: 1.2;
}

.sq-pcard__text {
	color: var(--color-text-body);
	font-size: var(--t14);
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
	opacity: 0.8;
}

@media (min-width: 768px) {
	.sq-purity {
		display: flex;
		gap: calc(20 * var(--d));
		min-height: calc(612 * var(--d));
	}

	.sq-purity__copy {
		display: flex;
		flex: none;
		flex-direction: column;
		width: calc(630 * var(--d));
	}

	.sq-big {
		font-size: var(--t96);
		line-height: 1.05;
		letter-spacing: var(--ls-tight);
	}

	.sq-big__off {
		margin-top: calc(16 * var(--d));
	}

	.sq-terms {
		width: calc(300 * var(--d));
		margin-top: auto;
		gap: calc(24 * var(--d));
		color: var(--color-text-body);
		font-size: var(--t16);
		letter-spacing: 0.1em;
		opacity: 0.75;
	}

	.sq-terms__item {
		gap: calc(12 * var(--d));
	}

	.sq-terms__i {
		width: calc(20 * var(--d));
		min-width: 14px;
		color: var(--color-text-body);
	}

	.sq-purity__cards {
		flex: 1;
		grid-template-columns: repeat(2, calc(320 * var(--d)));
		grid-auto-rows: calc(296 * var(--d));
		gap: calc(20 * var(--d));
		margin: 0;
		justify-content: end;
	}

	.sq-pcard {
		min-height: 0;
		padding: calc(36 * var(--d)) calc(40 * var(--d));
		border-radius: calc(16 * var(--d));
	}

	.sq-pcard__title {
		margin-right: calc(-24 * var(--d));
		font-size: max(20px, calc(36 * var(--d)));
		line-height: 1.2;
		letter-spacing: var(--ls-tight);
	}

	.sq-pcard__text {
		max-width: calc(226 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
		opacity: 0.75;
	}
}

/* =====================================================================
 * 5. From product to report (diagram)
 * =================================================================== */
.sq-diagram__head {
	text-align: center;
}

.sq-diagram__head .sq-h3 {
	max-width: calc(250 * var(--u));
	margin-inline: auto;
	color: #141519;
}

.sq-diagram__text {
	max-width: calc(255 * var(--u));
	margin: calc(12 * var(--u)) auto 0;
	color: #6e7280;
	font-size: var(--t14);
	line-height: 1.4;
}

.sq-diagram__btn {
	display: flex;
	width: calc(264 * var(--u));
	height: calc(44 * var(--u));
	min-height: 44px;
	margin: calc(24 * var(--u)) auto 0;
	justify-content: center;
	background: #fff;
}

.btn.btn--outline.sq-diagram__btn {
	color: var(--color-text-accent);
}

.sq-diagram__art {
	display: none;
}

.sq-diagram__photo {
	position: relative;
	height: calc(260 * var(--u));
	margin-top: calc(24 * var(--u));
	overflow: hidden;
	border-radius: calc(20 * var(--u));
	background: linear-gradient(160deg, #dce6ff, #f3f6ff);
}

.sq-diagram__img {
	position: absolute;
	left: calc(-100 * var(--u));
	top: calc(-18.8 * var(--u));
	width: calc(470 * var(--u));
	height: auto;
	mix-blend-mode: multiply; /* the exported composition has an opaque white backdrop */
}

.sq-diagram__labels {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--u));
	margin-top: calc(24 * var(--u));
	padding-left: calc(28 * var(--u));
}

.sq-diagram__labels::before {
	content: "";
	position: absolute;
	left: calc(5 * var(--u));
	top: calc(30 * var(--u));
	bottom: calc(30 * var(--u));
	border-left: 2px dashed #c9d5f4;
}

.sq-dl {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--u));
	padding: calc(12 * var(--u)) calc(16 * var(--u));
	border-radius: calc(14 * var(--u));
	background: #fff;
	box-shadow: var(--sq-sh);
}

.sq-dl::before {
	content: "";
	position: absolute;
	left: calc(-28 * var(--u));
	top: 50%;
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	min-width: 10px;
	min-height: 10px;
	box-sizing: border-box;
	border: 2px solid var(--color-action);
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
}

.sq-dl--1::before,
.sq-dl--4::before {
	background: var(--color-action);
}

.sq-dl__k {
	color: rgba(24, 24, 24, 0.5);
	font-size: var(--t14);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sq-dl__v {
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.3;
}

@media (min-width: 768px) {
	.sq-diagram__head {
		position: relative;
		height: calc(184 * var(--d));
		text-align: left;
	}

	.sq-diagram__head .sq-h3 {
		max-width: none;
		margin: 0;
	}

	.sq-diagram__text {
		position: absolute;
		left: max(calc(542 * var(--d)), 340px);
		top: calc(17 * var(--d));
		max-width: none;
		width: calc(333 * var(--d));
		margin: 0;
		color: var(--color-text-body);
		font-size: var(--t16);
		line-height: 1.3;
		letter-spacing: var(--ls-tight);
		opacity: 0.5;
	}

	.sq-diagram__btn {
		position: absolute;
		right: 0;
		top: calc(8 * var(--d));
		display: inline-flex;
		width: auto;
		height: auto;
		min-height: 0;
		margin: 0;
		background: transparent;
		--py: 11;
		--px: 30;
	}

	.btn.btn--outline.sq-diagram__btn {
		border-color: #73a6ff;
	}

	.sq-diagram__stage {
		position: relative;
		height: calc(724 * var(--d));
	}

	.sq-diagram__art {
		position: absolute;
		inset: 0;
		display: block;
	}

	.sq-diagram__art::before {
		content: "";
		position: absolute;
		left: calc(273 * var(--d));
		top: calc(96 * var(--d));
		width: calc(721 * var(--d));
		height: calc(627 * var(--d));
		border-radius: 50%;
		background: radial-gradient(closest-side, rgba(206, 225, 255, 0.55), rgba(206, 225, 255, 0));
	}

	.sq-diagram__arcs {
		position: absolute;
		left: calc(101 * var(--d));
		top: calc(-18 * var(--d));
		width: calc(1264 * var(--d));
		height: calc(575 * var(--d));
		max-width: none;
	}

	.sq-diagram__photo {
		position: absolute;
		left: calc(60 * var(--d));
		top: 0;
		width: calc(1146 * var(--d));
		height: calc(724 * var(--d));
		margin: 0;
		overflow: visible;
		border-radius: 0;
		background: none;
	}

	.sq-diagram__img {
		left: 0;
		width: 100%;
	}

	.sq-diagram__labels {
		display: block;
		margin: 0;
		padding: 0;
	}

	.sq-diagram__labels::before {
		display: none;
	}

	.sq-dl {
		position: absolute;
		gap: calc(10 * var(--d));
		padding: calc(10 * var(--d)) calc(20 * var(--d));
		border-radius: calc(8 * var(--d));
		background: var(--color-surface-3);
		box-shadow: none;
		white-space: nowrap;
	}

	.sq-dl::before {
		display: none;
	}

	.sq-dl--1 { left: calc(132 * var(--d)); top: calc(214 * var(--d)); }
	.sq-dl--2 { left: calc(406 * var(--d)); top: calc(11 * var(--d)); }
	.sq-dl--3 { left: calc(840 * var(--d)); top: calc(-8 * var(--d)); }
	.sq-dl--4 { left: calc(1072 * var(--d)); top: calc(253 * var(--d)); }

	.sq-dl__k {
		color: var(--color-text-accent);
		font-size: var(--t14);
	}

	.sq-dl__v {
		color: var(--sq-ink);
		font-size: max(15px, calc(24 * var(--d)));
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-tight);
		line-height: 1.2;
	}
}

/* =====================================================================
 * 6. Lab report directory (TEMPORARY rows, see pt_science_reports())
 * =================================================================== */
.sq-reports__card {
	padding: calc(36 * var(--u)) calc(16 * var(--u));
	background: linear-gradient(169.3deg, #e4ecff 0%, #f4f7ff 55%, #fff 100%);
}

.sq-reports__bg {
	opacity: 0.5;
}

.sq-reports__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(20 * var(--u));
	text-align: center;
}

.sq-reports__head .sq-h3 {
	max-width: calc(278 * var(--u));
}

.sq-search {
	position: relative;
	width: 100%;
	max-width: calc(318 * var(--u));
}

.sq-search__i {
	position: absolute;
	left: calc(18 * var(--u));
	top: 50%;
	width: calc(14 * var(--u));
	min-width: 13px;
	height: auto;
	transform: translateY(-50%);
	pointer-events: none;
}

.sq-search__input {
	box-sizing: border-box;
	width: 100%;
	height: calc(44 * var(--u));
	min-height: 40px;
	padding: 0 calc(16 * var(--u)) 0 calc(46 * var(--u));
	border: 1px solid var(--color-border-soft);
	border-radius: 999px;
	background: #fff;
	color: var(--color-text-body);
	font-family: var(--font-sans);
	font-size: var(--t14);
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.sq-search__input::placeholder {
	color: rgba(24, 24, 24, 0.8);
	opacity: 1;
}

.sq-search__input:focus-visible {
	outline: 2px solid var(--color-text-accent);
	outline-offset: 2px;
}

.sq-rows {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	margin-top: calc(24 * var(--u));
}

.sq-row {
	display: flex;
	flex-direction: column;
	gap: calc(14 * var(--u));
	padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
	border-radius: calc(18 * var(--u));
	background: #fff;
	box-shadow: var(--sq-sh);
}

.sq-row[hidden] {
	display: none;
}

.sq-row__name {
	color: #141519;
	font-size: var(--t24);
	font-weight: var(--fw-medium);
	line-height: 1.2;
}

.sq-row__meta {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	margin-top: calc(25 * var(--u));
}

.sq-row__f {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(12 * var(--u));
}

.sq-row__f dt {
	color: rgba(24, 24, 24, 0.5);
	font-size: var(--t14);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sq-row__f dd {
	color: rgba(24, 24, 24, 0.8);
	font-size: var(--t12);
	font-weight: var(--fw-medium);
	line-height: 1.3;
	text-align: right;
}

.sq-row__f--report { order: 1; }
.sq-row__f--batch { order: 2; }
.sq-row__f--status { order: 3; }

.sq-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: #2e9e5b;
	vertical-align: middle;
}

.sq-row__btn {
	justify-content: center;
	height: calc(36 * var(--u));
	min-height: 34px;
	--py: 8;
	border-color: #c9d5f4;
	color: #1b3bc5;
	font-size: var(--t14);
	background: #fff;
}

.btn.btn--outline.sq-row__btn {
	border-color: #c9d5f4;
	color: #1b3bc5;
}

/* Demonstration rows have no destination yet: button look, not interactive. */
.sq-row__btn--static {
	cursor: default;
	pointer-events: none;
}

.btn.btn--outline.sq-row__btn--static:hover {
	background: #fff;
}

.sq-reports__empty {
	margin-top: calc(24 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t16);
	text-align: center;
	opacity: 0.75;
}

.sq-reports__all {
	border: 0;
	font-family: var(--font-sans);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(264 * var(--u));
	height: calc(44 * var(--u));
	min-height: 44px;
	margin: calc(24 * var(--u)) auto 0;
	border-radius: 999px;
	background: var(--color-action);
	color: #fff;
	font-size: var(--t16);
	text-decoration: none;
}

.sq-reports__all[hidden] {
	display: none;
}

.sq-reports__all:hover {
	background: var(--color-action-hover);
	color: #fff;
}

.sq-reports__all:focus-visible {
	outline: 2px solid var(--color-text-accent);
	outline-offset: 2px;
}

.sq-reports__all-i {
	display: none;
}

@media (min-width: 768px) {
	.sq-reports__card {
		min-height: calc(783 * var(--d));
		padding: calc(62 * var(--d)) calc(48 * var(--d)) calc(56 * var(--d));
		background: #fafcff;
	}

	.sq-reports__bg {
		opacity: 1;
	}

	.sq-reports__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: calc(24 * var(--d));
		text-align: left;
	}

	.sq-reports__head .sq-h3 {
		max-width: none;
	}

	.sq-search {
		flex: none;
		width: calc(420 * var(--d));
		max-width: none;
	}

	.sq-search__i {
		left: calc(24 * var(--d));
		width: calc(19 * var(--d));
		min-width: 14px;
	}

	.sq-search__input {
		height: calc(55 * var(--d));
		min-height: 40px;
		padding: 0 calc(20 * var(--d)) 0 calc(60 * var(--d));
		color: var(--color-text-body);
		font-size: var(--t16);
	}

	.sq-search__input::placeholder {
		color: var(--color-placeholder);
	}

	.sq-rows {
		gap: calc(16 * var(--d));
		margin-top: calc(40 * var(--d));
	}

	.sq-row {
		display: grid;
		grid-template-columns: minmax(calc(225 * var(--d)), 27%) minmax(0, 1fr) auto;
		align-items: center;
		gap: 0;
		min-height: calc(140 * var(--d));
		padding: 0 calc(40 * var(--d));
		border-radius: calc(24 * var(--d));
		box-shadow: 0 4px 120px rgba(206, 225, 255, 0.25);
	}

	.sq-row__name {
		padding-right: calc(24 * var(--d));
		font-size: min(var(--q36), 2.7vw); /* long product names must not break mid-word on narrow desktops */
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-tight);
		overflow-wrap: break-word;
	}

	.sq-row__meta {
		margin-top: 0;
		/* Fixed Date/Status tracks keep columns aligned across rows; Batch takes the rest and may wrap. */
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(calc(125 * var(--d)), auto) minmax(calc(72 * var(--d)), auto);
		align-items: start;
		column-gap: calc(32 * var(--d));
		min-width: 0;
		margin-right: max(calc(32 * var(--d)), 24px); /* clear space before the button */
	}

	.sq-row__f {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
	}

	.sq-row__f--batch {
		order: 1;
		min-width: 0;
		overflow-wrap: anywhere; /* real batch numbers can be long */
	}
	.sq-row__f--report {
		order: 2;
		white-space: nowrap;
	}
	.sq-row__f--status { order: 3; }

	.sq-row__f dt {
		font-size: var(--t16);
		letter-spacing: 0.1em;
		opacity: 1;
	}

	.sq-row__f dd {
		color: var(--color-text-body);
		font-size: var(--t20);
		font-weight: var(--fw-regular);
		text-align: left;
	}

	.sq-dot {
		display: none;
	}

	.sq-row__btn {
		--px: 30;
		--py: 11;
		height: auto;
		min-height: 0;
		border-color: rgba(24, 24, 24, 0.5);
		font-size: var(--t20);
		color: var(--color-text-body);
	}

	.btn.btn--outline.sq-row__btn {
		border-color: rgba(24, 24, 24, 0.5);
		color: var(--color-text-body);
	}

	.sq-reports__all {
		width: auto;
		height: auto;
		min-height: 0;
		margin-top: calc(48 * var(--d));
		width: fit-content;
		padding: calc(14 * var(--d)) calc(48 * var(--d));
		background: var(--color-surface-1);
		color: var(--color-text-body);
		font-size: var(--t20);
		line-height: 1.3;
	}

	.sq-reports__all:hover {
		background: #fff;
		color: var(--color-text-body);
	}

	.sq-reports__all-i {
		display: inline;
		margin-left: 0.4em;
		font-family: var(--font-sans);
	}
}

/* =====================================================================
 * 7. Standards
 * =================================================================== */
.sq-standards__title {
	max-width: calc(250 * var(--u));
	color: var(--sq-on);
	font-size: var(--q36);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	letter-spacing: var(--ls-tight);
}

.sq-standards__list {
	display: flex;
	flex-direction: column;
	gap: calc(36 * var(--u));
	margin-top: calc(28 * var(--u));
}

.sq-std {
	padding-top: calc(16 * var(--u));
	border-top: 1px solid rgba(24, 24, 24, 0.15);
}

.sq-std__title {
	color: var(--color-text-body);
	font-size: var(--t20);
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.sq-std__text {
	margin-top: calc(6 * var(--u));
	color: rgba(24, 24, 24, 0.8);
	font-size: var(--t14);
	line-height: 1.4;
}

@media (min-width: 768px) {
	.sq-standards {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.sq-standards__title {
		max-width: none;
		flex: none;
		width: calc(500 * var(--d));
		padding-left: calc(2 * var(--d));
		color: #000;
		font-size: var(--t60);
		line-height: 1.2;
		letter-spacing: var(--ls-tight);
	}

	.sq-standards__list {
		flex: none;
		width: calc(660 * var(--d));
		gap: calc(24 * var(--d));
		margin-top: 0;
	}

	.sq-std {
		display: grid;
		grid-template-columns: calc(320 * var(--d)) minmax(0, calc(307 * var(--d)));
		column-gap: calc(20 * var(--d));
		padding-top: calc(24 * var(--d));
	}

	.sq-std:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.sq-std__title {
		padding-right: calc(10 * var(--d));
		color: #000;
		font-size: var(--t24);
		line-height: 1.2;
		letter-spacing: var(--ls-tight);
	}

	.sq-std__text {
		margin: 0;
		color: var(--color-text-body);
		font-size: var(--t20);
		line-height: 1.3;
		letter-spacing: var(--ls-tight);
		opacity: 0.75;
	}
}

/* =====================================================================
 * 8. Research journal carousel
 * =================================================================== */
.sq-jr__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--u));
}

.sq-jr__head .sq-h3 {
	flex: 0 0 100%;
	max-width: calc(320 * var(--u));
}

.sq-jr__all {
	--px: 20;
	--py: 8;
	height: calc(36 * var(--u));
	min-height: 34px;
	font-size: var(--t14);
	color: var(--sq-ink);
}

.sq-jr__slider {
	margin-top: calc(24 * var(--u));
	overflow: visible;
	clip-path: inset(-170px calc(-1 * var(--pad)) -170px calc(-1 * var(--pad)));
}

.sq-jr__slider .swiper-slide {
	box-sizing: border-box;
	width: calc(280 * var(--u));
	height: auto;
	margin-right: calc(12 * var(--u));
}

.sq-jr__slider.swiper-initialized .swiper-slide {
	transition: opacity 0.25s ease;
}

.sq-jr__slider.swiper-initialized .swiper-slide:not(.swiper-slide-visible) {
	opacity: 0;
	pointer-events: none;
}

.sq-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: calc(16 * var(--u));
	border-radius: calc(16 * var(--u));
	background: #fff;
	box-shadow: var(--shadow-card);
	color: var(--sq-ink);
}

.sq-post__media {
	height: calc(164 * var(--u));
	border-radius: calc(12 * var(--u));
	background: #f1f6ff;
	overflow: hidden;
}

.sq-post__media {
	flex: none;
}

.sq-post__title,
.sq-post__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.sq-post__media .pt-jcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sq-jr__empty {
	margin: 0;
	padding: calc(24 * var(--u)) 0;
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.3;
	opacity: 0.75;
}

/* "View Lab Reports" buttons jump to the report directory of this page (id="lab-reports-list"). */
.sq-reports {
	scroll-margin-top: calc(24 * var(--u));
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.pt-science) {
		scroll-behavior: smooth;
	}
}

.sq-post__title {
	margin-top: calc(24 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t20);
	font-weight: var(--fw-regular);
	line-height: 1.2;
}

.sq-post__text {
	margin-top: calc(8 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t14);
	line-height: 1.4;
	opacity: 0.75;
}

.sq-post__link {
	align-self: flex-start;
	margin-top: auto;
	padding-top: calc(16 * var(--u));
	color: var(--sq-ink);
	font-size: var(--t14);
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	opacity: 0.75;
}

.sq-post__link:hover {
	opacity: 1;
}

@media (min-width: 768px) {
	.sq-jr__head {
		flex-wrap: nowrap;
		gap: calc(8 * var(--d));
	}

	.sq-jr__head .sq-h3 {
		flex: 1 1 auto;
		max-width: none;
	}

	.sq-jr__nav {
		margin-right: calc(42 * var(--d));
	}

	.sq-jr__all {
		--px: 34;
		--py: 8;
		height: auto;
		min-height: 0;
		font-size: var(--t20);
		border-color: #9bbfff;
	}

	.sq-jr__slider {
		margin-top: calc(50 * var(--d));
	}

	.sq-jr__slider .swiper-slide {
		width: calc(547 * var(--d));
		margin-right: calc(20 * var(--d));
	}

	.sq-post {
		min-height: calc(472 * var(--d));
		padding: calc(24 * var(--d));
		border-radius: calc(16 * var(--d));
		box-shadow: 0 4px 118.3px rgba(206, 225, 255, 0.5);
	}

	.sq-post__media {
		height: calc(279 * var(--d));
	}

	.sq-post__title {
		margin-top: calc(24 * var(--d));
		color: var(--sq-ink);
		font-weight: var(--fw-medium);
		font-size: var(--t24);
		letter-spacing: var(--ls-tight);
	}

	.sq-post__text {
		margin-top: calc(13 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}

	.sq-post__link {
		padding-top: calc(20 * var(--d));
		font-size: var(--t20);
	}
}

/* =====================================================================
 * Final CTA
 * =================================================================== */
.sq-cta__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(628 * var(--u));
	padding: calc(36 * var(--u)) calc(20 * var(--u)) calc(300 * var(--u));
	background: linear-gradient(180deg, #e4ecff 0%, #f4f7ff 55%, #fff 100%);
	text-align: center;
}

.sq-cta__bg {
	display: none;
}

.sq-cta__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(280 * var(--u));
	overflow: hidden;
}

.sq-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 50%;
}

.sq-cta__title {
	max-width: calc(312 * var(--u));
	color: #16267e;
	font-size: var(--q36);
	font-weight: var(--fw-medium);
	line-height: 1.15;
	letter-spacing: var(--ls-tight);
}

.sq-cta__text {
	max-width: calc(260 * var(--u));
	margin-top: calc(12 * var(--u));
	color: rgba(19, 38, 107, 0.76);
	font-size: var(--t16);
	line-height: 1.21;
}

.sq-cta__actions {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	margin-top: calc(24 * var(--u));
}

.sq-cta__actions .sq-btn {
	width: calc(264 * var(--u));
	height: calc(44 * var(--u));
	min-height: 44px;
	justify-content: center;
}

.sq-cta__actions .btn--outline {
	border-color: #fff;
	color: var(--color-text-accent);
}

.sq-cta__actions .btn--outline:not(:hover) {
	background: #fff;
}

@media (min-width: 768px) {
	.sq-cta__card {
		display: block;
		height: calc(520 * var(--d));
		min-height: 0;
		padding: calc(96 * var(--d)) calc(48 * var(--d)) 0;
		background: transparent;
		text-align: left;
	}

	.sq-cta__bg {
		display: block;
	}

	.sq-cta__photo {
		left: auto;
		top: 0;
		width: calc(1040 * var(--d));
		height: 100%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%);
		mask-image: linear-gradient(90deg, transparent 0, #000 9%);
	}

	.sq-cta__img {
		object-position: 50% 50%;
	}

	.sq-cta__title {
		position: relative;
		max-width: none;
		width: calc(660 * var(--d));
		color: var(--color-text-body);
		font-weight: var(--fw-regular);
		font-size: var(--t72);
		line-height: 1.1;
	}

	.sq-cta__text {
		color: var(--color-text-body);
		opacity: 0.75;
		position: relative;
		max-width: none;
		width: calc(569 * var(--d));
		margin-top: calc(24 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}

	.sq-cta__actions {
		position: absolute;
		left: calc(48 * var(--d));
		top: calc(370 * var(--d));
		flex-direction: row;
		gap: calc(16 * var(--d));
		margin: 0;
	}

	.sq-cta__actions .sq-btn {
		width: auto;
		height: auto;
		min-height: 0;
	}

	.sq-cta__actions .btn--outline {
		color: var(--sq-ink);
	}

	.sq-cta__actions .btn--outline:not(:hover) {
		background: transparent;
	}

	.btn.btn--outline.sq-cta__btn,
	.sq-cta__actions .btn--outline {
		border-color: #9bbfff;
	}
}

@media (max-width: 767px) {
	.sq-jr__nav {
		--S: calc(40 * var(--u));
		gap: calc(8 * var(--u));
	}

	.sq-jr__nav .hm-nav__btn {
		border: 1px solid var(--color-border-strong);
		background: #fff;
	}

	.sq-jr__nav .hm-nav__ring {
		display: none;
	}

	.sq-jr__nav .hm-nav__arrow {
		text-shadow: none;
	}
}

/* Reduced motion: no transitions on this page. */
@media (prefers-reduced-motion: reduce) {
	.pt-science *,
	.pt-science *::before,
	.pt-science *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}