/* =========================================================================
   BuyTides — Weight Management landing page
   =========================================================================

   Scoped entirely to `.wm-page`, the wrapper in
   templates/page-weight-management.html, so nothing here can leak into the
   shop, the product template, or the sitewide chrome.

   The page is built from native Gutenberg blocks. Everything below styles
   those blocks through the classNames set on them in the editor — no block
   output is hand-written, which is what keeps the page visually editable.
   ========================================================================= */

.wm-page {
	--wm-navy: #2b3754;
	--wm-navy-mid: #12406c;
	--wm-navy-deep: #08213a;
	--wm-cyan: #1fc8e3;
	--wm-cyan-soft: #61ddeb;
	--wm-cyan-bright: #6fe4f2;
	--wm-cyan-tint: #eaf9fc;
	--wm-cyan-ink: #9eedf6;
	--wm-teal: #1b7fa8;
	--wm-line: #dde7ee;
	--wm-surface: #f4f7f9;
	--wm-muted: #4b6479;
	--wm-muted-soft: #7c93a3;

	--wm-shell: 1240px;
	--wm-gutter: clamp(20px, 4vw, 48px);

	--wm-sans: "Inter", system-ui, -apple-system, sans-serif;
	--wm-display: "Outfit", "Inter", system-ui, sans-serif;

	background: #fff;
	color: var(--wm-navy);
	font-family: var(--wm-sans);
	line-height: 1.6;
}

/* No root-padding compensation here on purpose. Twenty Twenty-Five declares
   `useRootPaddingAwareAlignments`, but this page's block template gives <main>
   a plain flow layout, so it never receives the `has-global-padding` class and
   `.wp-site-blocks` resolves to `padding: 0`. Subtracting the root padding
   anyway pushed every section 50px wider than the viewport and put the page
   into horizontal scroll. The sections are already full-bleed without it. */

/* Twenty Twenty-Five hands every block a vertical block-gap margin, including
   the wrapper itself as a child of .wp-site-blocks. That outer one put a strip
   of page background between the announcement marquee and the hero video, so
   the video has to be cleared here as well as inside. */
.wp-site-blocks > .wm-page {
	margin-block: 0;
}

.wm-page > *,
.wm-page .wp-block-group,
.wm-page .wp-block-cover {
	margin-block: 0;
}

.wm-page h1,
.wm-page h2,
.wm-page h3 {
	font-family: var(--wm-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
	text-wrap: balance;
}

.wm-page p {
	margin: 0;
	text-wrap: pretty;
}

.wm-page a {
	color: var(--wm-teal);
	text-decoration: none;
}

.wm-page a:hover {
	color: var(--wm-navy);
}

.wm-page ::selection {
	background: var(--wm-cyan-bright);
	color: var(--wm-navy);
}

/* ---- Shared scaffolding ------------------------------------------------ */

.wm-page .wm-wrap {
	max-width: var(--wm-shell);
	margin-inline: auto;
	padding-inline: var(--wm-gutter);
}

.wm-page .wm-sec {
	padding-block: clamp(56px, 7vw, 104px);
}

.wm-page .wm-sec--tint {
	background: var(--wm-surface);
}

.wm-page .wm-sec--navy {
	background: var(--wm-navy);
	color: #fff;
}

.wm-page .wm-h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.1;
	margin-bottom: 12px;
}

.wm-page .wm-kick {
	font-family: var(--wm-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wm-teal);
	margin-bottom: 14px;
}

.wm-page .wm-sec--navy .wm-kick {
	color: var(--wm-cyan-ink);
}

.wm-page .wm-lede {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--wm-muted);
	max-width: 62ch;
	margin-bottom: 34px;
}

.wm-page .wm-sec--navy .wm-lede {
	color: rgba(255, 255, 255, 0.78);
}

/* Running body copy inside a column, where `.wm-lede` would open too much
   space between consecutive paragraphs. */
.wm-page .wm-body {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--wm-muted);
	max-width: 62ch;
	margin-bottom: 16px;
}

.wm-page .wm-body:last-of-type {
	margin-bottom: 30px;
}

.wm-page .wm-grid3,
.wm-page .wm-stats,
.wm-page .wm-timeline,
.wm-page .wm-scroll,
.wm-page .wm-library,
.wm-page .wm-faq {
	margin-top: 34px;
}

/* The accordion list is capped at 900px and centred, so a full-width 1240px
   heading above it sat off to the left of its own content. Matching the
   heading to the list's measure and centring it keeps the section on one axis. */
.wm-page #faq .wm-h2 {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.wm-page .wm-split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* ---- Buttons ----------------------------------------------------------- */

.wm-page .wp-block-buttons {
	gap: 14px;
	margin: 0;
}

.wm-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--wm-navy);
	color: #fff;
	font-family: var(--wm-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wm-page .wp-block-button__link:hover {
	background: var(--wm-navy-mid);
	color: #fff;
}

.wm-page .wp-block-button__link:active {
	background: var(--wm-navy-deep);
}

.wm-page .wm-btn-cy .wp-block-button__link {
	background: var(--wm-cyan-soft);
	color: var(--wm-navy);
}

.wm-page .wm-btn-cy .wp-block-button__link:hover {
	background: #3ecfe0;
	color: var(--wm-navy);
}

.wm-page .wm-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}

.wm-page .wm-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Card CTA: shorter, cyan, sits on the card's bottom edge. */
.wm-page .wm-btn-sm .wp-block-button__link {
	height: 44px;
	padding: 0 18px;
	font-size: 15px;
	background: var(--wm-cyan-soft);
	color: var(--wm-navy);
}

.wm-page .wm-btn-sm .wp-block-button__link:hover {
	background: #3ecfe0;
}

/* ---- Hero -------------------------------------------------------------- */

.wm-page .wm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding: clamp(56px, 6.5vw, 96px) 0;
	min-height: 0;
}

.wm-page .wm-hero video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Two painted layers over the footage: a left-to-right navy wash that holds
   the headline's contrast, then a cyan bloom from the lower left and upper
   right. Separate pseudo-elements because they use different blend geometry. */
.wm-page .wm-hero::before,
.wm-page .wm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.wm-page .wm-hero::before {
	background:
		radial-gradient(
			72% 76% at 50% 46%,
			rgba(6, 26, 45, 0.58) 0%,
			rgba(6, 26, 45, 0.4) 55%,
			rgba(6, 26, 45, 0.18) 100%
		),
		linear-gradient(
			180deg,
			rgba(6, 26, 45, 0.3) 0%,
			rgba(6, 26, 45, 0.12) 42%,
			rgba(6, 26, 45, 0.4) 100%
		);
}

.wm-page .wm-hero::after {
	background-image:
		radial-gradient(
			64% 82% at 2% 100%,
			rgba(31, 200, 227, 0.36) 0%,
			rgba(31, 200, 227, 0.16) 42%,
			rgba(31, 200, 227, 0) 68%
		),
		radial-gradient(
			64% 82% at 98% 100%,
			rgba(111, 228, 242, 0.3) 0%,
			rgba(31, 200, 227, 0.12) 44%,
			rgba(31, 200, 227, 0) 70%
		);
}

.wm-page .wm-hero > .wp-block-cover__background {
	display: none;
}

.wm-page .wm-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
}

.wm-page .wm-hero__body {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.wm-page .wm-hero__cta {
	justify-content: center;
}

.wm-page .wm-hero .wm-kick {
	color: var(--wm-cyan-ink);
}

/* Rank Math breadcrumb, sitting where the eyebrow used to. It inherits the
   eyebrow's role, so it takes the eyebrow's type: Outfit, small, wide-tracked,
   in the on-navy accent tint. The trail is the last element before the H1, so
   its bottom margin is what sets the gap to the headline. */
.wm-page .wm-hero .rank-math-breadcrumb {
	margin: 0 0 16px;
}

.wm-page .wm-hero .rank-math-breadcrumb p {
	margin: 0;
	font-family: var(--wm-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wm-cyan-ink);
	line-height: 1.5;
}

.wm-page .wm-hero .rank-math-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

.wm-page .wm-hero .rank-math-breadcrumb a:hover {
	color: #fff;
}

/* Rank Math marks every UNLINKED crumb `.last`, not just the final one, so
   Health Programs and the page title arrive with the same class. Only the true
   final crumb should read as the current page; the rest sit back with the
   links. */
.wm-page .wm-hero .rank-math-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.42);
	margin: 0 2px;
}

.wm-page .wm-hero .rank-math-breadcrumb .last {
	color: rgba(255, 255, 255, 0.72);
}

.wm-page .wm-hero .rank-math-breadcrumb .last:last-child {
	color: var(--wm-cyan-ink);
}
.wm-page .wm-hero__h1 {
	text-shadow: 0 2px 18px rgba(6, 26, 45, 0.45);
	margin: 0 0 20px;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.05;
	color: #fff;
}

.wm-page .wm-hero__lede {
	text-shadow: 0 1px 12px rgba(6, 26, 45, 0.5);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: 34px;
}

/* ---- Placeholder art ---------------------------------------------------

   No product photography exists yet. Rather than ship empty frames, each
   image slot renders an on-palette tide gradient with the subject named in
   it, composed at the final image's aspect. Swapping in a real core/image
   block later is a per-card change, not a rebuild.
   ------------------------------------------------------------------------ */

.wm-page .wm-ph {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 12% 108%, rgba(31, 200, 227, 0.42) 0%, rgba(31, 200, 227, 0) 62%),
		radial-gradient(90% 90% at 96% -8%, rgba(111, 228, 242, 0.3) 0%, rgba(31, 200, 227, 0) 60%),
		linear-gradient(158deg, #123a60 0%, var(--wm-navy) 52%, var(--wm-navy-deep) 100%);
}

/* A single hairline arc, echoing the tide-gauge mark, so the placeholder
   reads as deliberate art rather than a flat swatch. */
.wm-page .wm-ph::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -46%;
	width: 128%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 1px solid rgba(158, 237, 246, 0.28);
	pointer-events: none;
}

.wm-page .wm-ph__label {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 16px 18px;
	font-family: var(--wm-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(234, 249, 252, 0.72);
}

/* ---- Real product photography -----------------------------------------
   A card whose media slot has a real photo swaps .wm-ph for .wm-media-photo
   plus a per-product class carrying the image URL. Same box, same tag pill
   position, no gradient and no arc.
   ------------------------------------------------------------------------ */

.wm-page .wm-media-photo.wm-card__media {
	position: relative;
	overflow: hidden;
	/* Square media and a hard-right crop, matching the shop cards: the vial
	   sits far right in every product render, so a right-edge crop of the 3:2
	   source is what lands it near the centre. See shop.css. */
	height: auto;
	aspect-ratio: 1 / 1;
	background-color: #eef1f4;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: cover;
}

.wm-page .wm-media-sema {
	background-image: url("/wp-content/uploads/2026/08/Semaglutide.jpg");
}

.wm-page .wm-media-tirz {
	background-image: url("/wp-content/uploads/2026/08/Tirzepatide.jpg");
}

.wm-page .wm-media-reta {
	background-image: url("/wp-content/uploads/2026/08/GLP-3-Reta.jpg");
}

.wm-page .wm-media-cagri {
	background-image: url("/wp-content/uploads/2026/08/CAGRILINTIDE.jpg");
}

.wm-page .wm-media-tesa {
	background-image: url("/wp-content/uploads/2026/08/tesamorelin.jpg");
}

.wm-page .wm-media-aod {
	background-image: url("/wp-content/uploads/2026/08/AOD-Label.jpg");
}

/* ---- Product cards ----------------------------------------------------- */

.wm-page .wm-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.wm-page .wm-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--wm-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wm-page .wm-card:hover {
	border-color: var(--wm-cyan-soft);
	box-shadow: 0 10px 30px -18px rgba(43, 55, 84, 0.35);
}

.wm-page .wm-card__media {
	height: 210px;
	border-bottom: 1.5px solid var(--wm-line);
}

.wm-page .wm-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--wm-cyan-soft);
	color: var(--wm-navy);
	font-family: var(--wm-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Alternating tag treatment keeps a six-card grid from reading as one flat
   repeat, and marks the navy cards as the multi-receptor compounds. */
.wm-page .wm-card--alt .wm-card__tag {
	background: var(--wm-navy);
	color: #fff;
}

.wm-page .wm-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.wm-page .wm-card__body h3 {
	font-size: 21px;
	line-height: 1.2;
}

.wm-page .wm-card__blurb {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wm-muted);
	flex: 1;
}

.wm-page .wm-card__body .wp-block-buttons {
	margin-top: 6px;
}

/* ---- Mechanism steps --------------------------------------------------- */

.wm-page .wm-steps {
	display: grid;
	gap: 16px;
}

.wm-page .wm-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 22px;
	border: 1.5px solid var(--wm-line);
	border-radius: 14px;
	background: #fff;
}

.wm-page .wm-step__num {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--wm-cyan-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wm-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--wm-teal);
}

.wm-page .wm-step h3 {
	grid-column: 2;
	font-size: 17.5px;
	margin-bottom: 5px;
}

.wm-page .wm-step__body {
	grid-column: 2;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wm-muted);
}

/* ---- Evidence figures --------------------------------------------------

   Deliberately not cards. These are three published figures, and a hairline
   rule between them carries the separation without implying each is its own
   raised object.
   ------------------------------------------------------------------------ */

.wm-page .wm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0;
	border-top: 1.5px solid var(--wm-line);
}

.wm-page .wm-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 34px 32px 34px 0;
}

.wm-page .wm-stat + .wm-stat {
	padding-left: 32px;
	border-left: 1.5px solid var(--wm-line);
}

.wm-page .wm-stat__fig {
	font-family: var(--wm-display);
	font-size: clamp(38px, 4.4vw, 52px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wm-navy);
	font-variant-numeric: tabular-nums;
}

.wm-page .wm-stat__label {
	font-family: var(--wm-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--wm-teal);
}

.wm-page .wm-stat__note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wm-muted);
}

.wm-page .wm-fine {
	margin-top: 24px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wm-muted-soft);
	max-width: 820px;
}

/* ---- Reference calculator ---------------------------------------------- */

.wm-page .wm-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.22);
	outline: none;
	margin: 0;
}

.wm-page .wm-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wm-cyan-soft);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(43, 55, 84, 0.3);
	cursor: pointer;
}

.wm-page .wm-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wm-cyan-soft);
	border: 3px solid #fff;
	cursor: pointer;
}

.wm-page .wm-slider:focus-visible {
	outline: 2px solid var(--wm-cyan-bright);
	outline-offset: 6px;
}

.wm-page .wm-slider-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wm-cyan-ink);
	margin-bottom: 12px;
}

.wm-page .wm-slider-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

.wm-page .wm-calc-out {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.wm-page .wm-calc-panel {
	padding: 26px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

.wm-page .wm-calc-panel--cy {
	background: var(--wm-cyan-soft);
	border-color: transparent;
	color: var(--wm-navy);
}

.wm-page .wm-calc-panel__label {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 8px;
}

.wm-page .wm-calc-panel--cy .wm-calc-panel__label {
	color: var(--wm-navy-mid);
	font-weight: 600;
}

.wm-page .wm-calc-panel__fig {
	font-family: var(--wm-display);
	font-size: clamp(32px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.wm-page .wm-calc-panel__foot {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--wm-navy-mid);
}

/* ---- Titration timeline ------------------------------------------------ */

.wm-page .wm-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.wm-page .wm-tl {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wm-page .wm-tl__media {
	height: 150px;
	border-radius: 14px;
}

/* The rule above each stage lengthens across the row, so the five columns read
   as one progression rather than five unrelated items. It is drawn on the
   heading rather than as its own element, so the editor holds no empty block. */
.wm-page .wm-tl h3 {
	font-size: 18px;
}

.wm-page .wm-tl h3::before {
	content: "";
	display: block;
	width: var(--wm-tl-bar, 100%);
	height: 3px;
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--wm-cyan-soft);
}

.wm-page .wm-tl--1 { --wm-tl-bar: 20%; }
.wm-page .wm-tl--2 { --wm-tl-bar: 40%; }
.wm-page .wm-tl--3 { --wm-tl-bar: 60%; }
.wm-page .wm-tl--4 { --wm-tl-bar: 80%; }
.wm-page .wm-tl--5 { --wm-tl-bar: 100%; }

.wm-page .wm-tl__body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wm-muted);
}

/* ---- Comparison table -------------------------------------------------- */

.wm-page .wm-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	background: #fff;
	border: 1.5px solid var(--wm-line);
	border-radius: 16px;
}

.wm-page .wm-tbl {
	margin: 0;
}

.wm-page .wm-tbl table {
	width: 100%;
	border-collapse: collapse;
}

.wm-page .wm-tbl th,
.wm-page .wm-tbl td {
	padding: 16px 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--wm-line);
	font-size: 14.5px;
	line-height: 1.5;
	vertical-align: top;
	color: #22384d;
}

.wm-page .wm-tbl tbody tr:last-child th,
.wm-page .wm-tbl tbody tr:last-child td {
	border-bottom: 0;
}

.wm-page .wm-tbl th {
	font-family: var(--wm-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wm-muted-soft);
	white-space: nowrap;
}

/* Column heads name compounds, so they keep sentence case at reading size. */
.wm-page .wm-tbl thead th {
	min-width: 180px;
	font-size: 16px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--wm-navy);
}

.wm-page .wm-tbl thead th:first-child {
	min-width: 150px;
}

.wm-page .wm-tbl-note {
	margin-top: 18px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wm-muted-soft);
	max-width: 820px;
}

/* ---- Library ----------------------------------------------------------

   An asymmetric pair rather than three equal cards: the lead article runs
   wide with its art beside the copy, the two follow-ups stack beside it.
   ------------------------------------------------------------------------ */

.wm-page .wm-library {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 20px;
	align-items: start;
}

.wm-page .wm-art {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--wm-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wm-page .wm-art:hover {
	border-color: var(--wm-cyan-soft);
	box-shadow: 0 10px 30px -18px rgba(43, 55, 84, 0.35);
}

.wm-page .wm-art__media {
	height: 240px;
	border-bottom: 1.5px solid var(--wm-line);
}

.wm-page .wm-art__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 24px;
}

.wm-page .wm-art__cat {
	font-family: var(--wm-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wm-muted-soft);
}

.wm-page .wm-art__body h3 {
	font-size: 19px;
	line-height: 1.25;
}

.wm-page .wm-art--lead .wm-art__body h3 {
	font-size: 26px;
}

.wm-page .wm-art__dek {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wm-muted);
}

.wm-page .wm-art__more {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wm-teal);
}

.wm-page .wm-library__rest {
	display: grid;
	gap: 20px;
}

/* The stacked pair drops its art and runs as text rows, so the lead keeps
   the only image weight in the section. */
.wm-page .wm-library__rest .wm-art__media {
	height: 120px;
}

/* ---- FAQ --------------------------------------------------------------- */

/* The accordion list is capped at 900px and centred, so a full-width 1240px
   heading above it sat off to the left of its own content. Matching the
   heading to the list's measure and centring it keeps the section on one axis. */
.wm-page #faq .wm-h2 {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}
.wm-page .wm-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 900px;
	margin-inline: auto;
}

.wm-page .wm-faq .wp-block-details {
	border: 1.5px solid var(--wm-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.wm-page .wm-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wm-display);
	font-size: 17.5px;
	font-weight: 600;
	color: var(--wm-navy);
}

.wm-page .wm-faq summary::-webkit-details-marker {
	display: none;
}

.wm-page .wm-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wm-cyan-tint)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B7FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E")
		center / 14px no-repeat;
	transition: transform 0.18s ease;
}

.wm-page .wm-faq details[open] summary::after {
	transform: rotate(180deg);
}

.wm-page .wm-faq summary:focus-visible {
	outline: 2px solid var(--wm-teal);
	outline-offset: -3px;
}

.wm-page .wm-faq .wp-block-details > :not(summary) {
	padding: 0 22px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wm-muted);
	margin: 0;
}

/* ---- Responsive --------------------------------------------------------

   Every multi-column layout above collapses here. The hero keeps its
   single-column body at all widths, so it needs no rule.
   ------------------------------------------------------------------------ */

/* Fixed-track step-down. The card and timeline grids above are locked to 3 and
   5 tracks so their rows read as intended at desktop; that lock has to be
   released deliberately as the viewport narrows, since fixed tracks cannot
   reflow on their own the way auto-fill did. (wm-grid3 step-down) */
@media (max-width: 1080px) {
	.wm-page .wm-timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.wm-page .wm-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.wm-page .wm-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.wm-page .wm-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Below this the timeline copy would run at about ten characters a line in two
   tracks, so it stacks rather than squeeze. */
@media (max-width: 520px) {
	.wm-page .wm-timeline {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 980px) {
	.wm-page .wm-library {
		grid-template-columns: 1fr;
	}

	.wm-page .wm-library__rest {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 860px) {
	.wm-page .wm-split {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.wm-page .wm-stat,
	.wm-page .wm-stat + .wm-stat {
		padding: 26px 0;
		border-left: 0;
	}

	.wm-page .wm-stat + .wm-stat {
		border-top: 1.5px solid var(--wm-line);
	}
}

@media (max-width: 560px) {
	.wm-page .wm-calc-out {
		grid-template-columns: 1fr;
	}

	.wm-page .wm-hero__h1 {
		font-size: clamp(30px, 8vw, 38px);
		max-width: none;
	}
}

/* The hero video plays on every device, including where the OS asks for
   reduced motion: the footage is ambient, muted and loops silently, and the
   brand wants it seen. This gradient is painted underneath it permanently, so
   a browser that refuses to decode or autoplay the file still shows the hero
   as designed rather than an empty band. */
.wm-page .wm-hero {
	background: linear-gradient(158deg, #123a60 0%, var(--wm-navy) 55%, var(--wm-navy-deep) 100%);
}

/* ---- BMI calculator ----------------------------------------------------- */

/* Two columns on the same grid as .wm-split: the form reads on the left, the
   result panel on the right.

   The controls are the site's own field, the one /register/ and the checkout
   share: a 13px semibold label above a 54px box with a 12px radius and a cyan
   focus ring. Written out here rather than shared, because that spec lives in
   buytides-checkout.css behind the `body.bt-checkout-bare` selectors it needs
   to outrank WooCommerce, and none of that applies on a block page. */

.wm-page .wm-bmi__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 440px;
	margin-top: 30px;
}

.wm-page .wm-bmi__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.wm-page .wm-bmi__label {
	display: block;
	margin: 0 0 7px;
	font-family: var(--wm-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #22384d;
}

.wm-page .wm-bmi__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--wm-line);
	border-radius: 12px;
	background-color: #fff;
	font-family: var(--wm-sans);
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--wm-navy);
	box-shadow: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wm-page .wm-bmi__control:hover {
	border-color: #a9cfe2;
}

.wm-page .wm-bmi__control:focus {
	border-color: var(--wm-cyan-soft);
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.22);
	outline: none;
}

.wm-page .wm-bmi__control::placeholder {
	color: #a8bcc7;
	opacity: 1;
	transition: color 0.15s ease, opacity 0.15s ease;
}

/* The placeholder clears as the field takes focus, the same way it does at
   checkout, so the caret never sits behind example text. */
.wm-page .wm-bmi__control:focus::placeholder {
	color: transparent;
	opacity: 0;
}

/* Spinners would crowd a 2-up field at this width and add nothing on mobile,
   where the numeric keypad is the input method. */
.wm-page .wm-bmi__control::-webkit-outer-spin-button,
.wm-page .wm-bmi__control::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wm-page .wm-bmi__control[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.wm-page .wm-bmi__error {
	font-size: 14px;
	color: #b3261e;
}

.wm-page .wm-bmi__error[hidden] {
	display: none;
}

.wm-page .wm-bmi__go {
	align-self: flex-start;
	min-width: 190px;
	height: 50px;
	margin-top: 6px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--wm-cyan-soft);
	color: var(--wm-navy);
	font-family: var(--wm-display);
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wm-page .wm-bmi__go:hover {
	background: #3fcedd;
}

.wm-page .wm-bmi__go:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(97, 221, 235, 0.38);
}

/* ---- BMI result panel --------------------------------------------------- */

/* A horizontal band scale rather than a dial: the four categories are not
   equal widths, and laid out left to right their real proportions are legible
   at a glance — obesity is the open-ended half of the chart. It also survives
   a phone screen, where a dial has to shrink to about a thumbnail. */

.wm-page .wm-bmi-result {
	padding: clamp(24px, 3vw, 36px);
	border-radius: 24px;
	background: var(--wm-navy);
	color: #fff;
}

.wm-page .wm-bmi-result__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.wm-page .wm-bmi-result__label {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wm-cyan-ink);
	margin-bottom: 6px;
}

.wm-page .wm-bmi-result__fig {
	font-family: var(--wm-display);
	font-size: clamp(54px, 7vw, 76px);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
}

.wm-page .wm-bmi-result__chip {
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--wm-cyan-soft);
	color: var(--wm-navy);
	font-family: var(--wm-display);
	font-size: 14.5px;
	font-weight: 600;
}

.wm-page .wm-bmi-result__chip[hidden] {
	display: none;
}

.wm-page .wm-bmi-scale {
	position: relative;
	margin-top: 46px;
}

.wm-page .wm-bmi-scale__track {
	display: flex;
	gap: 4px;
	height: 14px;
}

.wm-page .wm-bmi-scale__seg {
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.14);
	transition: background 0.35s ease;
}

.wm-page .wm-bmi-scale__seg.is-on {
	background: var(--wm-cyan-soft);
}

/* The marker sits above the bar on its own row, so it never covers the band it
   is pointing at. Its stem is the ::after, drawn down into the track. */
.wm-page .wm-bmi-scale__marker {
	position: absolute;
	bottom: calc(100% + 16px);
	transform: translateX(-50%);
	transition: left 0.45s ease;
}

.wm-page .wm-bmi-scale__marker[hidden] {
	display: none;
}

.wm-page .wm-bmi-scale__marker::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
}

.wm-page .wm-bmi-scale__marker::after {
	content: "";
	position: absolute;
	top: 13px;
	left: 50%;
	width: 2px;
	height: 17px;
	margin-left: -1px;
	background: rgba(255, 255, 255, 0.45);
}

/* Ticks are positioned at their own value on the scale, not spaced evenly, so
   they line up with the joins between the bands. */
.wm-page .wm-bmi-scale__ticks {
	position: relative;
	height: 18px;
	margin-top: 10px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
	font-variant-numeric: tabular-nums;
}

.wm-page .wm-bmi-scale__ticks span {
	position: absolute;
	transform: translateX(-50%);
}

/* The end labels would hang off the panel, so they align to their own edge. */
.wm-page .wm-bmi-scale__ticks span:first-child {
	transform: none;
}

.wm-page .wm-bmi-scale__ticks span:last-child {
	transform: translateX(-100%);
}

.wm-page .wm-bmi-bands {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
}

.wm-page .wm-bmi-bands__item {
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.wm-page .wm-bmi-bands__name {
	display: block;
	font-family: var(--wm-display);
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
}

.wm-page .wm-bmi-bands__range {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	font-variant-numeric: tabular-nums;
}

.wm-page .wm-bmi-bands__item.is-on {
	border-color: var(--wm-cyan-soft);
	background: rgba(97, 221, 235, 0.12);
}

.wm-page .wm-bmi-bands__item.is-on .wm-bmi-bands__name {
	color: var(--wm-cyan-soft);
}

/* Only dim the other bands once a result exists; before that all four are
   equally relevant and dimming three would read as a disabled control. */
.wm-page .wm-bmi-result.has-result .wm-bmi-bands__item:not(.is-on) .wm-bmi-bands__name {
	color: rgba(255, 255, 255, 0.5);
}

.wm-page .wm-bmi-advice {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.wm-page .wm-bmi-advice[hidden] {
	display: none;
}

@media (max-width: 860px) {
	.wm-page .wm-bmi__form {
		max-width: none;
	}

	.wm-page .wm-bmi__go {
		align-self: stretch;
	}
}

@media (max-width: 420px) {
	.wm-page .wm-bmi-bands {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wm-page .wm-bmi-scale__seg,
	.wm-page .wm-bmi-scale__marker,
	.wm-page .wm-bmi-bands__item,
	.wm-page .wm-bmi__control,
	.wm-page .wm-bmi__go {
		transition: none;
	}
}

/* ---- Compound rail -----------------------------------------------------

   The compound grid in #treatments scrolls horizontally instead of wrapping.
   The track bleeds past the right edge of .wm-wrap to the viewport edge, so the
   next card is visibly cut off and the row reads as a rail rather than a grid
   that ran out of room. Scoped to #treatments: .wm-grid3 is a shared layout
   class and the other grids on the page still stack normally.
   ------------------------------------------------------------------------ */

.wm-page #treatments .wm-grid3 {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	/* No scroll-snap here on purpose: the track is bled out to both viewport
	   edges, and scroll-padding percentages resolve against the scrollport
	   rather than the wrap, so snapping would pull the cards flush to the
	   window edge instead of the text column. The arrow step is one card, so
	   the rail stays aligned to .wm-wrap without it. */
	/* Negative gutters out to both viewport edges, with the same distance added
	   back as padding so the cards still start and end flush with .wm-wrap while
	   the track itself runs the full width of the window. Without the left side
	   the cards would vanish at the wrap edge instead of sliding off the page.
	   scroll-padding keeps snapping aligned to the wrap, not to the bleed. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	/* Room for the card hover shadow, which would otherwise be clipped. */
	padding-bottom: 14px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wm-page #treatments .wm-grid3::-webkit-scrollbar {
	display: none;
}

.wm-page #treatments .wm-card {
	flex: 0 0 340px;
}

/* ---- Rail controls ---------------------------------------------------- */

.wm-rail-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}

.wm-rail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--wm-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wm-navy);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.wm-rail-btn:hover:not([disabled]) {
	border-color: var(--wm-cyan-soft);
	background: var(--wm-cyan-soft);
}

.wm-rail-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.wm-rail-btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.wm-rail-track {
	position: relative;
	flex: 0 1 260px;
	height: 2px;
	border-radius: 999px;
	background: var(--wm-line);
	overflow: hidden;
}

.wm-rail-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--wm-navy);
	transition: transform 0.15s ease, width 0.15s ease;
	will-change: transform;
}

@media (max-width: 680px) {
	.wm-page #treatments .wm-card {
		flex-basis: min(78vw, 320px);
	}

	.wm-rail-track {
		flex-basis: 160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wm-page #treatments .wm-grid3 {
		scroll-behavior: auto;
	}

	.wm-rail-fill {
		transition: none;
	}
}