/* =========================================================================
 * Platform — block 2, “Five Functions. One Platform.”
 *
 * A horizontal chain of five stages: a number, a name, a node on the rail and a
 * list of items with line icons; chevrons stand between the stages. The
 * featured stage (the third one by default) shows a card with the Artemis mark,
 * its name, a caption and the same items. Below the chain: a divider, the row
 * of protection surfaces and the LISA line.
 *
 * The section is one screen tall and is fitted by the page engine: every size
 * is max(floor, calc(base * var(--ms-scale,1))), so nothing collapses when the
 * scale drops. The decoration lives inside .lmx-pa-bg with its own overflow, so
 * it never reaches the section's scrollHeight and never drags the fitting down.
 *
 * Motion: only transform and opacity — the rings breathe, a highlight runs
 * along the rail from left to right and the featured node pulses. Everything is
 * paused while the block is off screen (the is-inview class from
 * assets/js/platform/block2-architecture.js) and the stages and tags appear
 * once on entry (is-in). With prefers-reduced-motion everything is static in
 * its final state.
 * ====================================================================== */

.lmx-pa-inner {
	--pa-accent: #52C7C6;
	--pa-accent-soft: rgba(82, 199, 198, .45);
	--pa-line: rgba(255, 255, 255, .14);
	--pa-text: rgba(255, 255, 255, .88);
	--pa-muted: rgba(255, 255, 255, .55);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	padding: max(28px, calc(56px * var(--ms-scale, 1))) var(--lmx-section-padding-x) max(24px, calc(44px * var(--ms-scale, 1)));
	box-sizing: border-box;
	background: #050708;
	color: var(--pa-text);
	font-family: var(--lmx-ms-font);
	overflow: hidden;
}

/* --- background: rings behind the middle stage plus a soft glow ----------- */
.lmx-pa-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(42% 38% at 50% 34%, rgba(82, 199, 198, .10), transparent 70%),
		radial-gradient(60% 50% at 50% 0%, rgba(82, 199, 198, .05), transparent 70%);
}

.lmx-pa-ring {
	position: absolute;
	left: 50%;
	top: 38%;
	width: calc(var(--r) * max(120px, calc(230px * var(--ms-scale, 1))));
	aspect-ratio: 1;
	margin: 0;
	border: 1px solid rgba(82, 199, 198, .17);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: lmx-pa-breathe 11s ease-in-out infinite;
	animation-delay: calc(var(--r) * -1.4s);
}

.lmx-pa-ring--dash {
	border-style: dashed;
	border-color: rgba(82, 199, 198, .14);
}

@keyframes lmx-pa-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; }
	50%      { transform: translate(-50%, -50%) scale(1.035); opacity: .95; }
}

/* --- heading -------------------------------------------------------------- */
.lmx-pa-head {
	position: relative;
	z-index: 1;
	margin-bottom: max(22px, calc(54px * var(--ms-scale, 1)));
}

.lmx-pa-inner .lmx-pa-eyebrow {
	display: flex;
	align-items: center;
	gap: max(8px, calc(14px * var(--ms-scale, 1)));
	margin: 0 0 max(10px, calc(20px * var(--ms-scale, 1))) !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(11px, calc(13px * var(--ms-scale, 1))) !important;
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--pa-text) !important;
}

.lmx-pa-inner .lmx-pa-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 2px;
	height: max(12px, calc(18px * var(--ms-scale, 1)));
	background: var(--pa-accent);
}

.lmx-pa-inner .lmx-pa-title {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	font-family: var(--lmx-ms-display) !important;
	font-weight: 300 !important;
	font-size: max(28px, calc(66px * var(--ms-scale, 1))) !important;
	line-height: 1.08 !important;
	letter-spacing: -.02em;
	color: #fff !important;
}

/* --- the chain of stages -------------------------------------------------- */
.lmx-pa-stages {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--pa-n, 5), minmax(0, 1fr));
	column-gap: max(14px, calc(34px * var(--ms-scale, 1)));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-inner .lmx-pa-num {
	margin: 0 0 max(4px, calc(8px * var(--ms-scale, 1))) !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(11px, calc(14px * var(--ms-scale, 1))) !important;
	font-weight: 500;
	letter-spacing: .3em;
	color: var(--pa-muted) !important;
}

.lmx-pa-inner .lmx-pa-name {
	margin: 0 !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(13px, calc(19px * var(--ms-scale, 1))) !important;
	font-weight: 600 !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff !important;
	text-align: center;
}

.lmx-pa-stage--featured .lmx-pa-num,
.lmx-pa-stage--featured .lmx-pa-name {
	color: var(--pa-accent) !important;
}

/* --- the rail: line, node, chevron --------------------------------------- */
.lmx-pa-rail {
	position: relative;
	width: 100%;
	height: max(26px, calc(40px * var(--ms-scale, 1)));
	margin-top: max(10px, calc(16px * var(--ms-scale, 1)));
}

.lmx-pa-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(82, 199, 198, .25), rgba(82, 199, 198, .6), rgba(82, 199, 198, .25));
}

/* The highlight running from left to right: every stage starts its own pass a
   little later, so the light travels along the whole chain. */
.lmx-pa-line::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
	transform: translateX(-140%);
	animation: lmx-pa-beam 5s linear infinite;
	animation-delay: calc(var(--i, 0) * .62s);
}

@keyframes lmx-pa-beam {
	0%   { transform: translateX(-140%); }
	40%  { transform: translateX(240%); }
	100% { transform: translateX(240%); }
}

.lmx-pa-node {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(11px, calc(15px * var(--ms-scale, 1)));
	aspect-ratio: 1;
	border: 1px solid var(--pa-accent);
	border-radius: 50%;
	background: #050708;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 12px rgba(82, 199, 198, .5);
}

.lmx-pa-stage--featured .lmx-pa-node {
	width: max(15px, calc(21px * var(--ms-scale, 1)));
	border-width: 2px;
	background: var(--pa-accent);
	box-shadow: 0 0 0 max(4px, calc(6px * var(--ms-scale, 1))) rgba(82, 199, 198, .14), 0 0 26px rgba(82, 199, 198, .75);
	animation: lmx-pa-pulse 2.6s ease-in-out infinite;
}

@keyframes lmx-pa-pulse {
	0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.lmx-pa-chevron {
	position: absolute;
	top: 50%;
	left: calc(100% + max(7px, calc(17px * var(--ms-scale, 1))));
	width: max(14px, calc(20px * var(--ms-scale, 1)));
	height: max(14px, calc(20px * var(--ms-scale, 1)));
	color: var(--pa-accent);
	transform: translate(-50%, -50%);
}

.lmx-pa-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- the item list of a stage -------------------------------------------- */
.lmx-pa-items {
	display: flex;
	flex-direction: column;
	gap: max(7px, calc(14px * var(--ms-scale, 1)));
	width: fit-content;
	max-width: 100%;
	margin: max(10px, calc(20px * var(--ms-scale, 1))) 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-item {
	display: flex;
	align-items: center;
	gap: max(8px, calc(14px * var(--ms-scale, 1)));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-item-ico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: max(16px, calc(22px * var(--ms-scale, 1)));
	height: max(16px, calc(22px * var(--ms-scale, 1)));
	color: var(--pa-muted);
}

.lmx-pa-item-ico .lmx-pa-ico {
	width: 100%;
	height: 100%;
}

.lmx-pa-item-label {
	font-size: max(12px, calc(16px * var(--ms-scale, 1)));
	line-height: 1.25;
	color: var(--pa-text);
}

/* --- the card of the featured stage -------------------------------------- */
.lmx-pa-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: max(6px, calc(10px * var(--ms-scale, 1)));
	max-width: max(210px, calc(300px * var(--ms-scale, 1)));
	padding: max(14px, calc(26px * var(--ms-scale, 1))) max(12px, calc(22px * var(--ms-scale, 1))) max(14px, calc(24px * var(--ms-scale, 1)));
	border: 1px solid var(--pa-accent-soft);
	border-radius: max(10px, calc(16px * var(--ms-scale, 1)));
	background: linear-gradient(180deg, rgba(82, 199, 198, .07), rgba(82, 199, 198, .02));
	box-shadow: 0 0 30px rgba(82, 199, 198, .12), inset 0 0 24px rgba(82, 199, 198, .06);
	box-sizing: border-box;
}

.lmx-pa-card-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(26px, calc(42px * var(--ms-scale, 1)));
	height: max(26px, calc(42px * var(--ms-scale, 1)));
	margin-bottom: max(8px, calc(14px * var(--ms-scale, 1)));
	color: var(--pa-accent);
}

.lmx-pa-card-mark .lmx-pa-mark,
.lmx-pa-inner .lmx-pa-card-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lmx-pa-inner .lmx-pa-card-title {
	margin: 0 !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(13px, calc(19px * var(--ms-scale, 1))) !important;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pa-accent) !important;
	text-align: center;
}

.lmx-pa-inner .lmx-pa-card-sub {
	margin: max(4px, calc(7px * var(--ms-scale, 1))) 0 0 !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(11px, calc(12.5px * var(--ms-scale, 1))) !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pa-muted) !important;
	text-align: center;
}

.lmx-pa-card-rule {
	display: block;
	width: 100%;
	height: 1px;
	margin: max(10px, calc(18px * var(--ms-scale, 1))) 0 max(8px, calc(14px * var(--ms-scale, 1)));
	background: linear-gradient(90deg, transparent, var(--pa-line), transparent);
}

.lmx-pa-items--card .lmx-pa-item-ico {
	color: var(--pa-accent);
}

/* --- protection surfaces -------------------------------------------------- */
.lmx-pa-surfaces {
	position: relative;
	z-index: 1;
	margin-top: max(20px, calc(46px * var(--ms-scale, 1)));
	padding-top: max(16px, calc(30px * var(--ms-scale, 1)));
	border-top: 1px solid var(--pa-line);
}

.lmx-pa-inner .lmx-pa-subhead {
	display: flex;
	align-items: center;
	gap: max(10px, calc(16px * var(--ms-scale, 1)));
	margin: 0 0 max(10px, calc(18px * var(--ms-scale, 1))) !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(11px, calc(13px * var(--ms-scale, 1))) !important;
	font-weight: 600 !important;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--pa-text) !important;
}

.lmx-pa-dash {
	flex: 0 0 auto;
	width: max(18px, calc(26px * var(--ms-scale, 1)));
	height: 2px;
	background: var(--pa-accent);
}

.lmx-pa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: max(7px, calc(12px * var(--ms-scale, 1)));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-tag-wrap {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.lmx-pa-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(30px, calc(42px * var(--ms-scale, 1)));
	padding: 0 max(12px, calc(20px * var(--ms-scale, 1)));
	border: 1px solid var(--pa-line);
	border-radius: max(5px, calc(7px * var(--ms-scale, 1)));
	background: rgba(255, 255, 255, .02);
	font-size: max(11px, calc(13px * var(--ms-scale, 1)));
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pa-text);
	text-decoration: none !important;
	transition: border-color .22s ease, color .22s ease, background .22s ease;
}

.lmx-pa-tag--link:hover,
.lmx-pa-tag--link:focus-visible {
	border-color: var(--pa-accent-soft);
	background: rgba(82, 199, 198, .08);
	color: #fff;
}

.lmx-pa-tag--link:focus-visible {
	outline: 2px solid var(--pa-accent);
	outline-offset: 3px;
}

/* --- the LISA line -------------------------------------------------------- */
.lmx-pa-inner .lmx-pa-foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: max(10px, calc(20px * var(--ms-scale, 1)));
	margin: max(18px, calc(40px * var(--ms-scale, 1))) 0 0 !important;
	font-family: var(--lmx-ms-font) !important;
	font-size: max(11px, calc(12.5px * var(--ms-scale, 1))) !important;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--pa-muted) !important;
}

.lmx-pa-inner .lmx-pa-foot::before,
.lmx-pa-inner .lmx-pa-foot::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--pa-line);
}

/* --- appearance on entry -------------------------------------------------
   The stages and the tags are visible by default: without the script (or with
   reduced motion) the block is simply in its final state. The script adds
   is-armed only when it is going to play the appearance, and is-in when the
   section comes into view. */
.lmx-pa-stage,
.lmx-pa-tag-wrap {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
}

.lmx-pa-inner.is-armed .lmx-pa-stage,
.lmx-pa-inner.is-armed .lmx-pa-tag-wrap {
	opacity: 0;
	transform: translateY(10px);
}

.lmx-pa-inner.is-armed.is-in .lmx-pa-stage,
.lmx-pa-inner.is-armed.is-in .lmx-pa-tag-wrap {
	opacity: 1;
	transform: none;
}

.lmx-pa-inner.is-in .lmx-pa-stage {
	transition-delay: calc(var(--i, 0) * 90ms);
}

.lmx-pa-inner.is-in .lmx-pa-tag-wrap {
	transition-delay: calc(450ms + var(--i, 0) * 35ms);
}

/* Off screen nothing moves: the class is set by the block script. */
.lmx-pa-inner:not(.is-inview) .lmx-pa-ring,
.lmx-pa-inner:not(.is-inview) .lmx-pa-line::after,
.lmx-pa-inner:not(.is-inview) .lmx-pa-stage--featured .lmx-pa-node {
	animation-play-state: paused;
}

/* --- desktop: the section is exactly one screen -------------------------- */
@media (min-width: 1025px) {
	.lmx-pa-inner {
		min-height: calc(100vh - var(--lmx-header-h, 108px));
	}
}

/* --- short laptops -------------------------------------------------------
   At 1366×600 and 1366×650 the fitting is already at its minimum scale (0.4),
   every size has hit its floor and the section still overflowed by 56 and 31
   pixels. The rhythm is tightened here — paddings, gaps and the two largest
   sizes — so the block fits a 600px window without an inner scroller. Taller
   windows never reach these rules. */
@media (min-width: 1025px) and (max-height: 680px) {
	.lmx-pa-inner {
		padding-top: 14px;
		padding-bottom: 12px;
	}

	.lmx-pa-head {
		margin-bottom: 8px;
	}

	.lmx-pa-inner .lmx-pa-eyebrow {
		margin-bottom: 7px !important;
	}

	.lmx-pa-inner .lmx-pa-title {
		font-size: max(22px, calc(58px * var(--ms-scale, 1))) !important;
		line-height: 1.02 !important;
	}

	.lmx-pa-rail {
		height: max(20px, calc(40px * var(--ms-scale, 1)));
		margin-top: max(7px, calc(16px * var(--ms-scale, 1)));
	}

	.lmx-pa-items {
		gap: max(4px, calc(14px * var(--ms-scale, 1)));
		margin-top: max(7px, calc(20px * var(--ms-scale, 1))) !important;
	}

	.lmx-pa-item-ico {
		width: max(14px, calc(22px * var(--ms-scale, 1)));
		height: max(14px, calc(22px * var(--ms-scale, 1)));
	}

	.lmx-pa-card {
		padding: max(8px, calc(26px * var(--ms-scale, 1))) max(10px, calc(22px * var(--ms-scale, 1))) max(8px, calc(24px * var(--ms-scale, 1)));
	}

	.lmx-pa-card-mark {
		width: max(20px, calc(42px * var(--ms-scale, 1)));
		height: max(20px, calc(42px * var(--ms-scale, 1)));
		margin-bottom: max(4px, calc(14px * var(--ms-scale, 1)));
	}

	.lmx-pa-card-rule {
		margin: max(4px, calc(18px * var(--ms-scale, 1))) 0 max(3px, calc(14px * var(--ms-scale, 1)));
	}

	.lmx-pa-surfaces {
		margin-top: max(10px, calc(46px * var(--ms-scale, 1)));
		padding-top: max(8px, calc(30px * var(--ms-scale, 1)));
	}

	.lmx-pa-inner .lmx-pa-subhead {
		margin-bottom: max(7px, calc(18px * var(--ms-scale, 1))) !important;
	}

	.lmx-pa-tag {
		min-height: max(24px, calc(42px * var(--ms-scale, 1)));
	}

	.lmx-pa-inner .lmx-pa-foot {
		margin-top: max(8px, calc(40px * var(--ms-scale, 1))) !important;
	}
}

/* --- tablet and phone: the chain turns vertical -------------------------- */
@media (max-width: 1024px) {
	.lmx-pa-inner {
		min-height: 0;
		padding: 84px var(--lmx-section-padding-x) 56px;
	}

	.lmx-pa-head {
		margin-bottom: 28px;
	}

	.lmx-pa-inner .lmx-pa-title {
		font-size: clamp(30px, 7vw, 46px) !important;
	}

	.lmx-pa-stages {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}

	.lmx-pa-stage {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		align-items: start;
		column-gap: 14px;
		text-align: left;
	}

	.lmx-pa-inner .lmx-pa-num {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: 2px !important;
		font-size: 12px !important;
	}

	.lmx-pa-inner .lmx-pa-name {
		grid-column: 2;
		grid-row: 2;
		font-size: 16px !important;
		text-align: left;
	}

	/* The rail becomes vertical: the node at the top of the column, the chevron
	   under it pointing down. */
	.lmx-pa-rail {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: 34px;
		height: 100%;
		min-height: 64px;
		margin-top: 0;
	}

	.lmx-pa-line {
		left: 50%;
		right: auto;
		top: 10px;
		bottom: 0;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, rgba(82, 199, 198, .6), rgba(82, 199, 198, .18));
		transform: translateX(-50%);
	}

	.lmx-pa-line::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 45%;
		background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7), transparent);
		transform: translateY(-140%);
		animation-name: lmx-pa-beam-v;
	}

	@keyframes lmx-pa-beam-v {
		0%   { transform: translateY(-140%); }
		40%  { transform: translateY(240%); }
		100% { transform: translateY(240%); }
	}

	.lmx-pa-node {
		top: 10px;
	}

	.lmx-pa-chevron {
		left: 50%;
		top: auto;
		bottom: -14px;
		transform: translate(-50%, 0) rotate(90deg);
	}

	.lmx-pa-items {
		grid-column: 2;
		grid-row: 3;
		width: 100%;
		margin-top: 12px !important;
	}

	.lmx-pa-card {
		grid-column: 2;
		grid-row: 3;
		align-items: flex-start;
		margin-top: 12px;
		padding: 16px 16px 18px;
	}

	.lmx-pa-inner .lmx-pa-card-title,
	.lmx-pa-inner .lmx-pa-card-sub {
		text-align: left;
	}

	.lmx-pa-surfaces {
		margin-top: 30px;
	}

	.lmx-pa-inner .lmx-pa-foot {
		margin-top: 26px !important;
	}

	/* Simpler rings: two of them and smaller, so that nothing reaches past the
	   edges on a phone. */
	.lmx-pa-ring {
		width: calc(var(--r) * 90px);
		opacity: .5;
	}

	.lmx-pa-ring:nth-child(n+3) {
		display: none;
	}
}

@media (max-width: 600px) {
	.lmx-pa-inner .lmx-pa-eyebrow {
		letter-spacing: .22em;
	}

	.lmx-pa-tag {
		min-height: 34px;
		padding: 0 12px;
		font-size: 11px;
	}

	.lmx-pa-inner .lmx-pa-foot {
		font-size: 11px !important;
		letter-spacing: .18em;
	}
}

/* --- less motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lmx-pa-ring,
	.lmx-pa-line::after,
	.lmx-pa-stage--featured .lmx-pa-node {
		animation: none !important;
	}

	.lmx-pa-line::after {
		opacity: 0;
	}

	.lmx-pa-stage,
	.lmx-pa-tag-wrap {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}