/*
 * Home page (phase 3). Loaded on the front page only.
 *
 * Units: --u is "1 design px". Mobile (320-767): --u = --m (1px at 390).
 * Desktop (768+): --u = --d (1px at 1440, capped, so the composition stops
 * growing above 1440 and only the outer whitespace grows).
 * Type uses the --t* tokens: design size scaled with a readable floor.
 * Colors, radii and shadows come from tokens.css.
 */

.pt-home {
	--u: var(--m);
	--pad: calc(20 * var(--m));
	--hm-ink: var(--color-text-brand);

	/* Type (mobile reference sizes). */
	--t42: max(30px, calc(42 * var(--ms)));
	--t36: max(28px, calc(36 * var(--ms)));
	--t24: max(19px, calc(24 * var(--ms)));
	--t20: max(17px, calc(20 * var(--ms)));
	--t16: max(13.5px, calc(16 * var(--ms)));
	--t14: max(12.5px, calc(14 * var(--ms)));
	--t12: max(11px, calc(12 * var(--ms)));
	--t10: max(10px, calc(10 * var(--ms)));

	/* Science heading colors. */
	--sci-on: var(--color-text-body);
	--sci-off: rgba(24, 24, 24, 0.25);

	overflow-x: clip;
}

@media (min-width: 768px) {
	.pt-home {
		--u: var(--d);
		--pad: calc(50 * var(--d));
		--t96: max(48px, calc(96 * var(--d)));
		--t72: max(40px, calc(72 * var(--d)));
		--t60: max(34px, calc(60 * var(--d)));
		--t48: max(30px, calc(48 * var(--d)));
		--t24: max(17px, calc(24 * var(--d)));
		--t20: max(14px, calc(20 * var(--d)));
		--t16: max(13px, calc(16 * var(--d)));
		--t14: max(12px, calc(14 * var(--d)));
		--t12: max(11px, calc(12 * var(--d)));
		--t10: max(10px, calc(10 * var(--d)));
		--sci-on: #000;
		--sci-off: rgba(0, 0, 0, 0.15);
	}
}

.pt-home > section {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--pad);
}

@media (min-width: 768px) {
	.pt-home > section {
		max-width: calc(1440 * var(--d));
	}
}

:where(.pt-home) h1,
:where(.pt-home) h2,
:where(.pt-home) h3,
:where(.pt-home) p,
:where(.pt-home) ul {
	margin: 0;
	padding: 0;
}

:where(.pt-home) ul {
	list-style: none;
}

.pt-home img {
	max-width: none;
}

/* Section rhythm: Figma gaps (mobile values differ per section). */
.hm-cats { margin-top: calc(36 * var(--u)); }
.hm-sci { margin-top: calc(48 * var(--u)); }
.hm-notes { margin-top: calc(43 * var(--u)); }
.hm-dlv { margin-top: calc(48 * var(--u)); }
.hm-best { margin-top: calc(48 * var(--u)); }
.hm-lab { margin-top: calc(59 * var(--u)); }
.hm-jr { margin-top: calc(48 * var(--u)); }
.hm-conn { margin-top: calc(48 * var(--u)); }
.hm-faq { margin-top: calc(48 * var(--u)); }

@media (min-width: 768px) {
	.hm-cats { margin-top: calc(74 * var(--d)); }
	.hm-sci,
	.hm-notes,
	.hm-dlv,
	.hm-best,
	.hm-lab,
	.hm-jr,
	.hm-conn,
	.hm-faq {
		margin-top: calc(120 * var(--d));
	}
}

/* FAQ -> footer. The footer's global `margin-top: var(--section-gap)` is a fixed 120px at every width;
   Figma wants 120 at 1440 (scales with --d, same as the other Home gaps) and 48 at 390 (--m). Scoped to
   the Home <main> only (the Product page also carries .pt-home and has its own footer gap). */
.pt-home:not(.pt-product) + .site-footer {
	margin-top: calc(48 * var(--m));
}

@media (min-width: 768px) {
	.pt-home:not(.pt-product) + .site-footer {
		margin-top: calc(120 * var(--d));
	}
}

/* Shared heading. */
.hm-h2 {
	color: #000;
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

@media (min-width: 768px) {
	.hm-h2 {
		font-size: var(--t48);
	}
}

/* Buttons built on .btn: sizes from custom props, no gap (arrow sits against the label). */
.hm-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) {
	.hm-btn {
		--px: 30;
		--py: 16;
		font-size: var(--t20);
		line-height: 1.3;
	}
}

.hm-arrow {
	display: inline-block;
	width: calc(20 * var(--u));
	margin-left: 0;
	text-align: left;
	font-family: var(--font-sans);
}

.hm-btn--glass {
	/* Figma "glass" pill: white 1px rim, no fill on mobile, light inner glow. */
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	box-shadow: inset 0 0 calc(10 * var(--u)) rgba(255, 255, 255, 0.85), 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(155, 191, 255, 0.3);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.hm-btn--glass:hover {
	background: rgba(255, 255, 255, 0.5);
	border-color: #fff;
}

@media (min-width: 768px) {
	.hm-btn--glass {
		background: rgba(192, 215, 255, 0.25);
	}

	.hm-btn--glass:hover {
		background: rgba(192, 215, 255, 0.5);
	}
}

/* =====================================================================
 * Hero
 * =================================================================== */
.hm-hero {
	margin-top: 0;
}

.hm-hero__card {
	position: relative;
	min-height: calc(611 * var(--u));
	border-radius: calc(24 * var(--u));
	/* No fill of its own: the exported artwork is the background. A grey fill here bled
	   through the anti-aliased rounded edge as a faint grey outline (bottom/right). */
	background: transparent;
	box-shadow: none;
	filter: none;
	color: var(--hm-ink);
}

.hm-hero__card {
	overflow: hidden;
}

/* Mobile Figma (454:2765): same artwork at 1:1 scale, positioned 184px further left than
   desktop (bg rect x -258 vs -74 inside the card), so the circles line up with the vial. */
.hm-hero__bg {
	position: absolute;
	left: calc(-184 * var(--u));
	top: 0;
	width: calc(1340 * var(--u));
	max-width: none;
	height: calc(626 * var(--u));
}

/* Vial: the exported image includes its soft glow; centre on the Figma vial box. */
.hm-hero__vial {
	position: absolute;
	left: calc(-43.3 * var(--u));
	top: calc(-64.2 * var(--u));
	width: calc(443.6 * var(--u));
	height: auto;
	pointer-events: none;
}

.hm-hero__copy {
	position: relative;
	padding: calc(323 * var(--u)) calc(29 * var(--u)) calc(20 * var(--u));
	text-align: center;
}

.hm-hero__title {
	max-width: calc(292 * var(--u));
	margin-inline: auto;
	color: var(--hm-ink);
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
}

.hm-hero__lead {
	max-width: calc(246 * var(--u));
	margin: calc(12 * var(--u)) auto 0;
	font-size: var(--t16);
	line-height: 1.21;
	opacity: 0.85;
}

.hm-hero__actions {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	max-width: calc(245 * var(--u));
	margin: calc(24 * var(--u)) auto 0;
}

.hm-hero__actions .hm-btn {
	width: 100%;
	--px: 16;
	--py: 12;
}

@media (min-width: 768px) {
	.hm-hero__card {
		min-height: calc(626 * var(--d));
		border-radius: calc(48 * var(--d));
	}

	.hm-hero__bg {
		left: 0;
		width: 100%;
		height: 100%;
	}

	.hm-hero__vial {
		left: calc(-50.2 * var(--d));
		top: calc(-119.3 * var(--d));
		width: calc(845.5 * var(--d));
	}

	.hm-hero__copy {
		position: absolute;
		left: calc(689 * var(--d));
		top: calc(132 * var(--d));
		width: calc(600 * var(--d));
		padding: 0;
		text-align: left;
	}

	.hm-hero__title {
		max-width: calc(511 * var(--d));
		margin: 0;
		font-size: var(--t72);
		font-weight: var(--fw-regular);
		line-height: 1.1;
		text-wrap: wrap;
	}

	.hm-hero__lead {
		max-width: calc(476 * var(--d));
		margin: calc(16 * var(--d)) 0 0;
		font-size: var(--t24);
		font-weight: var(--fw-medium);
		line-height: 1.21;
		letter-spacing: var(--ls-tight);
	}

	.hm-hero__actions {
		flex-direction: row;
		gap: calc(11 * var(--d));
		max-width: none;
		margin: calc(73 * var(--d)) 0 0;
	}

	/* Figma 453:899 / 453:901: both 58px high with 16/30 padding; 211 and 226 wide. */
	.hm-hero__actions .hm-btn {
		width: auto;
		--px: 30;
		--py: 16;
	}
}

/* =====================================================================
 * Product card (Categories grid + Best Sellers slider)
 * =================================================================== */
.pt-card-wrap {
	list-style: none;
}

.pt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 calc(6 * var(--u)) calc(10 * var(--u));
	border-radius: calc(9 * var(--u));
	background: var(--color-bg);
	/* Figma: mobile card 0 2.24 66.2, desktop card 0 4 118.3 (rgba(206,225,255,.5)). */
	box-shadow: 0 calc(2.24 * var(--u)) calc(66.2 * var(--u)) rgba(206, 225, 255, 0.5);
	color: var(--hm-ink);
	transition: box-shadow var(--transition);
}

.pt-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(8 * var(--u));
	padding-top: calc(10 * var(--u));
	padding-inline: calc(0 * var(--u));
}

.pt-card__title {
	/* Own layout area on the left; long names wrap to a second line (no ellipsis). */
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: break-word;
	color: var(--hm-ink);
	font-size: var(--t16);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

.pt-card__name {
	/* Up to 2 lines of normal wrapping; the space for 2 lines is always reserved so
	   cards stay aligned. Only a genuinely excessive name is clamped after line 2.
	   The clamp sits on this inner span so the stretched ::after link area is not clipped. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.42em; /* 2 x line-height 1.21 */
}

.pt-card__link {
	color: inherit;
	text-decoration: none;
}

/* One link per card: the title link covers the whole card. */
.pt-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pt-card__link:focus-visible {
	outline: none;
}

.pt-card__link:focus-visible::after {
	outline: 2px solid var(--color-action);
	outline-offset: 3px;
}

.pt-card__more {
	display: none; /* not in the approved mobile card */
	position: relative;
	z-index: 1; /* above the stretched title link */
	flex: none;
	color: inherit;
	margin-top: calc(5 * var(--u));
	font-size: var(--t16);
	line-height: 1.21;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	white-space: nowrap;
	opacity: var(--opacity-tertiary);
	transition: opacity var(--transition);
}

.pt-card__media {
	height: calc(123 * var(--u));
	border-radius: calc(6.7 * var(--u));
	background: #f1f6ff;
	overflow: hidden;
}

/* One image rule for every card (Home Categories, Home Best Sellers, Product Related): the whole product
   is shown and centred in the media box (no cover-crop of tall vials; boxes and sets keep their shape).
   `multiply` lets a white photo background melt into the light-blue box. The two-class selector also
   keeps WooCommerce's `.woocommerce img { height:auto; max-width:100% }` (Product page) from changing it. */
.pt-card .pt-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
}

.pt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(8 * var(--u));
	margin-top: calc(10 * var(--u));
}

.pt-card__price {
	font-size: var(--t12);
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: var(--ls-tight);
}

/* Currency set to the right of the amount in WooCommerce: keep a space before the symbol. */
.pt-card__price .woocommerce-Price-currencySymbol:last-child {
	margin-left: 0.25em;
}

.pt-card__price del {
	margin-right: 0.35em;
	font-weight: var(--fw-regular);
	opacity: 0.5;
}

.pt-card__price ins {
	text-decoration: none;
}

.pt-card__dose {
	font-size: var(--t10);
	line-height: 1.21;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: var(--opacity-tertiary);
}

@media (hover: hover) {
	.pt-card:hover {
		box-shadow: 0 4px 120px rgba(166, 200, 255, 0.55);
	}

	.pt-card:hover .pt-card__more {
		opacity: 0.85;
	}
}

@media (min-width: 768px) {
	.pt-card {
		padding: 0 calc(12 * var(--d)) calc(24 * var(--d));
		border-radius: calc(16 * var(--d));
		box-shadow: 0 calc(4 * var(--d)) calc(118.3 * var(--d)) rgba(206, 225, 255, 0.5);
	}

	.pt-card__head {
		gap: calc(12 * var(--d));
		padding-top: calc(24 * var(--d));
	}

	.pt-card__title {
		font-size: var(--t24);
		line-height: 1.21;
	}

	.pt-card__more {
		display: block;
	}

	.pt-card__media {
		height: calc(220 * var(--d));
		border-radius: calc(12 * var(--d));
	}

	.pt-card__foot {
		margin-top: calc(16 * var(--d));
	}

	.pt-card__price {
		font-size: var(--t20);
	}

	.pt-card__dose {
		font-size: var(--t16);
	}
}

/* =====================================================================
 * Categories + latest products
 * =================================================================== */
.hm-cats__head {
	display: block;
}

.hm-tabs {
	min-width: 0;
}

.hm-tabs__strip {
	display: flex;
	flex-wrap: nowrap;
	gap: calc(4 * var(--u));
	margin: calc(24 * var(--u)) calc(-1 * var(--pad)) 0 0;
	padding: 6px var(--pad) 6px 6px;
	margin-left: -6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hm-tabs__strip::-webkit-scrollbar {
	display: none;
}

.hm-tabs__strip .chip {
	flex: none;
	min-height: 0;
	padding: calc(8 * var(--u) - 1px) calc(24 * var(--u) - 1px);
	font-size: var(--t16);
	line-height: 1.21;
	white-space: nowrap;
	text-decoration: none;
}

.hm-cats__panel {
	margin-top: calc(16 * var(--u));
}

.hm-cats__panel.is-loading .hm-grid {
	opacity: 0.4;
	pointer-events: none;
}

.hm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(12 * var(--u));
	transition: opacity var(--transition);
}

.hm-cats__empty {
	padding: calc(40 * var(--u)) 0;
	text-align: center;
	opacity: var(--opacity-secondary);
}

.hm-cats__more {
	display: flex;
	justify-content: center;
	margin-top: calc(24 * var(--u));
}

@media (min-width: 768px) {
	.hm-cats__head {
		display: flex;
		align-items: center;
		gap: calc(313 * var(--d));
	}

	.hm-tabs {
		flex: 1 1 0;
	}

	.hm-tabs__strip {
		gap: calc(16 * var(--d));
		margin: -6px;
		padding: 6px;
	}

	.hm-tabs__strip .chip {
		padding: calc(8 * var(--d) - 1px) calc(24 * var(--d) - 1px);
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-cats__panel {
		margin-top: calc(54 * var(--d));
	}

	.hm-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: calc(44 * var(--d));
	}

	.hm-cats__more {
		margin-top: calc(72 * var(--d));
	}

	.hm-cats__more .hm-btn {
		--px: 48;
		--py: 16;
	}
}

/* =====================================================================
 * Science designed around you
 * =================================================================== */
.hm-sci {
	position: relative;
	text-align: center;
}

.hm-sci__title {
	max-width: calc(338 * var(--u));
	margin-inline: auto;
	color: var(--sci-on);
	font-size: var(--t42);
	font-weight: var(--fw-medium);
	line-height: 1.15;
	letter-spacing: -0.05em;
}

.hm-sci__line {
	display: block;
}

.hm-sci__line--2 {
	margin-top: calc(11 * var(--u));
}

/* Characters are created by home.js. Words never break across lines. */
.hm-w {
	display: inline-block;
	white-space: nowrap;
}

.hm-c {
	color: var(--sci-off);
	transition: color 0.18s linear;
}

.hm-c.is-on {
	color: var(--sci-on);
}

.hm-sci__title.is-static .hm-c {
	color: var(--sci-on);
	transition: none;
}

.hm-sci__stage {
	position: relative;
	margin-top: calc(47 * var(--u));
}

.hm-sci__diagram {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	height: auto;
}

.hm-sci__diagram--mobile {
	left: 0;
	top: calc(-268 * var(--u));
	width: calc(390 * var(--u));
	margin-left: calc(-1 * var(--pad));
}

.hm-sci__diagram--desktop,
.hm-sci__connector,
.hm-sci__num {
	display: none;
}

.hm-sci__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(16 * var(--u));
	width: calc(262 * var(--u));
	margin-inline: auto;
}

.hm-sci__item {
	display: block;
	padding: calc(12 * var(--u)) calc(24 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--color-bg);
	color: var(--color-text-body);
	text-align: center;
}

.hm-sci__item--04 {
	align-self: stretch;
}

.hm-sci__glow {
	display: none;
}

.hm-sci__item:focus-visible {
	outline: calc(2 * var(--u)) solid var(--color-accent);
	outline-offset: calc(2 * var(--u));
}

/* Approved mobile order: 02, 01, 04, 03, 05. */
.hm-sci__item--02 { order: 1; }
.hm-sci__item--01 { order: 2; }
.hm-sci__item--04 { order: 3; }
.hm-sci__item--03 { order: 4; }
.hm-sci__item--05 { order: 5; }

.hm-sci__body {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
}

.hm-sci__name {
	font-size: var(--t16);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
	color: var(--color-text-body);
}

.hm-sci__text {
	font-size: var(--t14);
	line-height: 1.21;
	opacity: 0.8;
}

@media (min-width: 768px) {
	/* Text follows the same --d scale as the figure, connectors and text boxes (no px floors), so the
	   composition stays proportional from 1440 down to 768. Scoped: the global tokens are unchanged. */
	.hm-sci {
		--t24: calc(24 * var(--d));
		--t20: calc(20 * var(--d));
		--t16: calc(16 * var(--d));
	}

	.hm-sci__title {
		max-width: none;
		font-size: var(--t96);
		line-height: 1.05;
	}

	.hm-sci__line--1 {
		max-width: calc(803 * var(--d));
		margin-inline: auto;
		letter-spacing: var(--ls-tight);
	}

	.hm-sci__line--2 {
		max-width: calc(995 * var(--d));
		margin: calc(8 * var(--d)) auto 0;
		letter-spacing: -0.05em;
	}

	.hm-sci__stage {
		height: calc(606 * var(--d));
		margin: calc(120 * var(--d)) calc(-1 * var(--pad)) 0;
	}

	.hm-sci__diagram--mobile {
		display: none;
	}

	.hm-sci__diagram--desktop {
		display: block;
		left: 0;
		top: calc(-395 * var(--d));
		width: calc(1440 * var(--d));
	}

	.hm-sci__connector {
		position: absolute;
		z-index: 1;
		display: block;
		width: calc(135 * var(--d));
		height: calc(32 * var(--d));
		pointer-events: none;
	}

	/* Figma boxes (134.5 x 29) with the exported 135 x 32 art offset (-0.5, -2.9). */
	.hm-sci__connector--l1 { left: calc(193.5 * var(--d)); top: calc(142.1 * var(--d)); }
	.hm-sci__connector--l2 { left: calc(193.5 * var(--d)); top: calc(462.1 * var(--d)); }
	.hm-sci__connector--r1 { left: calc(1080.5 * var(--d)); top: calc(198.1 * var(--d)); }
	.hm-sci__connector--r2 { left: calc(1080.5 * var(--d)); top: calc(516.1 * var(--d)); }

	.hm-sci__list {
		position: static;
		display: block;
		width: auto;
		margin: 0;
	}

	/* A zero-size block (not display: contents, which cannot take focus) so the item
	   can be a keyboard stop; its children stay positioned against the stage. */
	.hm-sci__item {
		display: block;
		position: static;
		height: 0;
		padding: 0;
		background: none;
		text-align: left;
	}

	.hm-sci__num {
		position: absolute;
		z-index: 1;
		display: block;
		left: calc(var(--nx) * var(--d));
		top: calc(var(--ny) * var(--d));
		color: var(--color-text-accent);
		font-size: var(--t16);
		line-height: 1.21;
		transition: text-shadow 0.25s ease;
	}

	.hm-sci__body {
		position: absolute;
		z-index: 1;
		left: calc(var(--bx) * var(--d));
		top: calc(var(--by) * var(--d));
		width: calc(var(--bw) * var(--d));
		gap: calc(8 * var(--d));
		color: var(--hm-ink);
	}

	.hm-sci__name {
		font-size: var(--t24);
		color: var(--hm-ink);
		transition: color 0.25s ease, text-shadow 0.25s ease;
	}

	.hm-sci__text {
		font-size: var(--t20);
		line-height: 1.3;
		opacity: 0.75;
	}

	/* --gx / --gy / --gs: centre and diameter (design px, stage coordinates) of the soft
	   glow behind each numbered shape. Tune them independently here. */
	.hm-sci__item--01 { --nx: 437; --ny: 141; --bx: 163; --by: 5; --bw: 165; --gx: 450; --gy: 152; --gs: 190; }
	.hm-sci__item--02 { --nx: 532; --ny: 470; --bx: 163; --by: 322; --bw: 196; --gx: 541; --gy: 478; --gs: 240; }
	.hm-sci__item--03 { --nx: 727; --ny: 65; --bx: 660; --by: 106; --bw: 153; --gx: 736; --gy: 118; --gs: 330; }
	.hm-sci__item--04 { --nx: 931; --ny: 470; --bx: 1103; --by: 367; --bw: 196; --gx: 940; --gy: 478; --gs: 250; }
	.hm-sci__item--05 { --nx: 978; --ny: 206; --bx: 1111; --by: 49; --bw: 146; --gx: 987; --gy: 215; --gs: 190; }

	.hm-sci__item--03 .hm-sci__text { width: calc(152 * var(--d)); }
	.hm-sci__item--05 .hm-sci__name { width: calc(130 * var(--d)); }

	/* Hover / keyboard focus (tabindex=0 on the item, same state): a soft, large-radius
	   brand-blue glow lights the numbered shape behind the number; text only shifts colour. */
	.hm-sci__item:focus-visible {
		outline: 0;
	}

	.hm-sci__glow {
		display: block;
		position: absolute;
		z-index: 0;
		left: calc((var(--gx) - var(--gs) / 2) * var(--d));
		top: calc((var(--gy) - var(--gs) / 2) * var(--d));
		width: calc(var(--gs) * var(--d));
		height: calc(var(--gs) * var(--d));
		border-radius: 50%;
		background: radial-gradient(closest-side, rgba(115, 166, 255, 0.32) 0%, rgba(37, 74, 209, 0.14) 50%, rgba(142, 186, 255, 0) 100%);
		filter: blur(calc(14 * var(--d)));
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
	}

	.hm-sci__item:hover .hm-sci__glow,
	.hm-sci__item:focus-visible .hm-sci__glow {
		opacity: 1;
	}

	.hm-sci__item:hover .hm-sci__name,
	.hm-sci__item:focus-visible .hm-sci__name {
		color: var(--color-text-accent);
	}
}

/* =====================================================================
 * Customer notes
 * =================================================================== */
.hm-notes__title {
	margin-bottom: calc(16 * var(--u));
}

.hm-notes__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	padding: calc(8 * var(--u));
	border-radius: calc(24 * var(--u));
	background: var(--color-surface-1);
	overflow: hidden;
}

/* Full artwork (viewBox -206 -551 1639 1229 = Figma "image 60" bounds), positioned as in
   Figma: desktop at (-206, -551); mobile (454:2971) scaled 1.126 at (-309.4, -647). */
.hm-notes__bg {
	position: absolute;
	left: calc(-309.4 * var(--u));
	top: calc(-647 * var(--u));
	width: calc(1845.7 * var(--u));
	max-width: none;
	height: auto;
	pointer-events: none;
}

.hm-notes__summary,
.hm-notes__cards {
	position: relative;
}

.hm-notes__hint {
	display: none;
}

.hm-rating {
	display: flex;
	align-items: center;
	height: calc(50 * var(--u));
	padding-left: calc(24 * var(--u));
	border-radius: calc(16 * var(--u));
	background: rgba(255, 255, 255, 0.2);
	color: var(--hm-ink);
}

.hm-rating__score {
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

.hm-rating__star {
	width: calc(21.3 * var(--u));
	height: auto;
	margin-left: calc(8 * var(--u));
}

.hm-rating__sep {
	width: 1px;
	height: calc(46 * var(--u));
	margin-left: calc(26 * var(--u));
	background: var(--color-border-soft);
}

.hm-rating__count {
	margin-left: calc(28 * var(--u));
	font-size: var(--t16);
	line-height: 1.21;
	opacity: var(--opacity-tertiary);
}

.hm-notes__cards {
	/* Native horizontal scroller (no Swiper): 3 full cards, scrollbar hidden, scrolling intact. */
	display: flex;
	flex-direction: row;
	gap: calc(8 * var(--u));
	margin: 0 calc(-8 * var(--u));
	padding: 0 calc(8 * var(--u));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scroll-padding-inline: calc(8 * var(--u));
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hm-notes__cards::-webkit-scrollbar {
	display: none;
}

.hm-review {
	flex: none;
	width: calc(334 * var(--u));
	scroll-snap-align: start;
	min-height: calc(277 * var(--u));
	padding: calc(25 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
	border: 1px solid var(--color-border-soft);
	border-radius: calc(16 * var(--u));
	background: var(--color-bg);
}

.hm-review__name {
	color: var(--hm-ink);
	font-size: var(--t24);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

.hm-review__stars {
	width: calc(120 * var(--u));
	height: calc(24 * var(--u));
	margin-top: calc(8 * var(--u));
}

.hm-review__text {
	max-width: calc(280 * var(--u));
	margin-top: calc(71 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.21;
	opacity: var(--opacity-tertiary);
}

@media (min-width: 768px) {
	.hm-notes {
		position: relative;
		/* Proportional type with small readable floors (the global floors made text outgrow the
		   proportional boxes below ~1000px). Scoped: the global tokens are unchanged. */
		--t48: max(24px, calc(48 * var(--d)));
		--t60: max(30px, calc(60 * var(--d)));
		--t24: max(13px, calc(24 * var(--d)));
		--t20: max(11.5px, calc(20 * var(--d)));
		--t16: max(11px, calc(16 * var(--d)));
	}

	.hm-notes__title {
		position: absolute;
		z-index: 2;
		left: calc(var(--pad) + 43 * var(--d));
		top: calc(61 * var(--d));
		margin: 0;
	}

	.hm-notes__panel {
		display: block;
		min-height: calc(366 * var(--d)); /* grows with the tallest review (was a fixed height that clipped it) */
		padding: 0;
		border-radius: calc(48 * var(--d));
		background: var(--color-surface-2);
	}

	.hm-notes__summary {
		position: absolute;
		left: calc(43 * var(--d));
		top: calc(151 * var(--d));
		width: calc(348 * var(--d));
	}

	.hm-rating {
		height: calc(82 * var(--d));
		padding-left: calc(24 * var(--d));
		border-radius: calc(16 * var(--d));
		background: rgba(255, 255, 255, 0.75);
	}

	.hm-rating__score {
		font-size: var(--t60);
		letter-spacing: -0.03em;
	}

	.hm-rating__star {
		width: calc(25 * var(--d));
		margin: 0 calc(5.5 * var(--d)) 0 calc(13.5 * var(--d));
	}

	.hm-rating__sep {
		height: calc(80 * var(--d));
		margin-left: calc(27 * var(--d));
	}

	.hm-rating__count {
		width: calc(107 * var(--d));
		margin-left: calc(32 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-notes__hint {
		display: block;
		width: calc(306 * var(--d));
		margin-top: calc(20 * var(--d));
		font-size: var(--t16);
		line-height: 1.21;
		opacity: var(--opacity-tertiary);
		color: var(--hm-ink);
	}

	.hm-notes__bg {
		left: calc(-206 * var(--d));
		top: calc(-551 * var(--d));
		width: calc(1639 * var(--d));
	}

	/* Scroll viewport from the first card (x431) to the panel edge; the cards (573 wide,
	   36 gap, top 64) overflow naturally to the right. */
	.hm-notes__cards {
		/* In flow (was absolutely positioned inside a fixed-height panel), so the panel grows with the
		   tallest card; equal-height cards via the default stretch. */
		position: relative;
		margin: 0 0 0 calc(431 * var(--d));
		padding: calc(64 * var(--d)) calc(43 * var(--d)) calc(64 * var(--d)) 0;
		align-items: stretch;
		gap: calc(36 * var(--d));
		/* No snap on desktop: proximity snapping pulled small mouse-wheel steps back to the start.
		   Mobile keeps its touch snap (base rule). */
		scroll-snap-type: none;
		scroll-padding-inline: 0;
	}

	.hm-review {
		position: relative;
		flex: none;
		width: calc(573 * var(--d));
		height: auto;
		min-height: calc(238 * var(--d)); /* grows instead of letting text pass the card edge */
		padding: calc(24 * var(--d)) calc(36 * var(--d));
		border-radius: calc(16 * var(--d));
	}

	.hm-review__stars {
		position: absolute;
		top: calc(23 * var(--d));
		left: calc(376 * var(--d));
		width: calc(160 * var(--d));
		height: calc(32 * var(--d));
		margin: 0;
	}

	.hm-review__text {
		max-width: calc(432 * var(--d));
		margin-top: calc(54 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}
}

/* =====================================================================
 * Delivery / Support / Payment
 * =================================================================== */
.hm-dlv__grid {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
}

.hm-dlv__card {
	position: relative;
	overflow: hidden;
	min-height: calc(170 * var(--u));
	padding: calc(24 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--color-bg);
	/* Figma 453:259: the delivery glow is this card shadow only (no image). */
	box-shadow: 0 calc(4 * var(--u)) calc(118.3 * var(--u)) rgba(206, 225, 255, 0.5);
	color: var(--hm-ink);
}

.hm-dlv__card--support {
	min-height: calc(515 * var(--u));
}

.hm-dlv__card--payment {
	min-height: calc(189 * var(--u));
}

.hm-dlv__eyebrow,
.hm-dlv__title,
.hm-dlv__text,
.hm-dlv__chips,
.hm-dlv__cta {
	position: relative;
}

.hm-dlv__eyebrow {
	color: var(--color-action);
	font-size: var(--t14);
	line-height: 1.21;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: var(--opacity-secondary);
}

.hm-dlv__title {
	margin-top: calc(12 * var(--u));
	max-width: calc(240 * var(--u));
	font-size: var(--t24);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
	color: var(--hm-ink);
}

.hm-dlv__text {
	margin-top: calc(45 * var(--u));
	max-width: calc(282 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.21;
	opacity: var(--opacity-secondary);
}

.hm-dlv__card--support .hm-dlv__text {
	margin-top: calc(32 * var(--u));
}

.hm-dlv__card--support .hm-dlv__text--2 {
	margin-top: calc(11 * var(--u));
}

.hm-dlv__chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(8 * var(--u));
	width: calc(216 * var(--u));
	margin-top: calc(32 * var(--u));
}

.hm-dlv__chips li:has(.hm-chip__icon) {
	align-self: stretch;
}

.hm-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(12 * var(--u));
	padding: calc(12 * var(--u)) calc(24 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--color-surface-3);
	color: var(--hm-ink);
	font-size: var(--t16);
	line-height: 1.21;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition);
}

.hm-chip--pending {
	cursor: default;
}

.hm-chip:not(.hm-chip--pending):hover {
	background: var(--color-border-soft);
}

.hm-chip__icon {
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
}

.hm-dlv__cta {
	--px: 48;
	--py: 16;
	display: flex;
	width: 100%; /* card inner content width (card padding only) */
	margin: calc(32 * var(--u)) 0 0;
}

.hm-dlv__flow {
	display: none;
}

@media (min-width: 768px) {
	.hm-dlv__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		gap: calc(20.5 * var(--d));
	}

	.hm-dlv__card {
		min-height: calc(203 * var(--d));
		padding: calc(24 * var(--d));
		border-radius: calc(16 * var(--d));
	}

	.hm-dlv__card--support {
		min-height: calc(504 * var(--d));
	}

	.hm-dlv__card--payment {
		min-height: calc(203 * var(--d));
	}

		.hm-dlv__eyebrow {
		font-size: var(--t16);
		letter-spacing: 0.1em;
	}

	.hm-dlv__title {
		margin-top: calc(8 * var(--d));
		max-width: none;
		font-size: var(--t24);
	}

	.hm-dlv__text {
		margin-top: calc(47 * var(--d));
		max-width: calc(200 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-dlv__card--payment .hm-dlv__text {
		max-width: calc(278 * var(--d));
	}

	.hm-dlv__card--support .hm-dlv__text {
		margin-top: calc(48 * var(--d));
		max-width: calc(354 * var(--d));
	}

	.hm-dlv__card--support .hm-dlv__text--2 {
		margin-top: calc(16 * var(--d));
		max-width: calc(361 * var(--d));
	}

	.hm-dlv__chips {
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
		margin-top: calc(32 * var(--d));
		gap: calc(8 * var(--d));
	}

	.hm-dlv__chips li:has(.hm-chip__icon) {
		align-self: auto;
	}

	.hm-dlv__cta {
		width: 100%;
		margin-top: calc(40 * var(--d));
		--py: 16;
	}

	.hm-dlv__flow {
		position: absolute;
		z-index: 1;
		display: block;
		top: calc(227.4 * var(--d));
		height: auto;
		pointer-events: none;
	}

	.hm-dlv__flow--left {
		left: calc(294.5 * var(--d));
		width: calc(120 * var(--d));
	}

	.hm-dlv__flow--right {
		left: calc(908 * var(--d));
		width: calc(121 * var(--d));
	}
}

/* =====================================================================
 * Slider navigation (Best Sellers + Journal)
 * =================================================================== */
.hm-nav {
	--S: calc(40 * var(--u));
	display: flex;
	gap: calc(4.44 * var(--u));
}

.hm-nav__btn {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--S);
	height: var(--S);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hm-ink);
	cursor: pointer;
	transition: box-shadow 0.25s ease;
}

.hm-nav__ring {
	position: absolute;
	left: calc(var(--S) * -0.6452);
	top: calc(var(--S) * -0.5806);
	width: calc(var(--S) * 2.2903);
	height: auto;
	pointer-events: none;
	transition: opacity var(--transition);
}

.hm-nav__arrow {
	position: relative;
	/* Same typographic treatment as the "Read more →" arrow (.hm-arrow): U+2192 / U+2190 from the Inter arrow subset. */
	font-family: var(--font-sans);
	font-size: var(--t16);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-shadow: 0 2.6px 76px #8ebaff;
}

.hm-nav__btn:disabled,
.hm-nav__btn.swiper-button-disabled {
	cursor: default;
	opacity: 0.4;
}

.hm-nav__btn:focus-visible {
	outline: none;
}

/* Individual soft glow on the active circle (no movement, scale or extra background). */
.hm-nav__btn:not(:disabled):not(.swiper-button-disabled):hover,
.hm-nav__btn:not(:disabled):not(.swiper-button-disabled):focus-visible {
	box-shadow:
		0 0 calc(12 * var(--u)) calc(1 * var(--u)) rgba(115, 166, 255, 0.5),
		0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(37, 74, 209, 0.18);
}

@media (hover: hover) {
	.hm-nav__btn:not(:disabled):hover .hm-nav__ring {
		opacity: 0.8;
	}
}

@media (min-width: 768px) {
	.hm-nav {
		--S: calc(62 * var(--d));
		gap: calc(8 * var(--d));
	}

	.hm-nav__arrow {
		font-size: var(--t20);
		text-shadow: 0 4px 118px #8ebaff;
	}
}

/* =====================================================================
 * Best Sellers
 * =================================================================== */
.hm-best__stage {
	margin-top: calc(24 * var(--u));
}

.hm-best__media {
	display: none; /* the lifestyle image is part of the desktop composition only */
}

.hm-best__slider {
	margin: calc(-30 * var(--u)) calc(-1 * var(--pad)) 0 calc(-70 * var(--u));
	padding: calc(30 * var(--u)) var(--pad) calc(30 * var(--u)) calc(70 * var(--u));
}

.hm-best__slider .swiper-wrapper {
	box-sizing: border-box;
}

/* No overflow:hidden (it cut the card glows into a visible rectangle). The box has extra
   transparent left padding (cancelled by a negative margin, so the cards do not move) and
   is clipped with clip-path, which leaves room above/below/left for the card shadows.
   Slides that have left the Swiper viewport are faded out so they never show in that room. */
.hm-best__slider {
	overflow: visible;
	clip-path: inset(-170px 0 -170px 0);
}

.hm-best__slider.swiper-initialized .swiper-slide,
.hm-jr__slider.swiper-initialized .swiper-slide {
	transition: opacity 0.25s ease;
}

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

.hm-best__slider .swiper-slide {
	box-sizing: border-box;
	width: calc(213 * var(--u));
	height: auto;
	margin-right: calc(12 * var(--u));
}

.hm-best__foot {
	display: flex;
	align-items: flex-start;
	gap: calc(41.6 * var(--u));
	margin-top: calc(-6 * var(--u));
}

.hm-best__text {
	width: calc(224 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t14);
	line-height: 1.21;
	opacity: var(--opacity-secondary);
}

@media (min-width: 768px) {
	.hm-best__stage {
		display: grid;
		grid-template-columns: calc(601 * var(--d)) minmax(0, 1fr);
		column-gap: calc(20 * var(--d));
		margin-top: calc(40 * var(--d));
	}

	.hm-best__media {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: calc(601 * var(--d));
		height: calc(455 * var(--d));
		margin: 0;
		border-radius: calc(16 * var(--d));
		overflow: hidden;
		background: var(--color-bg);
	}

	.hm-best__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hm-best__slider {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		margin: calc(-60 * var(--d)) calc(-1 * var(--pad)) 0 calc(-130 * var(--d));
		padding: calc(60 * var(--d)) var(--pad) calc(60 * var(--d)) calc(130 * var(--d));
	}

	.hm-best__slider .swiper-slide {
		width: calc(302 * var(--d));
		margin-right: calc(20 * var(--d));
	}

	.hm-best__foot {
		grid-column: 2;
		grid-row: 2;
		gap: calc(105 * var(--d));
		margin: calc(-39 * var(--d)) 0 0; /* cancels the slider padding; text sits 21 below the cards */
		padding-left: calc(85 * var(--d));
	}

	.hm-best__foot .hm-nav {
		margin-top: calc(15 * var(--d));
	}

	.hm-best__text {
		order: 2;
		width: calc(330 * var(--d));
		margin-top: 0;
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-best__foot .hm-nav {
		order: 1;
	}
}

/* =====================================================================
 * Independent laboratory testing
 * =================================================================== */
.hm-lab__card {
	position: relative;
	padding: calc(36 * var(--u)) calc(24 * var(--u)) calc(36 * var(--u));
	border-radius: calc(24 * var(--u));
	background: linear-gradient(to bottom, rgba(231, 240, 255, 0), var(--color-surface-3) 50%, rgba(231, 240, 255, 0));
	overflow: hidden;
	color: var(--hm-ink);
}

.hm-lab__title {
	max-width: calc(284 * var(--u));
	color: var(--hm-ink);
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
	font-size: max(34px, calc(48 * var(--ms)));
}

.hm-lab__lead {
	max-width: calc(246 * var(--u));
	margin-top: calc(16 * var(--u));
	order: 2;
	font-size: var(--t16);
	line-height: 1.21;
	opacity: var(--opacity-secondary);
}

.hm-lab__card {
	display: flex;
	flex-direction: column;
}

.hm-lab__title { order: 1; }
.hm-lab__lead { order: 2; }
.hm-lab__static { order: 3; }
.hm-lab__cta { order: 4; }

.hm-lab__marquee {
	display: none;
}

.hm-lab__static {
	display: flex;
	gap: calc(4 * var(--u));
	margin-top: calc(35 * var(--u));
}

.hm-lab__static .hm-lab__report {
	width: calc(149 * var(--u));
	height: calc(220 * var(--u));
	border: 0.5px solid var(--color-border-soft);
	border-radius: calc(8 * var(--u));
	box-shadow: var(--shadow-soft);
	object-fit: cover;
}

.hm-lab__item {
	display: block;
	border-radius: calc(8 * var(--u));
	cursor: zoom-in;
}

.hm-lab__item:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 4px;
}

.hm-lab__cta {
	--px: 20;
	--py: 12;
	align-self: center;
	margin-top: calc(24 * var(--u));
}

@media (min-width: 768px) {
	.hm-lab__card {
		display: block;
		height: calc(618 * var(--d));
		padding: 0;
		border-radius: calc(48 * var(--d));
	}

	.hm-lab__lead {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(72 * var(--d));
		max-width: calc(348 * var(--d));
		margin: 0;
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-lab__title {
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(221 * var(--d));
		max-width: calc(473 * var(--d));
		font-size: var(--t72);
		font-weight: var(--fw-regular);
		line-height: 1.1;
	}

	.hm-lab__cta {
		--px: 29.39;
		--py: 14.7;
		position: absolute;
		left: calc(72 * var(--d));
		top: calc(490 * var(--d));
		margin: 0;
	}

	.hm-lab__static {
		display: none;
	}

	.hm-lab__marquee {
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(41 * var(--d));
		display: block;
		width: calc(358 * var(--d));
		/* Clip only top/bottom (the vertical marquee window); the sides are opened by 70px so the
		   certificate shadows (60px blur) can paint. The Lab card still clips at its own edge. */
		overflow: visible;
		clip-path: inset(0 calc(-70 * var(--d)));
	}

	.hm-lab__track {
		margin-top: calc(-28.95 * var(--d));
		animation: hm-down var(--hm-lab-duration, 60s) linear infinite;
		will-change: transform;
	}

	.hm-lab__copy .hm-lab__report {
		display: block;
		width: calc(358 * var(--d));
		height: calc(528.05 * var(--d));
		margin-bottom: calc(27 * var(--d));
		border: 0.5px solid var(--color-border-soft);
		border-radius: calc(16 * var(--d));
		box-shadow: var(--shadow-soft);
		object-fit: cover;
	}
}

/* =====================================================================
 * Research journal
 * =================================================================== */
.hm-jr__head {
	display: block;
}

.hm-jr__nav,
.hm-jr__all {
	display: none;
}

.hm-jr__slider {
	margin-top: calc(24 * var(--u));
	overflow: visible;
}

.hm-jr__slider .swiper-wrapper {
	flex-direction: column;
	gap: calc(24 * var(--u));
}

.hm-jr__slide {
	width: 100%;
	height: auto;
}

.hm-jr__slide:nth-child(n + 3) {
	display: none;
}

.hm-post {
	display: flex;
	flex-direction: column;
	padding: calc(16 * var(--u));
	border-radius: calc(16 * var(--u));
	background: var(--color-bg);
	box-shadow: var(--shadow-card);
	color: var(--hm-ink);
}

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

.hm-jr__slide .hm-post {
	height: 100%; /* equal card heights when real titles/excerpts differ in length */
	box-sizing: border-box;
}

.hm-post__media {
	flex: none;
}

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

.hm-post__text {
	margin-bottom: calc(16 * var(--u));
}

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

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

.hm-post__title {
	margin-top: calc(24 * var(--u));
	max-width: calc(258 * var(--u));
	color: var(--hm-ink);
	font-size: var(--t20);
	font-weight: var(--fw-medium);
	line-height: 1.3;
	letter-spacing: var(--ls-tight);
}

.hm-post__text {
	margin-top: calc(8 * var(--u));
	max-width: calc(283 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.21;
	opacity: var(--opacity-secondary);
}

.hm-post__link {
	align-self: flex-start;
	margin-top: calc(24 * var(--u));
	color: var(--hm-ink);
	font-size: var(--t16);
	line-height: 1.21;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	opacity: var(--opacity-secondary);
}

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

.hm-jr__blog {
	display: flex;
	justify-content: center;
	margin-top: calc(24 * var(--u));
}

.hm-jr__blog .hm-btn {
	min-width: calc(197 * var(--u));
}

@media (min-width: 768px) {
	.hm-jr__head {
		display: flex;
		align-items: center;
		padding-right: calc(8 * var(--d));
	}

	.hm-jr__head .hm-h2 {
		flex: 1 1 auto;
	}

	.hm-jr__nav {
		display: flex;
		margin-right: calc(20 * var(--d));
	}

	.hm-jr__all {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: calc(5.6 * var(--d)); /* label to arrow (one Inter space at 20px) */
		min-width: calc(199 * var(--d));
		min-height: 0;
		padding: calc(8 * var(--d) - 1px) calc(24 * var(--d) - 1px);
		font-size: var(--t20);
		line-height: 1.3;
		text-decoration: none;
	}

	.hm-jr__slider {
		clip-path: inset(-170px 0 -170px 0);
		margin: calc(40 * var(--d) - 60 * var(--d)) calc(-1 * var(--pad)) 0 calc(-130 * var(--d));
		padding: calc(60 * var(--d)) var(--pad) calc(60 * var(--d)) calc(130 * var(--d));
	}

	.hm-jr__slider .swiper-wrapper {
		flex-direction: row;
		gap: 0;
	}

	.hm-jr__slide {
		width: calc(547 * var(--d));
		margin-right: calc(20 * var(--d));
		flex: none;
	}

	.hm-jr__slide:nth-child(n + 3) {
		display: block;
	}

	.hm-post {
		min-height: calc(472 * var(--d));
		padding: calc(24 * var(--d)) calc(24 * var(--d)) calc(32 * var(--d));
		border-radius: calc(16 * var(--d));
	}

	.hm-post__media {
		height: calc(279 * var(--d));
		border-radius: calc(12 * var(--d));
	}

	.hm-post__title {
		max-width: none;
		margin-top: calc(24 * var(--d));
		font-size: var(--t24);
		line-height: 1.21;
	}

	.hm-post__text {
		max-width: calc(441 * var(--d));
		margin-top: calc(8 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-post__link {
		margin-top: auto;
		font-size: var(--t20);
		line-height: 1.3;
	}

	.hm-jr__blog {
		display: none;
	}
}

/* =====================================================================
 * Stay connected
 * =================================================================== */
.hm-conn {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hm-conn__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hm-conn__title {
	max-width: calc(272 * var(--u));
	color: #000;
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

.hm-conn__title span {
	display: block;
}

.hm-conn__text {
	max-width: calc(279 * var(--u));
	margin-top: calc(25 * var(--u));
	color: var(--color-text-body);
	font-size: var(--t16);
	line-height: 1.21;
	opacity: 0.85;
}

/* Five exported tiles (they already include the white circle). One shared glow behind the group. */
.hm-social {
	position: relative;
	isolation: isolate;
	display: flex;
	gap: calc(16 * var(--u));
	margin-top: calc(35 * var(--u));
}

.hm-social::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(-14 * var(--u)) calc(-24 * var(--u));
	border-radius: var(--radius-pill);
	background: radial-gradient(closest-side, rgba(115, 166, 255, 0.7), rgba(115, 166, 255, 0));
	filter: blur(calc(10 * var(--u)));
	opacity: 0.45;
	transition: opacity 0.3s ease;
}

.hm-social__link {
	display: block;
	border-radius: 50%;
	line-height: 0;
	/* Individual glow: external shadow only, on the existing tile (no extra circle or padding). */
	transition: box-shadow 0.3s ease;
}

.hm-social__link:hover,
.hm-social__link:focus-visible {
	outline: none;
	box-shadow:
		0 0 calc(14 * var(--u)) calc(1 * var(--u)) rgba(115, 166, 255, 0.55),
		0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(37, 74, 209, 0.2);
}

.hm-social__tile {
	display: block;
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
}

.hm-conn__panel {
	position: relative;
	width: calc(100% + 2 * var(--pad));
	height: calc(290 * var(--u));
	margin: calc(40 * var(--u)) calc(-1 * var(--pad)) 0;
	border-radius: calc(10 * var(--u));
	background: var(--color-surface-1);
	overflow: hidden;
}

.hm-conn__col {
	position: absolute;
	width: calc(166.8 * var(--u));
}

.hm-conn__col--a {
	left: calc(22.58 * var(--u));
	top: calc(-16.35 * var(--u));
}

.hm-conn__col--b {
	left: calc(201.71 * var(--u));
	top: calc(16.5 * var(--u));
}

.hm-conn__post {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: calc(12.3 * var(--u));
}

.hm-conn__col--a .hm-conn__track {
	animation: hm-down 40s linear infinite;
	will-change: transform;
}

.hm-conn__col--b .hm-conn__track {
	animation: hm-up 40s linear infinite;
	will-change: transform;
}

@media (min-width: 768px) {
	.hm-conn {
		display: grid;
		grid-template-columns: calc(660 * var(--d)) calc(460 * var(--d));
		column-gap: calc(40 * var(--d));
		justify-content: center;
		align-items: center;
		text-align: left;
	}

	.hm-conn__copy {
		grid-column: 2;
		grid-row: 1;
		align-items: flex-start;
	}

	.hm-conn__panel {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: calc(461 * var(--d));
		margin: 0;
		border-radius: calc(16 * var(--d));
	}

	.hm-conn__title {
		max-width: none;
		font-size: var(--t60);
	}

	.hm-conn__text {
		max-width: calc(460 * var(--d));
		margin-top: calc(17 * var(--d));
		font-size: var(--t20);
		line-height: 1.3;
		opacity: var(--opacity-secondary);
	}

	.hm-social {
		gap: calc(16 * var(--d));
		margin-top: calc(54 * var(--d));
	}

	.hm-social::before {
		inset: calc(-14 * var(--d)) calc(-24 * var(--d));
		filter: blur(calc(10 * var(--d)));
	}

	.hm-social__link:hover,
	.hm-social__link:focus-visible {
		box-shadow:
			0 0 calc(14 * var(--d)) calc(1 * var(--d)) rgba(115, 166, 255, 0.55),
			0 calc(4 * var(--d)) calc(20 * var(--d)) rgba(37, 74, 209, 0.2);
	}

	.hm-social__tile {
		width: calc(48 * var(--d));
		height: calc(48 * var(--d));
	}

	.hm-conn__col {
		width: calc(265.3 * var(--d));
	}

	.hm-conn__col--a {
		left: calc(55 * var(--d));
		top: calc(-26 * var(--d));
	}

	.hm-conn__col--b {
		left: calc(339.88 * var(--d));
		top: calc(26.23 * var(--d));
	}

	.hm-conn__post {
		margin-bottom: calc(19.4 * var(--d));
	}
}

/* =====================================================================
 * FAQ
 * =================================================================== */
.hm-faq__title {
	color: #000;
	font-size: var(--t36);
	font-weight: var(--fw-medium);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
}

.hm-faq__cols {
	display: flex;
	flex-direction: column;
	margin-top: calc(24 * var(--u));
}

/* Mobile: one column in the approved order (1..9). */
.hm-faq__col {
	display: contents;
}

.hm-faq__item {
	order: var(--n);
	border-bottom: 1px solid var(--color-border-soft);
	margin-bottom: calc(10 * var(--u));
	padding-bottom: calc(16 * var(--u));
}

.hm-faq__item.is-last {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.hm-faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.hm-faq__btn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(16 * var(--u));
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hm-ink);
	font-size: var(--t16);
	font-weight: var(--fw-regular);
	line-height: 1.21;
	letter-spacing: var(--ls-tight);
	text-align: left;
	cursor: pointer;
}

.hm-faq__label {
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(250 * var(--u));
}

.hm-faq__icon {
	position: relative;
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
}

.hm-faq__ico {
	position: absolute;
	left: 50%;
	top: 50%;
	height: auto;
	transform: translate(-50%, -50%);
	transition: opacity var(--transition);
}

.hm-faq__ico--open {
	width: 16px;
}

.hm-faq__ico--close {
	width: 11px;
	opacity: 0;
}

.hm-faq__item.is-open .hm-faq__ico--open {
	opacity: 0;
}

.hm-faq__item.is-open .hm-faq__ico--close {
	opacity: 1;
}

.hm-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	opacity: 0;
	transition: grid-template-rows 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hm-faq__item.is-open .hm-faq__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.hm-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.hm-faq__panel-inner p {
	padding-top: calc(16 * var(--u));
	color: var(--hm-ink);
	font-size: var(--t16);
	line-height: 1.3;
	opacity: var(--opacity-secondary);
}

@media (hover: hover) {
	.hm-faq__btn:hover .hm-faq__label {
		color: var(--color-text-accent);
	}
}

.hm-faq__btn:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 4px;
	border-radius: calc(8 * var(--u));
}

@media (min-width: 768px) {
	.hm-faq__title {
		font-size: var(--t72);
		font-weight: var(--fw-regular);
		line-height: 1.1;
	}

	.hm-faq__cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: calc(20 * var(--d));
		margin-top: calc(40 * var(--d));
		/* Figma "Group 785" (453:177): ONE group-level drop shadow 0 4 / blur 118.3 / rgba(206,225,255,.5).
		   drop-shadow() takes the standard deviation (= blur / 2), and follows the white card shapes. */
		filter: drop-shadow(0 calc(4 * var(--d)) calc(59.15 * var(--d)) rgba(206, 225, 255, 0.5));
	}

	.hm-faq__col {
		display: flex;
		flex-direction: column;
		gap: calc(20 * var(--d));
	}

	.hm-faq__item {
		order: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: calc(16 * var(--d));
		background: var(--color-bg);
		transition: background-color var(--transition);
	}

	.hm-faq__item.is-open {
		background: var(--color-surface-3);
	}

	.hm-faq__btn {
		align-items: center;
		gap: calc(24 * var(--d));
		padding: calc(24 * var(--d)) calc(36 * var(--d));
		border-radius: calc(16 * var(--d));
		font-size: var(--t24);
		font-weight: var(--fw-medium);
	}

	.hm-faq__label {
		max-width: calc(408 * var(--d));
	}

	.hm-faq__icon {
		width: calc(36 * var(--d));
		height: calc(36 * var(--d));
	}

	.hm-faq__panel-inner p {
		padding: 0 calc(36 * var(--d)) calc(36 * var(--d));
		padding-top: 0;
		margin-top: calc(-0 * var(--d));
		max-width: calc(608 * var(--d));
		font-size: var(--t20);
	}

	.hm-faq__item.is-open .hm-faq__btn {
		padding-bottom: calc(24 * var(--d));
	}

	@media (hover: hover) {
		.hm-faq__item:not(.is-open) .hm-faq__btn:hover {
			background: var(--color-surface-1);
		}
	}
}

/* =====================================================================
 * Marquee keyframes (functional animation; paused off-screen by home.js)
 * =================================================================== */
@keyframes hm-down {
	from { transform: translateY(-50%); }
	to { transform: translateY(0); }
}

@keyframes hm-up {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

.is-paused .hm-lab__track,
.is-paused .hm-conn__track,
.hm-conn__col.is-paused .hm-conn__track,
.hm-lab__marquee.is-paused .hm-lab__track {
	animation-play-state: paused;
}

/* =====================================================================
 * Reduced motion: no continuous animation, instant states.
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hm-lab__track,
	.hm-conn__col .hm-conn__track {
		animation: none !important;
		transform: none;
	}

	.hm-c,
	.hm-faq__panel,
	.hm-faq__ico,
	.hm-grid,
	.hm-sci__num,
	.hm-sci__name,
	.hm-social::before,
	.hm-social__link,
	.hm-nav__btn,
	.pt-card,
	.hm-nav__ring {
		transition: none !important;
	}

	.hm-c {
		color: var(--sci-on);
	}
}

.hm-notes__cards:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: -2px;
}