.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 76svh;
	padding-block: var(--air-5) var(--air-7);
	overflow: hidden;
}
.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	grid-template-areas: "copy visual";
	column-gap: var(--air-4);
	row-gap: var(--air-4);
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.hero__copy {
	grid-area: copy;
	align-self: center;
	position: relative;
	z-index: 2;
	min-width: 0;
	margin-right: calc(-1 * var(--air-4) - 10%);
}
.hero__title {
	max-width: 16ch;
	font-size: clamp(2.25rem, 1.45rem + 2.1vw, 3.375rem);
}
@media (min-width: 480px) {
	.hero__nb {
		white-space: nowrap;
	}
}
.hero__lead {
	max-width: 48ch;
	margin-top: var(--air-3);
	font-size: var(--fs-5);
	color: var(--ink);
}
.hero__actions {
	display: flex;
	margin-top: var(--air-4);
}
.hero__visual {
	grid-area: visual;
	align-self: center;
	min-width: 0;
}
@media (max-width: 1023px) {
	.hero {
		min-height: 0;
		padding-block: var(--air-5) var(--air-6);
		text-align: center;
	}
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"copy"
			"visual";
		gap: var(--air-2);
	}
	.hero__copy { margin-right: 0; }
	.hero__title { max-width: 20ch; margin-inline: auto; }
	.hero__lead { margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__visual {
		width: min(100%, 40rem);
		margin-inline: auto;
	}
}
@media (max-width: 700px) {
	.hero__actions .btn { width: 100%; }
}
@media (horizontal-viewport-segments: 2) {
	.hero { text-align: left; }
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: calc(var(--gutter) * 2);
	}
	.hero__title,
	.hero__lead { margin-inline: 0; }
	.hero__actions { justify-content: flex-start; }
}
.hero-layers {
	--hl-h: calc(100cqw / 0.94);
	--hl-stack: 60cqw;
	--hl-persp: 300cqw;
	--hl-oy: 0.35;
	--hl-tilt: rotateX(57deg) rotateZ(-36deg);
	position: relative;
	width: 100%;
	aspect-ratio: 0.94;
	max-width: calc((100svh - var(--header-h, 5rem) - 13rem) * 0.94);
	margin-inline: auto;
	container-type: inline-size;
	pointer-events: none;
	user-select: none;
}
.hl-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.hl-stage {
	position: absolute;
	inset: 0;
	perspective: var(--hl-persp);
	perspective-origin: 50% calc(var(--hl-oy) * var(--hl-h));
}
.hl-stack {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--hl-stack);
	aspect-ratio: 480 / 340;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) var(--hl-tilt);
}
.hl-plane {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 2.6cqw;
	transform: translateZ(var(--z));
	animation: hl-breathe 7s ease-in-out infinite;
	will-change: transform;
}
.hl-plane > svg {
	display: block;
	width: 100%;
	height: 100%;
}
.hl-plane--shop {
	--z: 30cqw;
	--z2: 33.5cqw;
	background: var(--field);
	box-shadow:
		0 0 0 1px var(--edge),
		0 2.4cqw 4cqw -1.6cqw color-mix(in srgb, var(--ink) 30%, transparent);
}
.hl-plane--admin {
	--z: 0cqw;
	--z2: 0.6cqw;
	background: color-mix(in srgb, var(--panel) 62%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--edge) 85%, transparent);
}
.hl-plane--flow {
	--z: -30cqw;
	--z2: -33.5cqw;
	background: var(--ink);
	box-shadow: 0 2.4cqw 5cqw -2cqw color-mix(in srgb, var(--ink) 55%, transparent);
}
@media (max-width: 1023px) {
	.hero-layers {
		--hl-h: 100cqw;
		--hl-stack: 70cqw;
		aspect-ratio: 1;
		max-width: none;
		margin-inline: auto;
	}
}
.hl-floor {
	--fl-l: 200cqw;
	--fl-r: 200cqw;
	--fl-t: 40cqw;
	position: absolute;
	top: calc(-1 * var(--fl-t));
	right: calc(-1 * var(--fl-r));
	bottom: calc(-1 * var(--air-7));
	left: calc(-1 * var(--fl-l));
	perspective: var(--hl-persp);
	perspective-origin: calc(var(--fl-l) + 50cqw) calc(var(--fl-t) + var(--hl-oy) * var(--hl-h));
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--air-7) - 5rem), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--air-7) - 5rem), transparent);
}
.hl-floor__plane {
	position: absolute;
	top: calc(var(--fl-t) + var(--hl-h) / 2);
	left: calc(var(--fl-l) + 50cqw);
	width: calc(var(--hl-stack) * 6.2);
	aspect-ratio: 480 / 340;
	transform: translate(-50%, -50%) var(--hl-tilt) translateZ(-64cqw);
	-webkit-mask-image: radial-gradient(closest-side, #000 28%, transparent 97%);
	mask-image: radial-gradient(closest-side, #000 28%, transparent 97%);
}
.hl-floor__plane > svg {
	display: block;
	width: 100%;
	height: 100%;
}
@media (scripting: enabled) {
	.hl-floor__walls {
		transition: opacity 0.7s var(--ease);
	}
	.hl-floor__walls:not(.is-loaded) {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hl-floor__walls { transition: none; }
}
@media (max-width: 1023px) {
	.hl-floor {
		--fl-l: 30cqw;
		--fl-r: 30cqw;
		--fl-t: 20cqw;
	}
	.hl-floor__cell--wide { display: none; }
}
@keyframes hl-breathe {
	50% { transform: translateZ(var(--z2)); }
}
@keyframes hl-spin {
	to { transform: rotate(360deg); }
}
.hl-cursor { opacity: 0; }
.hl-cursor__arrow { transform-box: fill-box; transform-origin: 0 0; }
.hl-card__bg {
	fill: var(--panel);
	stroke: var(--edge);
	stroke-width: 1.5;
	transition: stroke 0.2s;
}
.hl-card.is-picked .hl-card__bg { stroke: var(--fill); }
.hl-add__bg {
	fill: var(--field);
	stroke: var(--fill);
	stroke-width: 2;
	transition: fill 0.2s;
}
.hl-add__icon {
	color: var(--fill);
	transition: color 0.2s;
}
.hl-add.is-pressed .hl-add__bg { fill: var(--fill); }
.hl-add.is-pressed .hl-add__icon { color: var(--on-fill); }
.hl-badge {
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
}
.hl-pay__spin {
	fill: none;
	stroke: var(--on-fill);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 28 16;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.hl-pay__ok { opacity: 0; }
.hl-pay.is-busy .hl-pay__card { opacity: 0; }
.hl-pay.is-busy .hl-pay__spin { opacity: 1; animation: hl-spin 0.8s linear infinite; }
.hl-pay.is-done .hl-pay__card,
.hl-pay.is-done .hl-pay__spin { opacity: 0; }
.hl-pay.is-done .hl-pay__ok { opacity: 1; }
.hl-row--proto { display: none; }
.hl-row__bg {
	fill: var(--field);
	stroke: transparent;
	stroke-width: 1.5;
	transition: stroke 0.25s;
}
.hl-row.is-picked .hl-row__bg { stroke: var(--fill); }
.hl-row__pill { transition: opacity 0.3s; }
.hl-row__pill--shipped { opacity: 0; }
.hl-row.is-shipped .hl-row__pill { opacity: 0; }
.hl-row.is-shipped .hl-row__pill--shipped { opacity: 1; }
.hl-detail {
	opacity: 0;
	transform: translateX(24px);
}
.hl-ship__bg {
	fill: var(--fill);
	transition: fill 0.15s;
}
.hl-ship.is-pressed .hl-ship__bg { fill: var(--ember-70); }
.hl-ship__ok { opacity: 0; }
.hl-ship.is-done .hl-ship__truck { opacity: 0; }
.hl-ship.is-done .hl-ship__ok { opacity: 1; }
.hl-node__box {
	fill: #EAF0F6;
	fill-opacity: 0.07;
	stroke: #EAF0F6;
	stroke-opacity: 0.42;
	stroke-width: 2;
	transition: stroke 0.3s, stroke-opacity 0.3s;
}
.hl-node__icon {
	color: #EAF0F6;
	opacity: 0.85;
	transition: color 0.3s, opacity 0.3s;
}
.hl-node__out {
	fill: #EAF0F6;
	fill-opacity: 0.7;
	transition: fill 0.3s, fill-opacity 0.3s;
}
.hl-node.is-on .hl-node__box { stroke: var(--amber-40); stroke-opacity: 1; }
.hl-node.is-on .hl-node__icon { color: var(--amber-40); opacity: 1; }
.hl-node.is-on .hl-node__out { fill: var(--amber-40); fill-opacity: 1; }
.hl-node__spin {
	fill: none;
	stroke: var(--amber-40);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 24 14;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.hl-node.is-busy .hl-node__spin { opacity: 1; animation: hl-spin 0.8s linear infinite; }
.hl-node__ok {
	opacity: 0;
	transform: scale(0.4);
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.hl-node.is-done .hl-node__ok { opacity: 1; transform: none; }
.hl-on {
	fill: none;
	stroke: var(--amber-40);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.hl-payload,
.hl-truck { opacity: 0; }
.hl-bolt { transform-box: fill-box; transform-origin: center; }
.hl-labels {
	display: none;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}
@media (min-width: 1180px) {
	.hl-labels { display: block; }
}
.hl-label {
	--trace: color-mix(in srgb, var(--ink-2) 40%, var(--edge));
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
	animation: hl-label-breathe 7s ease-in-out infinite;
}
.hl-label--shop  { --x: 23.63%; --y: 21.96%; --dy: -3.2cqw; }
.hl-label--admin { --x: 74.27%; --y: 55.16%; --dy: -0.5cqw; --room: 25.7cqw; }
.hl-label--flow  { --x: 63.6%;  --y: 81.6%;  --dy: 2.55cqw; --room: 36.4cqw; }
@keyframes hl-label-breathe {
	50% { transform: translateY(var(--dy)); }
}
.hl-label__box {
	position: absolute;
	box-sizing: border-box;
	width: max-content;
	font-size: var(--fs-4);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	text-wrap: balance;
}
.hl-label__trace {
	position: absolute;
	width: calc(100% + 8 * var(--px));
	height: calc(46 * var(--px));
	fill: none;
	stroke: var(--trace);
	stroke-width: 1.5;
	stroke-linejoin: round;
	overflow: hidden;
	transition: stroke 0.4s;
}
.hl-label__trace circle {
	fill: var(--field);
	transition: stroke 0.4s;
}
.hl-label--l .hl-label__box {
	right: 0;
	bottom: 0;
	max-width: 18em;
	padding: 0 calc(45 * var(--px)) calc(41 * var(--px)) calc(10 * var(--px));
}
.hl-label--l .hl-label__trace { right: calc(-8 * var(--px)); bottom: calc(-5.5 * var(--px)); }
.hl-label--r .hl-label__box {
	left: 0;
	bottom: calc(-36 * var(--px));
	max-width: calc(var(--room) + var(--gutter) + max(0px, (100vw - var(--max-width)) / 2) - 16 * var(--px));
	padding: 0 calc(10 * var(--px)) calc(6 * var(--px)) calc(45 * var(--px));
}
.hl-label--r .hl-label__trace { left: calc(-8 * var(--px)); bottom: calc(-5.5 * var(--px)); }
.hl-label.is-live { --trace: var(--fill); }
@media (max-width: 1279px) {
	.hl-label__box { font-size: var(--fs-3); }
}
@media (prefers-reduced-motion: reduce) {
	.hl-plane,
	.hl-label { animation: none; }
	.hl-card--pick .hl-card__bg { stroke: var(--fill); }
	.hl-card--pick .hl-add__bg { fill: var(--fill); }
	.hl-card--pick .hl-add__icon { color: var(--on-fill); }
	.hl-badge { transform: none; }
	.hl-plane--shop .hl-cursor { opacity: 1; transform: translate(374px, 288px); }
	.hl-detail { opacity: 1; transform: none; }
	.hl-plane--admin .hl-cursor { opacity: 1; transform: translate(362px, 290px); }
	.hl-node--a .hl-node__ok,
	.hl-node--b .hl-node__ok { opacity: 1; transform: none; }
	.hl-node--c .hl-node__box { stroke: var(--amber-40); stroke-opacity: 1; }
	.hl-on--1 { stroke-dashoffset: 0; }
	.hl-on--2 { stroke-dashoffset: 50; }
	.hl-truck { opacity: 1; transform: translate(314.75px, 200px); }
}
.scroll-cue {
	position: fixed;
	left: 50%;
	bottom: var(--air-4);
	z-index: 40;
	display: none;
	justify-items: center;
	gap: 0.4rem;
	color: color-mix(in srgb, var(--ink) 72%, transparent);
	transform: translateX(-50%);
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.scroll-cue { display: grid; }
}
html:has(.site-header.is-stuck) .scroll-cue {
	opacity: 0;
	transform: translate(-50%, 0.5rem);
}
.scroll-cue svg { display: block; overflow: visible; }
.scroll-cue__mouse { width: 1.75rem; height: 2.75rem; }
.scroll-cue__body { stroke: currentColor; }
.scroll-cue__wheel {
	fill: var(--fill);
	transform-box: fill-box;
	animation: scroll-cue-wheel 2.2s var(--ease) infinite;
}
.scroll-cue__chevrons { width: 1rem; height: 1rem; }
.scroll-cue__chevron {
	stroke: currentColor;
	animation: scroll-cue-chevron 2.2s ease-in-out infinite;
}
.scroll-cue__chevron--2 { animation-delay: 0.18s; }
@keyframes scroll-cue-wheel {
	0%   { transform: translateY(0); opacity: 1; }
	55%  { transform: translateY(0.55rem); opacity: 0; }
	56%  { transform: translateY(0); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes scroll-cue-chevron {
	0%, 30%, 100% { opacity: 0.25; }
	55%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.scroll-cue__wheel,
	.scroll-cue__chevron { animation: none; opacity: 1; }
}