/* Hallmark · redesign · genre: modern-minimal · macrostructure: Marquee Hero + connected service scene
 * nav: N5 floating pill (fixed) · footer: Ft2 · design-system: design.md (Cobraticket productores)
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 */

:root {
	--color-pda-body: var(--color-dark);
	--color-pda-screen-top: oklch(46% 0.17 285);
	--color-pda-screen-bottom: oklch(30% 0.14 280);
	--color-card-hover: color-mix(in oklch, var(--color-accent) 45%, var(--color-transparent));
	--dur-scene: 9s;
}

/* Navigation stays visible while scrolling. */
header {
	position: fixed;
	top: 24px;
	z-index: 30;
}

html {
	scroll-padding-top: 120px;
}

/* ---------- Home hero ---------- */
.page-home .home-hero {
	padding-top: 148px;
}

.hero-main {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 64px;
	align-items: center;
	padding-bottom: 56px;
}

.page-home .hero-text .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	font-size: var(--text-question);
	font-weight: 650;
	color: var(--color-muted);
}

.hero-text .live-dot {
	flex-shrink: 0;
}

.hero-text h1 {
	font-size: clamp(48px, 6.2vw, 100px);
	line-height: 1.04;
	letter-spacing: -0.07em;
	font-weight: var(--weight-heading);
}

.hero-text .hero-accent {
	position: relative;
	display: inline-block;
	color: var(--color-accent);
}

.page-home .hero-asterisk {
	position: absolute;
	top: 0.02em;
	right: -0.42em;
	display: block;
	font-size: 0.34em;
	line-height: 1;
	color: var(--color-blue);
	transform: rotate(12deg);
}

.hero-text .lede {
	margin-top: 28px;
	max-width: 40ch;
	font-size: var(--text-body);
	line-height: var(--line-body);
	color: var(--color-muted);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 32px;
}

.hero-actions .hero-cta {
	margin: 0;
}

.hero-secondary {
	font-size: var(--text-control);
	font-weight: var(--weight-control);
	border-bottom: 1px solid var(--color-rule);
	padding: 10px 0;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.hero-secondary:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

/* Hero scene: each service as a real object, connected by the attendee's path.
 * Sizes use container units so the composition scales as one piece. */
.hero-scene {
	position: relative;
	container-type: inline-size;
	justify-self: end;
	width: 100%;
	max-width: 620px;
	aspect-ratio: 100 / 112;
	isolation: isolate;
}

.page-home .hero-scene {
	aspect-ratio: 1.42 / 1;
	max-width: 760px;
}

.scene-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.scene-backdrop img {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	object-fit: cover;
	opacity: 0.38;
	mask-image: radial-gradient(closest-side, var(--color-dark) 25%, var(--color-transparent) 100%);
}

.scene-backdrop::after {
	content: '';
	position: absolute;
	inset: 10% 6%;
	background:
		radial-gradient(closest-side at 30% 35%, var(--color-accent-soft), var(--color-transparent)),
		radial-gradient(closest-side at 75% 65%, var(--color-blue-soft), var(--color-transparent));
	filter: blur(30px);
	z-index: -1;
}

.scene-path {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.scene-path path {
	fill: none;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.path-base {
	stroke: var(--color-muted);
	stroke-width: 1.5;
	stroke-dasharray: 0.1 1.6;
	opacity: 0.55;
}

.path-run {
	stroke: var(--color-accent);
	stroke-width: 3;
	stroke-dasharray: 10 120;
	stroke-dashoffset: 10;
	opacity: 0;
	filter: drop-shadow(0 0 6px var(--color-accent));
	animation: scene-run var(--dur-scene) linear infinite;
}

.scene-item {
	position: absolute;
	display: block;
	color: var(--color-ink);
	white-space: normal;
}

.scene-ticket {
	--d: 0s;
	left: 2cqi;
	top: 0;
	width: 32cqi;
}

.scene-cashless {
	--d: 3s;
	right: 3cqi;
	top: 35cqi;
	width: 24cqi;
}

.scene-corporate {
	--d: 6s;
	left: 30cqi;
	top: 66cqi;
	width: 24cqi;
}

.scene-device {
	display: block;
	box-shadow: 0 4cqi 9cqi var(--color-shadow);
	transition: translate var(--dur-fast) var(--ease-out);
}

.scene-item:hover .scene-device {
	translate: 0 -1.2cqi;
}

/* Ticketing: digital ticket on a phone. */
.scene-phone {
	aspect-ratio: 9 / 18.5;
	padding: 1.5cqi;
	border-radius: 5.5cqi;
	background: var(--color-dark);
	border: 1px solid var(--color-rule);
	rotate: -6deg;
}

.phone-screen {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 3.4cqi 2.8cqi 3cqi;
	border-radius: 4.2cqi;
	background: var(--color-light-paper);
	color: var(--color-light-ink);
}

.phone-screen img {
	width: 15cqi;
	height: auto;
}

.phone-screen small {
	margin-top: 3.4cqi;
	font: 700 max(7px, 1.5cqi) / 1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light-muted);
}

.phone-screen strong {
	margin-top: 1cqi;
	font: 800 3.9cqi / 1.02 var(--font-display);
	letter-spacing: -0.06em;
	text-transform: uppercase;
}

.screen-qr {
	position: relative;
	align-self: center;
	width: 20cqi;
	aspect-ratio: 1;
	margin-top: auto;
	padding: 1.4cqi;
	border-radius: 2cqi;
	background: var(--color-white);
	overflow: clip;
}

.screen-qr svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--color-light-ink);
	shape-rendering: crispEdges;
}

.scan-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 6%;
	height: 2px;
	background: var(--color-accent);
	box-shadow: 0 0 2cqi var(--color-accent);
	opacity: 0;
	animation: scene-scan var(--dur-scene) var(--ease-in-out) var(--d) infinite both;
}

.screen-meta {
	display: flex;
	justify-content: space-between;
	gap: 1cqi;
	margin-top: 2.6cqi;
	padding-top: 1.8cqi;
	border-top: 1px dashed color-mix(in oklch, var(--color-light-ink) 25%, var(--color-transparent));
	font: 600 max(7px, 1.4cqi) / 1.3 var(--font-body);
	color: var(--color-light-muted);
}

/* Cashless: all-in-one PDA. Reader on top, printer slot, then the screen.
 * Inner sizes in em: 1em = a tenth of the device width. */
.scene-pda {
	width: 100%;
	font-size: 2.4cqi;
	box-shadow: none;
	rotate: 5deg;
}

.pda-device {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 10em;
	padding: 0.45em 0.4em 0.9em;
	border-radius: 1.5em 1.5em 1.1em 1.1em;
	background: linear-gradient(100deg, var(--color-surface-raised), var(--color-pda-body) 40%, var(--color-pda-body) 85%, var(--color-surface-raised));
	border: 1px solid var(--color-rule);
	box-shadow: 0 1.6em 3.4em var(--color-shadow);
}

.pda-reader {
	display: grid;
	place-items: center;
	height: 4.4em;
	border-radius: 1.15em 1.15em 0.45em 0.45em;
	background:
		radial-gradient(ellipse at 25% 15%, color-mix(in oklch, var(--color-white) 9%, var(--color-transparent)), var(--color-transparent) 60%),
		var(--color-dark);
	border: 1px solid color-mix(in oklch, var(--color-white) 6%, var(--color-transparent));
}

.pda-slot {
	position: relative;
	height: 0.55em;
	margin: 0.3em 0.2em;
	border-radius: 0.2em;
	background: var(--color-dark);
	box-shadow: inset 0 0.08em 0.12em var(--color-shadow);
}

.pda-slot::after {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	top: 45%;
	height: 1px;
	background: color-mix(in oklch, var(--color-white) 14%, var(--color-transparent));
}

/* The ticket comes out of the slot, over the reader. */
.pda-paper {
	position: absolute;
	left: 24%;
	right: 24%;
	top: -2.6em;
	height: 7.6em;
	overflow: clip;
	pointer-events: none;
}

.pda-paper > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 0.5em 0.5em 0;
	border-radius: 0.25em 0.25em 0 0;
	background: var(--color-white);
	box-shadow: 0 0.3em 0.6em var(--color-shadow);
	translate: 0 100%;
	animation: scene-print var(--dur-scene) var(--ease-out) var(--d) infinite both;
}

.pda-paper i {
	align-self: stretch;
	height: 0.22em;
	border-radius: var(--radius-pill);
	background: var(--color-rule);
}

.pda-paper i + i {
	align-self: flex-start;
	width: 60%;
	margin-top: 0.25em;
}

.pda-paper svg {
	width: 2.9em;
	margin-top: 0.45em;
	fill: var(--color-light-ink);
	shape-rendering: crispEdges;
}

.pda-display {
	display: flex;
	flex-direction: column;
	height: 15.4em;
	padding: 0.35em;
	border-radius: 0.55em;
	background: var(--color-dark);
}

.pda-top {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.6em 0.6em 0.55em;
	border-radius: 0.3em 0.3em 0 0;
	background: linear-gradient(160deg, var(--color-pda-screen-top), var(--color-pda-screen-bottom));
	color: var(--color-white);
}

.pda-device .pda-top img,
.pda-device .cash-card-logo {
	height: auto;
	object-fit: contain;
}

.pda-device .pda-top img {
	width: 4.6em;
}

.pda-device .cash-card-logo {
	width: 6.8em;
}

.pda-top small {
	font: 700 0.5em / 1.2 var(--font-body);
	letter-spacing: 0.04em;
}

.pda-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.32em;
	padding: 0.45em;
	border-radius: 0 0 0.3em 0.3em;
	background: linear-gradient(color-mix(in srgb, var(--color-blue) 30%, var(--color-white)), color-mix(in srgb, var(--color-blue) 14%, var(--color-white)));
}

.pda-line {
	padding: 0.9em 1em;
	border-radius: 0.7em;
	background: color-mix(in oklch, var(--color-white) 75%, var(--color-transparent));
	color: var(--color-light-ink);
	font: 600 0.5em / 1.2 var(--font-body);
}

.pda-pay {
	margin-top: auto;
	padding: 1.1em 0.6em;
	border-radius: 0.8em;
	background: var(--color-primary);
	color: var(--color-primary-ink);
	text-align: center;
	font: 700 0.5em / 1.2 var(--font-body);
}

.pda-device .pda-card {
	position: absolute;
	right: -1.8em;
	top: 1.5em;
	font-size: 0.72em;
	rotate: -10deg;
	animation: scene-tap var(--dur-scene) var(--ease-in-out) var(--d) infinite both;
}

.pda-signal {
	position: absolute;
	right: 1.3em;
	top: 0.5em;
	font: 400 0.9em / 1 var(--font-body);
	letter-spacing: -0.15em;
	color: var(--color-blue);
	opacity: 0;
	animation: scene-signal var(--dur-scene) linear var(--d) infinite both;
}

/* The same device, larger, in the Cashless equipment lineup. */
.pda-device-lineup {
	--d: 0s;
	font-size: clamp(20px, 2vw, 26px);
	rotate: 3deg;
}

/* Corporativos: hanging badge. */
.scene-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: none;
	transform-origin: 50% 0;
	animation: scene-swing var(--dur-scene) var(--ease-out) var(--d) infinite both;
}

.badge-strap {
	width: 3.4cqi;
	height: 11cqi;
	background: var(--color-blue);
	border-radius: 0 0 0.6cqi 0.6cqi;
}

.badge-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 1 / 1.3;
	margin-top: -1cqi;
	padding: 4.4cqi 2.6cqi 2.4cqi;
	border-radius: 2.4cqi;
	background: var(--color-accent);
	color: var(--color-on-accent);
	box-shadow: 0 4cqi 9cqi var(--color-shadow);
}

.badge-card::before {
	content: '';
	position: absolute;
	top: 1.5cqi;
	left: 50%;
	width: 5cqi;
	height: 1.2cqi;
	translate: -50% 0;
	border-radius: var(--radius-pill);
	background: var(--color-dark);
}

.badge-card img {
	width: 12cqi;
	height: auto;
}

.badge-card strong {
	margin-top: 2.6cqi;
	font: 800 3.5cqi / 1.02 var(--font-display);
	letter-spacing: -0.06em;
}

.badge-card small {
	margin-top: auto;
	font: 700 max(7px, 1.4cqi) / 1.2 var(--font-body);
}

.badge-bars {
	width: 70%;
	height: 2.6cqi;
	margin-top: 1.2cqi;
	background: repeating-linear-gradient(90deg, var(--color-code) 0 2px, var(--color-transparent) 2px 4px, var(--color-code) 4px 5px, var(--color-transparent) 5px 8px);
}

/* Live panel: every action lands in the same place. */
.scene-panel {
	position: absolute;
	right: 0;
	top: 3cqi;
	width: 34cqi;
	display: flex;
	flex-direction: column;
	gap: 1.6cqi;
	padding: 2.6cqi;
	border-radius: 3cqi;
	background: color-mix(in oklch, var(--color-surface) 82%, var(--color-transparent));
	border: 1px solid var(--color-rule);
	box-shadow: 0 3cqi 7cqi var(--color-shadow);
	backdrop-filter: blur(12px);
}

.panel-head {
	display: flex;
	align-items: center;
	gap: 1.2cqi;
	font: 700 max(10px, 1.8cqi) / 1.2 var(--font-body);
}

.panel-row {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	gap: 1.4cqi;
	font: 500 max(9px, 1.6cqi) / 1.2 var(--font-body);
	color: var(--color-muted);
}

.panel-row i {
	display: block;
	height: max(5px, 1cqi);
	border-radius: var(--radius-pill);
	background: var(--color-rule);
	overflow: clip;
}

.panel-row b {
	--d: 0s;
	display: block;
	width: 68%;
	height: 100%;
	border-radius: inherit;
	background: var(--color-accent);
	transform-origin: left;
	animation: scene-bump var(--dur-scene) var(--ease-out) calc(var(--d) + 0.9s) infinite both;
}

.panel-row:nth-child(3) b {
	--d: 3s;
	width: 54%;
	background: var(--color-blue);
}

.panel-row:nth-child(4) b {
	--d: 6s;
	width: 40%;
}

/* Confirmation toasts, one per service, in sequence. */
.scene-toast {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 1.2cqi;
	padding: 1.1cqi 2.2cqi 1.1cqi 1.1cqi;
	border-radius: var(--radius-pill);
	background: var(--color-surface-raised);
	border: 1px solid var(--color-rule);
	box-shadow: 0 2cqi 5cqi var(--color-shadow);
	font: 650 max(11px, 1.9cqi) / 1.2 var(--font-body);
	white-space: nowrap;
	opacity: 0;
	animation: scene-toast var(--dur-scene) var(--ease-out) calc(var(--d) + 0.9s) infinite both;
}

.scene-toast b {
	display: grid;
	place-items: center;
	width: max(18px, 3.2cqi);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: max(10px, 1.7cqi);
}

.scene-cashless .scene-toast b {
	background: var(--color-blue);
	color: var(--color-on-blue);
}

.scene-ticket .scene-toast {
	left: 15cqi;
	top: 52cqi;
}

.scene-cashless .scene-toast {
	right: calc(100% - 3cqi);
	top: 6cqi;
}

.scene-corporate .scene-toast {
	right: calc(100% - 2cqi);
	top: 17cqi;
}

/* Labels: what each object means for the producer. */
.scene-label {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0.6cqi;
	width: 28cqi;
}

.scene-ticket .scene-label {
	left: calc(100% + 6cqi);
	top: 7cqi;
}

.scene-cashless .scene-label {
	right: calc(100% + 5cqi);
	top: 13cqi;
	align-items: flex-end;
	text-align: right;
}

.scene-corporate .scene-label {
	left: calc(100% + 5cqi);
	top: 27cqi;
}

.scene-label small {
	font: 700 max(11px, 1.8cqi) / 1.2 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.scene-cashless .scene-label small {
	color: var(--color-blue);
}

.scene-label strong {
	font: 750 max(14px, 2.9cqi) / 1.15 var(--font-display);
	letter-spacing: -0.03em;
}

.scene-label strong::after {
	content: ' ↗';
	font-weight: 500;
	color: var(--color-muted);
	transition: color var(--dur-fast) var(--ease-out);
}

.scene-item:hover .scene-label strong::after,
.scene-item:focus-visible .scene-label strong::after {
	color: var(--color-accent);
}

.scene-label {
	text-shadow: 0 1px 12px var(--color-dark);
}

.scene-label em {
	font-style: normal;
	font-size: max(11px, 1.8cqi);
	line-height: 1.45;
	color: var(--color-muted);
}

@container (max-width: 520px) {
	.scene-label em {
		display: none;
	}

	.scene-label strong {
		font-size: 13px;
	}

	.scene-label small {
		font-size: 10px;
	}

	.scene-toast {
		font-size: 10px;
	}

	.scene-corporate .scene-toast {
		right: auto;
		left: -8cqi;
		top: 3cqi;
	}
}

@keyframes scene-run {
	0%,
	10% {
		stroke-dashoffset: 10;
		opacity: 0;
	}
	14% {
		opacity: 1;
	}
	32% {
		stroke-dashoffset: -42;
	}
	64% {
		stroke-dashoffset: -92;
		opacity: 1;
	}
	72%,
	100% {
		stroke-dashoffset: -100;
		opacity: 0;
	}
}

@keyframes scene-scan {
	0% {
		top: 6%;
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	11% {
		top: 92%;
		opacity: 1;
	}
	13%,
	100% {
		top: 92%;
		opacity: 0;
	}
}

@keyframes scene-toast {
	0% {
		opacity: 0;
		transform: translateY(1.5cqi) scale(0.94);
	}
	4%,
	24% {
		opacity: 1;
		transform: none;
	}
	29%,
	100% {
		opacity: 0;
		transform: translateY(-1cqi);
	}
}

@keyframes scene-tap {
	0%,
	24%,
	100% {
		transform: translate(2.6em, 1.8em) rotate(-6deg);
	}
	8%,
	14% {
		transform: none;
	}
}

@keyframes scene-signal {
	0%,
	6% {
		opacity: 0;
	}
	9%,
	14% {
		opacity: 1;
	}
	18%,
	100% {
		opacity: 0;
	}
}

@keyframes scene-print {
	0%,
	12% {
		translate: 0 100%;
	}
	22%,
	30% {
		translate: 0 0;
	}
	38%,
	100% {
		translate: 0 100%;
	}
}

@keyframes scene-swing {
	0%,
	30%,
	100% {
		rotate: -2deg;
	}
	6% {
		rotate: 5deg;
	}
	12% {
		rotate: -3deg;
	}
	18% {
		rotate: 1.5deg;
	}
	24% {
		rotate: -2.5deg;
	}
}

@keyframes scene-bump {
	0%,
	20%,
	100% {
		transform: scaleX(1);
		filter: none;
	}
	5% {
		transform: scaleX(1.18);
		filter: brightness(1.3);
	}
}

/* Cobraticket cashless card. Inner sizes in em: 1em = a tenth of the card width. */
.cash-card {
	position: relative;
	display: block;
	width: 10em;
	aspect-ratio: 1.586;
	border-radius: 0.55em;
	background: linear-gradient(150deg, var(--color-surface), var(--color-dark) 55%);
	border: 1px solid var(--color-rule);
	box-shadow: 0 0.6em 1.4em var(--color-shadow);
	overflow: clip;
}

.cash-card-ticket {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: color-mix(in oklch, var(--color-white) 7%, var(--color-transparent));
	stroke-width: 9;
}

.cash-card-logo {
	position: absolute;
	left: 1.5em;
	top: 2.35em;
	width: 6.8em;
	height: auto;
}

.cash-card em {
	position: absolute;
	right: 16%;
	top: 59%;
	font: italic 500 0.62em / 1 var(--font-body);
	color: var(--color-blue);
}

.cash-card-nfc {
	position: absolute;
	top: 0.55em;
	right: 0.7em;
	width: 0.8em;
	fill: none;
	stroke: var(--color-blue);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cash-card small {
	position: absolute;
	right: 8%;
	bottom: 7%;
	font: 500 0.3em / 1 var(--font-body);
	color: var(--color-white);
}

.cash-card-tile {
	font-size: 23px;
	rotate: -10deg;
}

/* ---------- Home services ---------- */
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.service-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-rule);
	border-radius: 24px;
	overflow: clip;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.service-tile:hover {
	border-color: var(--color-card-hover);
}

.service-tile .service-visual {
	display: flex;
	height: 250px;
}

.service-grid .material-logo {
	display: block;
	width: 100px;
	height: 18px;
	object-fit: contain;
	object-position: left center;
}

.service-grid .ticket-bottom span {
	font: 600 9px/1.3 var(--font-body);
}

.service-grid .nfc-art small {
	font: 500 6px/1.3 var(--font-body);
	letter-spacing: 0.09em;
}

.service-grid .visual-label {
	font: 600 10px/1.3 var(--font-body);
	letter-spacing: 0.1em;
}

.tile-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px;
}

.tile-body h3 {
	font-size: var(--text-card);
}

.tile-body > p:not(.tile-fit) {
	margin-top: 10px;
	color: var(--color-muted);
	font-size: var(--text-body);
	line-height: 1.7;
}

.tile-list {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tile-list li {
	position: relative;
	padding-left: 26px;
	font-size: var(--text-secondary);
	line-height: 1.6;
}

.tile-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent);
	font-weight: 700;
}

.service-tile:nth-child(2) .tile-list li::before {
	color: var(--color-blue);
}

.tile-fit {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--color-rule);
	font-size: var(--text-label);
	color: var(--color-muted);
}

.tile-body .text-link {
	margin-top: auto;
	padding-top: 12px;
	padding-bottom: 12px;
	align-self: flex-start;
}

.tile-fit + .text-link {
	margin-top: 22px;
}

/* ---------- Process ---------- */
.process {
	padding: 24px var(--page-gutter) 104px;
}

.process-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 34px;
}

.process-head h2 span {
	color: var(--color-muted);
}

.process-head p {
	color: var(--color-muted);
	max-width: 34ch;
}

.process-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.process-steps li {
	padding: 28px;
	border: 1px solid var(--color-rule);
	border-radius: 22px;
	background: var(--color-surface);
}

.process-steps span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--color-rule);
	font-size: var(--text-caption);
	font-weight: 700;
	color: var(--color-accent);
}

.process-steps h3 {
	margin-top: 22px;
	font-size: 21px;
}

.process-steps p {
	margin-top: 10px;
	font-size: var(--text-secondary);
	line-height: 1.7;
	color: var(--color-muted);
}

.faq h2 {
	grid-row: 1 / 7;
}

/* ---------- Shared: other services ---------- */
.other {
	padding: 96px var(--page-gutter);
}

.other-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}

.other-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	gap: 8px 16px;
	align-items: center;
	padding: 28px;
	border: 1px solid var(--color-rule);
	border-radius: 22px;
	background: var(--color-surface);
	white-space: normal;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.other-card small {
	font-size: var(--text-label);
	font-weight: 700;
	color: var(--color-accent);
}

.other-card strong {
	grid-row: 2;
	font: 750 22px/1.25 var(--font-display);
	letter-spacing: -0.03em;
}

.other-card i {
	grid-row: 1 / 3;
	grid-column: 2;
	font-style: normal;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-rule);
	border-radius: 50%;
}

.other-card:hover {
	border-color: var(--color-accent);
}

/* ---------- Detail pages ---------- */
.fit-chips {
	list-style: none;
	padding: 0;
	margin: 32px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fit-chips li {
	padding: 8px 16px;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	font-size: var(--text-secondary);
	color: var(--color-muted);
}

.detail-hero > div > .fit-chips {
	grid-column: 1 / -1;
}

.features.features-icons {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.features-icons .op-icon {
	width: 30px;
	height: 30px;
	margin-bottom: 20px;
	color: var(--color-accent);
}

/* ---------- Cashless ---------- */
.page-cashless .cash-tabs {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1101px) {
	.page-cashless .option-comparison {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-cashless .option-comparison article {
		border-right: 0;
		border-bottom: 1px solid var(--color-rule);
	}

	.page-cashless .option-comparison article:nth-child(odd) {
		border-right: 1px solid var(--color-rule);
	}

	.page-cashless .option-comparison article:nth-child(n + 3) {
		border-bottom: 0;
	}
}

.equipment-lineup {
	padding: 28px var(--page-gutter) 72px;
}

.equipment-lineup .eyebrow {
	color: var(--color-blue);
	margin-bottom: 18px;
}

.lineup {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.lineup-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-rule);
	border-radius: 24px;
	overflow: clip;
}

.lineup-feature {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lineup-media {
	position: relative;
	min-width: 0;
	background: var(--color-dark);
}

.lineup-media img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.lineup-card:nth-child(2) .lineup-media img,
.lineup-card:nth-child(3) .lineup-media img,
.lineup-card:nth-child(4) .lineup-media img {
	object-position: center;
}

.lineup-illustration {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 88px 56px 48px 36px;
	background: var(--color-blue-soft);
	min-height: 360px;
}

.lineup-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-blue);
	color: var(--color-on-blue);
	font-size: var(--text-label);
	font-weight: 700;
}

.lineup-body {
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.lineup-feature .lineup-body {
	justify-content: center;
	padding: 48px;
}

.lineup-body h3 {
	font-size: var(--text-card);
}

.lineup-body > p {
	margin-top: 12px;
	font-size: var(--text-body);
	line-height: 1.7;
	color: var(--color-muted);
}

.lineup-body ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lineup-body li {
	position: relative;
	padding-left: 26px;
	font-size: var(--text-secondary);
	line-height: 1.6;
}

.lineup-body li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--color-blue);
	font-weight: 700;
}

.lineup-body small {
	margin-top: 20px;
	font-size: var(--text-caption);
	color: var(--color-muted);
}

/* Web shop: buy from the phone, pick up at dispatch. */
.web-shop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	padding: 72px var(--page-gutter);
}

.web-shop .eyebrow {
	color: var(--color-blue);
	margin-bottom: 18px;
}

.web-shop h2 span {
	color: var(--color-muted);
}

.web-shop-copy > p:not(.eyebrow) {
	margin-top: 22px;
	max-width: 46ch;
	color: var(--color-muted);
	line-height: var(--line-body);
}

.web-steps {
	list-style: none;
	padding: 0;
	margin: 32px 0 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.web-steps li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.web-steps li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-rule);
	font-size: var(--text-caption);
	font-weight: 700;
	color: var(--color-blue);
}

.web-steps b {
	display: block;
	font: 750 19px/1.3 var(--font-display);
	letter-spacing: -0.02em;
}

.web-steps small {
	display: block;
	margin-top: 4px;
	font-size: var(--text-secondary);
	line-height: 1.6;
	color: var(--color-muted);
}

.web-shop .fit-chips {
	margin-top: 28px;
}

.web-shop-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 560px;
	padding: 40px;
	border-radius: 28px;
	background:
		radial-gradient(closest-side at 70% 70%, var(--color-accent-soft), var(--color-transparent)),
		var(--color-blue-soft);
	overflow: clip;
}

.shop-phone {
	width: 260px;
	aspect-ratio: 9 / 18.5;
	padding: 10px;
	border-radius: 36px;
	background: var(--color-dark);
	border: 1px solid var(--color-rule);
	box-shadow: 0 30px 60px var(--color-shadow);
	rotate: -4deg;
	translate: -80px 0;
}

.shop-screen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 22px 14px 14px;
	border-radius: 28px;
	background: var(--color-light-paper);
	color: var(--color-light-ink);
}

.shop-head img {
	display: block;
	width: 96px;
	height: auto;
}

.shop-head small {
	display: block;
	margin-top: 6px;
	font: 700 10px/1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light-muted);
}

.shop-tabs {
	display: flex;
	gap: 6px;
	margin: 4px 0 2px;
	font-size: 11px;
}

.shop-tabs > * {
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid color-mix(in oklch, var(--color-light-ink) 15%, var(--color-transparent));
}

.shop-tabs b {
	background: var(--color-light-ink);
	color: var(--color-light-paper);
	border-color: var(--color-light-ink);
}

.shop-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 26px;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: 14px;
	background: var(--color-white);
}

.shop-item i {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.thumb-a {
	background: linear-gradient(140deg, var(--color-accent), var(--color-primary));
}

.thumb-b {
	background: linear-gradient(140deg, var(--color-blue), var(--color-blue-soft));
}

.thumb-c {
	background: linear-gradient(140deg, var(--color-pda-screen-top), var(--color-pda-screen-bottom));
}

.thumb-d {
	background: linear-gradient(140deg, var(--color-light-ink), var(--color-light-muted));
}

.shop-item b {
	display: block;
	font: 700 13px/1.2 var(--font-body);
}

.shop-item small {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	color: var(--color-light-muted);
}

.shop-item em {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-light-ink);
	color: var(--color-light-paper);
	font: 700 12px/1 var(--font-body);
	font-style: normal;
}

.shop-item em.is-empty {
	background: var(--color-transparent);
	border: 1px solid color-mix(in oklch, var(--color-light-ink) 25%, var(--color-transparent));
	color: var(--color-light-ink);
}

.shop-cart {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding: 13px 16px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-primary-ink);
	font: 700 13px/1 var(--font-body);
	white-space: nowrap;
	animation: shop-pulse 3.6s var(--ease-in-out) infinite;
}

.shop-ticket {
	position: absolute;
	right: 6%;
	bottom: 9%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 200px;
	padding: 20px;
	border-radius: 20px;
	background: var(--color-white);
	color: var(--color-light-ink);
	box-shadow: 0 24px 48px var(--color-shadow);
	rotate: 6deg;
	animation: shop-float 6s var(--ease-in-out) infinite;
}

.shop-ticket small {
	font: 700 10px/1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-light-muted);
}

.shop-ticket strong {
	font: 800 20px/1.1 var(--font-display);
	letter-spacing: -0.04em;
}

.shop-qr {
	width: 110px;
	margin: 8px auto;
}

.shop-qr svg {
	display: block;
	width: 100%;
	fill: var(--color-light-ink);
	shape-rendering: crispEdges;
}

.shop-ticket > span {
	font-size: 11px;
	color: var(--color-light-muted);
	text-align: center;
}

.shop-chip {
	position: absolute;
	right: 7%;
	top: 14%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 8px;
	border-radius: var(--radius-pill);
	background: var(--color-surface-raised);
	border: 1px solid var(--color-rule);
	box-shadow: 0 16px 32px var(--color-shadow);
	font: 650 var(--text-label) / 1.2 var(--font-body);
}

.shop-chip b {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-blue);
	color: var(--color-on-blue);
	font-size: 12px;
}

@keyframes shop-pulse {
	0%,
	70%,
	100% {
		box-shadow: 0 0 0 0 var(--color-transparent);
	}
	80% {
		box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-primary) 30%, var(--color-transparent));
	}
}

@keyframes shop-float {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -10px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.hero-main {
		gap: 40px;
	}

	.service-grid,
	.lineup {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-tile:last-child,
	.lineup-card:last-child {
		grid-column: 1 / -1;
	}

	.process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.features.features-icons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.hero-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero-scene {
		justify-self: center;
	}

	.lineup-feature,
	.web-shop {
		grid-template-columns: minmax(0, 1fr);
	}

	.web-shop {
		gap: 40px;
	}

	.lineup-feature .lineup-body {
		padding: 28px;
	}

	.page-cashless .cash-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	header {
		top: 16px;
	}

	.page-home .home-hero {
		padding-top: 120px;
	}

	.hero-text h1 {
		font-size: clamp(42px, 11vw, 64px);
	}

	.page-home .hero-asterisk {
		right: -0.36em;
		font-size: 0.3em;
	}

	.hero-main {
		padding-bottom: 36px;
	}

	.service-grid,
	.lineup,
	.process-steps,
	.features.features-icons {
		grid-template-columns: minmax(0, 1fr);
	}

	.service-tile:last-child,
	.lineup-card:last-child {
		grid-column: auto;
	}

	.tile-body,
	.process-steps li,
	.other-card,
	.lineup-body {
		padding: 24px;
	}

	.process {
		padding-bottom: 64px;
	}

	.process-head {
		display: block;
	}

	.process-head p {
		margin-top: 16px;
	}

	.other {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.lineup-illustration {
		min-height: 280px;
		padding: 72px 48px 32px 24px;
	}

	.web-shop {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.web-shop-visual {
		min-height: 480px;
		padding: 24px;
	}

	.shop-phone {
		width: 210px;
		translate: -44px 0;
	}

	.shop-ticket {
		right: 3%;
		bottom: 5%;
		width: 132px;
		padding: 14px;
	}

	.shop-ticket strong {
		font-size: 17px;
	}

	.shop-qr {
		width: 70px;
		margin: 4px auto;
	}

	.shop-ticket > span {
		display: none;
	}

	.shop-chip {
		right: 4%;
		top: 6%;
	}

	.lineup-media img {
		height: 230px;
	}
}

@media (max-width: 480px) {
	.web-shop-visual {
		min-height: 440px;
		padding: 16px;
	}

	.shop-phone {
		width: 200px;
		translate: -20px 0;
	}

	.shop-item {
		grid-template-columns: 30px minmax(0, 1fr) 24px;
		gap: 8px;
	}

	.shop-item i {
		width: 30px;
		height: 30px;
	}

	.shop-item small {
		display: none;
	}

	.shop-chip {
		font-size: var(--text-caption);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pda-device *,
	.shop-cart,
	.shop-ticket,
	.hero-scene *,
	.hero-scene *::before {
		animation: none !important;
	}

	.path-run {
		opacity: 0;
	}

	.scene-ticket .scene-toast {
		opacity: 1;
	}

}

/* Hallmark · component: cashless simulation · design-system: tokens.css · pre-emit critique: P4 H4 E4 S4 R4 V4 */
.cash-demo{--demo-hold:11s}
.cash-demo{max-width:1680px;margin-inline:auto;padding:36px var(--page-gutter) 28px}
.demo-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:var(--space-xl);align-items:center;padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface)}
.demo-visual{position:relative;min-height:540px;overflow:clip}
.demo-slide{position:absolute;inset:0;z-index:0;display:grid;justify-content:center;align-items:end;padding-bottom:18px;opacity:0;visibility:hidden;transform:translateY(72px);transition:none;pointer-events:none}
.cash-demo.is-ready .demo-slide{visibility:visible;transition:opacity 1500ms cubic-bezier(.4,0,.2,1),transform 1500ms cubic-bezier(.4,0,.2,1)}
.cash-demo[data-beat="0"] [data-slide="0"],.cash-demo[data-beat="1"] [data-slide="1"],.cash-demo[data-beat="2"] [data-slide="2"],.cash-demo[data-beat="3"] [data-slide="3"],.cash-demo[data-beat="4"] [data-slide="4"],.cash-demo[data-beat="5"] [data-slide="5"]{z-index:1;opacity:1;visibility:visible;transform:none}
:is(.cash-demo, .lineup-pda) .pda-paper>span,:is(.cash-demo, .lineup-pda) .pda-device .pda-card,:is(.cash-demo, .lineup-pda) .pda-signal,:is(.cash-demo, .lineup-pda) .shop-cart{animation:none}
:is(.cash-demo, .lineup-pda) .pda-device{font-size:16px;rotate:none}
:is(.cash-demo, .lineup-pda) .pda-paper{top:-4.8em;height:9.8em}
:is(.cash-demo, .lineup-pda) .pda-paper>span{translate:none;transform:translateY(100%)}
:is(.cash-demo, .lineup-pda) .shop-phone{width:248px;max-width:100%;justify-self:center;aspect-ratio:9/17.2;translate:none;rotate:none}
:is(.cash-demo, .lineup-pda) .shop-screen{position:relative;gap:0;padding:14px 12px 12px;overflow:hidden}
:is(.cash-demo, .lineup-pda) .demo-cart{gap:8px;min-height:0}
:is(.cash-demo, .lineup-pda) .shop-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin:0;text-align:left}
:is(.cash-demo, .lineup-pda) .shop-head span{grid-column:1 / -1}
:is(.cash-demo, .lineup-pda) .shop-head img{display:block;width:72px;height:auto;margin:0}
:is(.cash-demo, .lineup-pda) .demo-done img{display:block;width:104px;height:auto;margin:0 auto}
:is(.cash-demo, .lineup-pda) .shop-head small{margin-top:0}
:is(.cash-demo, .lineup-pda) .shop-head span b{display:block;margin-top:1px;font:700 13px/1.1 var(--font-body);letter-spacing:0;text-transform:none}
:is(.cash-demo, .lineup-pda) .shop-head em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:var(--color-primary-ink);font:700 12px/1 var(--font-body);font-style:normal}
:is(.cash-demo, .lineup-pda) .demo-cart .shop-tabs{margin:0;font-size:10px}
:is(.cash-demo, .lineup-pda) .shop-list{display:flex;flex-direction:column;gap:6px;min-height:0}
:is(.cash-demo, .lineup-pda) .shop-item{grid-template-columns:34px minmax(0,1fr) 22px;gap:8px;padding:5px 8px;border-radius:12px}
:is(.cash-demo, .lineup-pda) .shop-item .bottle-ph{width:34px;height:34px;border-radius:10px}
:is(.cash-demo, .lineup-pda) .shop-item .bottle-ph svg{width:13px;height:19px}
:is(.cash-demo, .lineup-pda) .shop-item span{min-width:0}
:is(.cash-demo, .lineup-pda) .shop-item b{display:block;font:700 12px/1.15 var(--font-body)}
:is(.cash-demo, .lineup-pda) .shop-item small{display:block;margin-top:1px;font:500 10px/1.2 var(--font-body);color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .shop-item em{width:22px;height:22px;font-size:11px}
:is(.cash-demo, .lineup-pda) .shop-item.is-pick{box-shadow:inset 0 0 0 2px var(--color-primary)}
:is(.cash-demo, .lineup-pda) .shop-cart{justify-content:center;margin-top:auto;padding:11px 16px}
:is(.cash-demo, .lineup-pda) .demo-done{z-index:3;gap:8px;background:var(--color-light-paper)}
:is(.cash-demo, .lineup-pda) .shop-pay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 16px;border-radius:28px;background:var(--color-light-paper);color:var(--color-light-ink);opacity:0}
:is(.cash-demo, .lineup-pda) .shop-pay small{font:700 10px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-light-muted);text-align:center}
:is(.cash-demo, .lineup-pda) .shop-lines{display:flex;flex-direction:column;gap:8px}
:is(.cash-demo, .lineup-pda) .shop-lines b{display:flex;justify-content:space-between;padding:11px 12px;border-radius:12px;background:var(--color-white);font:700 13px/1 var(--font-body)}
:is(.cash-demo, .lineup-pda) .shop-lines em{font-style:normal;color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .shop-method{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:var(--color-white);font:600 13px/1 var(--font-body)}
:is(.cash-demo, .lineup-pda) .shop-method-card{position:relative;flex:none;width:36px;height:23px;border-radius:4px;background:linear-gradient(150deg,#31405f,#161b28 70%)}
:is(.cash-demo, .lineup-pda) .shop-method-card::before{content:"";position:absolute;left:5px;top:6px;width:9px;height:7px;border-radius:1.5px;background:linear-gradient(160deg,#f6e2a8,#c9963a)}
:is(.cash-demo, .lineup-pda) .shop-pay strong{margin-top:4px;padding:13px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-primary-ink);text-align:center;font:700 14px/1 var(--font-body)}
:is(.cash-demo, .lineup-pda) .demo-done p{max-width:16em;margin:8px 0 0;font:600 13px/1.35 var(--font-body)}
:is(.cash-demo, .lineup-pda) .demo-done .demo-qr{width:92px;height:92px;margin:2px auto 0}
.demo-card{font-size:32px}
.demo-saldo{position:absolute;left:1.1em;bottom:.7em;color:var(--color-white);font:700 .42em/1.2 var(--font-body);font-style:normal}
.demo-saldo s{opacity:.45;margin-right:.35em}
.demo-cart,.demo-done{display:flex;flex-direction:column;gap:10px;height:100%}
.demo-done{position:absolute;inset:0;align-items:center;justify-content:center;padding:22px 14px;border-radius:28px;background:var(--color-light-paper);color:var(--color-light-ink);opacity:0;text-align:center}
.demo-done small{font:700 10px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-light-muted)}
.demo-done strong,.demo-chip{font-style:normal}
.demo-done.is-static{opacity:1}
.demo-qr{display:block;width:88px;height:88px}
.demo-qr path{fill:var(--color-light-ink)}
.pda-paper .demo-qr,.demo-ticket .demo-qr{width:2.6em;height:2.6em;margin-top:.4em}
.demo-totem-wrap,.demo-read{position:relative;display:grid;place-items:center}
.demo-totem{width:auto;max-width:min(280px,70%);max-height:420px}
.demo-ticket{position:relative;display:flex;flex-direction:column;align-items:center;width:92px;height:128px;padding:12px 10px 0;border-radius:6px 6px 0 0;background:var(--color-white);box-shadow:0 8px 18px var(--color-shadow)}
.demo-ticket i{align-self:stretch;height:4px;border-radius:var(--radius-pill);background:var(--color-rule)}
.demo-ticket i+i{align-self:flex-start;width:60%;margin-top:6px}
.demo-from-slot{position:absolute;left:50%;bottom:18%;transform:translate(-50%,78%)}
.demo-out{opacity:1;transform:none}
.demo-scan{position:absolute;left:8%;right:8%;top:16%;height:2px;background:var(--color-blue);opacity:0}
.demo-chip{margin-top:var(--space-md);padding:8px 12px;border-radius:var(--radius-pill);background:var(--color-blue-soft);color:var(--color-blue);font:700 var(--text-caption)/1 var(--font-body);opacity:0}
.demo-qr-wrap{position:relative}
.demo-chapter{margin:0 0 var(--space-sm);color:var(--color-blue);font:700 var(--text-label)/1.4 var(--font-body)}
.demo-copy h3{margin:0 0 var(--space-sm);font-size:var(--text-card);font-style:normal}
.demo-copy p{max-width:42ch;color:var(--color-muted)}
.demo-notes{display:flex;flex-direction:column;gap:16px;max-width:42ch;margin:22px 0 0}
.demo-notes dt{margin:0 0 4px;color:var(--color-blue);font:600 var(--text-secondary)/1.4 var(--font-body)}
.demo-notes dd{margin:0;color:var(--color-muted)}
.demo-copy .demo-key{max-width:42ch;margin-top:18px;padding-top:16px;border-top:1px solid var(--color-rule);color:var(--color-ink);font-weight:600}
.demo-controls{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md)}
.demo-rail{display:flex;flex:1;align-items:center;gap:8px;min-width:0}
.demo-rail>span{flex:none;color:var(--color-muted);font:700 var(--text-caption)/1 var(--font-body)}
.demo-rail button{flex:1;min-width:0;height:28px;padding:0;border:0;background:transparent}
.demo-rail button:focus,.demo-rail button:focus-visible{outline:none}
.demo-rail button i{display:block;height:3px;border-radius:var(--radius-pill);background:var(--color-rule);transform:scaleX(0);transform-origin:left center}
.demo-rail button.is-done i{transform:scaleX(1);background:var(--color-blue)}
.demo-pause{flex:none;min-height:36px;padding:8px 14px;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-transparent);color:var(--color-ink);font:700 var(--text-caption)/1 var(--font-body);white-space:nowrap}
.demo-pause:hover{transform:translateY(-1px)}
.demo-pause:active{transform:none}
.cash-demo.is-playing button[aria-current="true"] i{background:var(--color-blue);animation:demo-fill var(--demo-hold) linear both}
.cash-demo[data-beat="0"] .pda-row,.cash-demo[data-beat="0"] .pda-pay,.cash-demo[data-beat="3"] .kiosk-menu .pda-row,.cash-demo[data-beat="3"] .kiosk-menu .pda-pay{opacity:0}
.cash-demo[data-beat="1"] .pda-amount span+span,.cash-demo[data-beat="1"] .demo-tap-card{opacity:0}
.cash-demo[data-beat="1"] .demo-tap-card,.cash-demo[data-beat="0"] .pay-card,.cash-demo[data-beat="1"] .pay-card{transform:translate(168px,6px) rotate(16deg)}
.cash-demo[data-beat="2"] .shop-item,.cash-demo[data-beat="2"] .shop-cart{opacity:0}
.cash-demo[data-beat="4"] .dispatch-ticket{opacity:0;transform:translateY(14px)}
.cash-demo[data-beat="5"] .pda-row,.cash-demo[data-beat="5"] .pda-pay,.cash-demo[data-beat="5"] .pda-balance{opacity:0}
.cash-demo[data-beat="5"] .demo-tap-card{opacity:0;transform:translate(168px,6px) rotate(16deg)}
.cash-demo[data-beat="3"] .kiosk-pay,.cash-demo[data-beat="3"] .kiosk-pin .pay-card{opacity:0}
.cash-demo[data-beat="3"] .kiosk-pin .pay-card{transform:translate(36px,-2px) rotate(16deg)}
.cash-demo.is-playing[data-beat="0"] .pda-row,.cash-demo.is-playing[data-beat="0"] .pda-pay,.cash-demo.is-playing[data-beat="2"] .shop-item,.cash-demo.is-playing[data-beat="2"] .shop-cart,.cash-demo.is-playing[data-beat="3"] .kiosk-menu .pda-row,.cash-demo.is-playing[data-beat="3"] .kiosk-menu .pda-pay{animation:demo-in .5s var(--ease-out) both}
.cash-demo.is-playing[data-beat="0"] .pda-row:nth-child(1){animation-delay:.12s}
.cash-demo.is-playing[data-beat="0"] .pda-row:nth-child(2){animation-delay:.4s}
.cash-demo.is-playing[data-beat="0"] .pda-row:nth-child(3){animation-delay:.68s}
.cash-demo.is-playing[data-beat="0"] .pda-row:nth-child(4){animation-delay:.96s}
.cash-demo.is-playing[data-beat="0"] .pda-pay{animation-name:demo-in,demo-press;animation-duration:.5s,.35s;animation-delay:1.35s,1.95s;animation-timing-function:var(--ease-out),var(--ease-out);animation-fill-mode:both,both}
.cash-demo.is-playing[data-beat="0"] .pda-sensor{animation:demo-fade .35s var(--ease-out) 2.2s both,demo-out .25s var(--ease-out) 4.85s forwards}
.cash-demo.is-playing[data-beat="0"] .pay-card{animation:demo-tap .95s var(--ease-out) 2.4s both,demo-leave .7s var(--ease-in) 3.75s forwards}
.cash-demo.is-playing[data-beat="0"] .pay-flash{animation:demo-glow .26s var(--ease-in-out) 3.35s 2 both}
.cash-demo.is-playing[data-beat="0"] .pay-card .pay-nfc{animation:demo-blink .26s var(--ease-in-out) 3.35s 2 both}
.cash-demo.is-playing[data-beat="0"] .demo-print{animation:demo-eject 1.2s var(--ease-out) 4.9s both}
.cash-demo.is-playing[data-beat="0"] .pda-sale .pda-ok{animation:demo-fade .35s var(--ease-out) 4.5s both}
.cash-demo.is-playing[data-beat="1"] .pda-amount span+span{animation:demo-fade .35s var(--ease-out) 1.15s both}
.cash-demo.is-playing[data-beat="1"] .pda-amount span:first-child{animation:demo-out .35s var(--ease-out) 1.15s both}
.cash-demo.is-playing[data-beat="1"] .pda-presets i:nth-child(2){animation:demo-pick .4s var(--ease-out) 1.05s both}
.cash-demo.is-playing[data-beat="1"] .pda-pay{animation:demo-arm .4s var(--ease-out) 1.2s both,demo-press .35s var(--ease-out) 1.85s both}
.cash-demo.is-playing[data-beat="1"] .pda-sensor:not(.pda-cashwait){animation:demo-fade .35s var(--ease-out) 2.05s both,demo-out .3s var(--ease-out) 4.4s forwards}
.cash-demo.is-playing[data-beat="1"] .pda-cashwait{animation:demo-fade .35s var(--ease-out) 4.5s both}
.cash-demo.is-playing[data-beat="1"] .pay-card{animation:demo-tap .95s var(--ease-out) 2.2s both,demo-leave .7s var(--ease-in) 3.55s forwards}
.cash-demo.is-playing[data-beat="1"] .pay-flash{animation:demo-glow .26s var(--ease-in-out) 3.15s 2 both}
.cash-demo.is-playing[data-beat="1"] .pay-card .pay-nfc{animation:demo-blink .26s var(--ease-in-out) 3.15s 2 both}
.cash-demo.is-playing[data-beat="1"] .demo-tap-card{animation:demo-tap 1s var(--ease-out) 4.75s both,demo-leave .8s var(--ease-in) 6.25s forwards}
.cash-demo.is-playing[data-beat="1"] .demo-flash{animation:demo-glow .26s var(--ease-in-out) 5.75s 2 both}
.cash-demo.is-playing[data-beat="1"] .demo-tap-card .cash-card-nfc{animation:demo-blink .26s var(--ease-in-out) 5.75s 2 both}
.cash-demo.is-playing[data-beat="1"] .demo-print{animation:demo-eject 1.15s var(--ease-out) 7.15s both}
.cash-demo.is-playing[data-beat="1"] .pda-load .pda-ok{animation:demo-fade .4s var(--ease-out) 8.25s both}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(1){animation-delay:.12s}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(2){animation-delay:.26s}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(3){animation-delay:.4s}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(4){animation-delay:.54s}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(5){animation-delay:.68s}
.cash-demo.is-playing[data-beat="2"] .shop-list .shop-item:nth-child(6){animation-delay:.82s}
.cash-demo.is-playing[data-beat="2"] .shop-cart{animation:demo-in .5s var(--ease-out) 1.05s both,demo-press .35s var(--ease-out) 1.75s both}
.cash-demo.is-playing[data-beat="2"] .shop-pay{animation:demo-fade .4s var(--ease-out) 2.05s both,demo-out .35s var(--ease-out) 4.2s forwards}
.cash-demo.is-playing[data-beat="2"] .shop-pay strong{animation:demo-press .35s var(--ease-out) 3.45s both}
.cash-demo.is-playing[data-beat="2"] .demo-done{animation:demo-fade .55s var(--ease-out) 4.4s both}
.cash-demo.is-playing[data-beat="2"] .demo-done .demo-qr{animation:demo-in .5s var(--ease-out) 4.75s both}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(1){animation-delay:.08s}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(2){animation-delay:.2s}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(3){animation-delay:.32s}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(4){animation-delay:.44s}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(5){animation-delay:.56s}
.cash-demo.is-playing[data-beat="3"] .kiosk-grid .pda-row:nth-child(6){animation-delay:.68s}
.cash-demo.is-playing[data-beat="3"] .kiosk-menu .pda-pay{animation-delay:1.05s}
.cash-demo.is-playing[data-beat="3"] .kiosk-menu{animation:demo-out .4s var(--ease-out) 2.2s both}
.cash-demo.is-playing[data-beat="3"] .kiosk-pay{animation:demo-fade .45s var(--ease-out) 2.4s both}
.cash-demo.is-playing[data-beat="3"] .kiosk-pin .pay-card{animation:pin-tap .85s var(--ease-out) 3.15s both}
.cash-demo.is-playing[data-beat="3"] .kiosk-pin .pay-nfc{animation:demo-blink .26s var(--ease-in-out) 3.9s 2 both}
.cash-demo.is-playing[data-beat="3"] .kiosk-ticket{animation:demo-drop 1.15s var(--ease-out) 4.35s both}
.cash-demo.is-playing[data-beat="4"] .dispatch-ticket{animation:dispatch-in .7s var(--ease-out) .35s both}
.cash-demo.is-playing[data-beat="4"] .cam-view::after{animation:cam-scan .8s var(--ease-in-out) 1.15s 2,demo-out .25s ease 2.9s forwards}
.cash-demo.is-playing[data-beat="4"] .pda-wait{animation:demo-out .35s var(--ease-out) 3.05s forwards}
.cash-demo.is-playing[data-beat="4"] .pda-dispatch .pda-pay{animation:demo-press .35s var(--ease-out) 3.7s both}
.cash-demo.is-playing[data-beat="4"] .pda-dispatch .pda-ok{animation:demo-fade .4s var(--ease-out) 4.3s both}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-row,.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-pay{animation:demo-in .45s var(--ease-out) both}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-row:nth-child(1){animation-delay:.12s}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-row:nth-child(2){animation-delay:.32s}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-row:nth-child(3){animation-delay:.52s}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-row:nth-child(4){animation-delay:.72s}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-pay{animation-name:demo-in,demo-press;animation-duration:.45s,.35s;animation-delay:1.05s,1.7s;animation-timing-function:var(--ease-out),var(--ease-out);animation-fill-mode:both,both}
.cash-demo.is-playing[data-beat="5"] .pda-cashwait{animation:demo-fade .35s var(--ease-out) 1.95s both,demo-out .25s var(--ease-out) 3.85s forwards}
.cash-demo.is-playing[data-beat="5"] .demo-tap-card{animation:demo-tap .95s var(--ease-out) 2.15s both,demo-leave .7s var(--ease-in) 3.55s forwards}
.cash-demo.is-playing[data-beat="5"] .demo-flash{animation:demo-glow .26s var(--ease-in-out) 3.1s 2 both}
.cash-demo.is-playing[data-beat="5"] .demo-tap-card .cash-card-nfc{animation:demo-blink .26s var(--ease-in-out) 3.1s 2 both}
.cash-demo.is-playing[data-beat="5"] .demo-print{animation:demo-eject 1.15s var(--ease-out) 3.9s both}
.cash-demo.is-playing[data-beat="5"] .pda-consume .pda-ok{animation:demo-fade .35s var(--ease-out) 3.55s both}
.cash-demo.is-paused .demo-visual *,.cash-demo.is-paused .demo-rail i{animation-play-state:paused}
:is(.cash-demo, .lineup-pda) .pda-paper:has(.demo-print){left:16%;right:16%;top:-3.15em;height:9em}
:is(.cash-demo, .lineup-pda) .pda-device:has(.pda-sale) .demo-qr{width:2.05em;height:2.05em;margin-top:1.05em}
:is(.cash-demo, .lineup-pda) .ticket-logo{width:4.4em;height:auto;align-self:center;filter:brightness(0)}
:is(.cash-demo, .lineup-pda) .pda-paper .ticket-logo{margin-top:.7em}
:is(.cash-demo, .lineup-pda) .demo-print > :nth-child(2){margin-top:.55em}
:is(.cash-demo, .lineup-pda) .pda-device:has(.pda-sale) .demo-print > :nth-child(2){margin-top:.95em}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher > :nth-child(2){margin-top:16px}
:is(.cash-demo, .lineup-pda) .pda-sale,:is(.cash-demo, .lineup-pda) .pda-load,:is(.cash-demo, .lineup-pda) .pda-dispatch,:is(.cash-demo, .lineup-pda) .pda-consume{position:relative}
:is(.cash-demo, .lineup-pda) .pda-ok{position:absolute;inset:.35em;z-index:3;display:grid;place-items:center;border-radius:.3em;background:oklch(68% .15 152);opacity:0}
:is(.cash-demo, .lineup-pda) .pda-ok svg{width:2.7em;height:2.7em;fill:none;stroke:var(--color-white);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
:is(.cash-demo, .lineup-pda) .pda-sale .pda-body,:is(.cash-demo, .lineup-pda) .pda-load .pda-body,:is(.cash-demo, .lineup-pda) .pda-dispatch .pda-body,:is(.cash-demo, .lineup-pda) .pda-consume .pda-body{gap:.28em;background:var(--color-light-paper)}
:is(.cash-demo, .lineup-pda) .pda-sale .pda-row{padding:.5em .55em}
:is(.cash-demo, .lineup-pda) .pda-sale .pda-pay{padding:.8em .4em}
:is(.cash-demo, .lineup-pda) .pda-row{display:flex;align-items:center;justify-content:space-between;gap:.4em;padding:.85em .9em;border-radius:.65em;background:var(--color-white);color:var(--color-light-ink);font:600 .5em/1.2 var(--font-body)}
:is(.cash-demo, .lineup-pda) .pda-row>span{flex:1;min-width:0}
:is(.cash-demo, .lineup-pda) .bottle-ph{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;background:oklch(90% .01 80)}
:is(.cash-demo, .lineup-pda) .bottle-ph svg{width:9px;height:13px;fill:#c4843a}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-water{background:oklch(92% .03 230)}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-water svg{fill:#5aa0c4}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-fernet{background:oklch(90% .03 145)}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-fernet svg{fill:#3d6b45}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-wine{background:oklch(91% .03 10)}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-wine svg{fill:#8d3a4a}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-soda{background:oklch(93% .04 55)}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-soda svg{fill:#d06a2b}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-energy{background:oklch(94% .06 115)}
:is(.cash-demo, .lineup-pda) .bottle-ph.b-energy svg{fill:#6a8f1e}
:is(.cash-demo, .lineup-pda) .pda-row em{font-style:normal;color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .pda-row.is-pick{box-shadow:inset 0 0 0 2px var(--color-primary)}
:is(.cash-demo, .lineup-pda) .pda-amount{position:relative;display:grid;place-items:center;min-height:2.4em;color:var(--color-light-ink);font:700 1.15em/1 var(--font-display)}
:is(.cash-demo, .lineup-pda) .pda-amount span{grid-area:1/1}
:is(.cash-demo, .lineup-pda) .pda-load .pda-amount{flex:1;min-height:0;font-size:.95em}
:is(.cash-demo, .lineup-pda) .pda-load .pda-body{justify-content:flex-start}
:is(.cash-demo, .lineup-pda) .pda-load .pda-keys{margin-top:0}
:is(.cash-demo, .lineup-pda) .pda-load .pda-pay{margin-top:0;padding:.75em .4em;opacity:.38}
:is(.cash-demo, .lineup-pda) .pda-presets{display:flex;gap:.25em}
:is(.cash-demo, .lineup-pda) .pda-presets i{flex:1;padding:.55em 0;border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-light-muted);text-align:center;font:700 .4em/1 var(--font-body);font-style:normal}
:is(.cash-demo, .lineup-pda) .pda-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
:is(.cash-demo, .lineup-pda) .pda-keys i{display:grid;place-items:center;height:22px;border-radius:6px;background:var(--color-white);color:var(--color-light-ink);font:700 12px/1 var(--font-body);font-style:normal}
:is(.cash-demo, .lineup-pda) .pda-keys i:empty{visibility:hidden}
:is(.cash-demo, .lineup-pda) .demo-print{position:relative;align-items:stretch;gap:.28em;color:var(--color-light-ink)}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-print::after{content:"";position:absolute;left:.6em;right:.6em;bottom:6px;height:1px;background:repeating-linear-gradient(90deg,var(--color-light-ink) 0 2px,transparent 2px 4px)}
:is(.cash-demo, .lineup-pda) .demo-print small{font:700 .4em/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-light-muted);text-align:center}
:is(.cash-demo, .lineup-pda) .demo-print .demo-qr{align-self:center}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-print b{padding-inline:1.35em}
:is(.cash-demo, .lineup-pda) .demo-print b{display:flex;justify-content:space-between;gap:.6em;white-space:nowrap;font:600 .46em/1.2 var(--font-body)}
:is(.cash-demo, .lineup-pda) .demo-voucher{gap:.5em}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b{position:relative;align-items:baseline;padding-inline:10px;color:var(--color-light-muted);font-size:.36em}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b em{position:absolute;right:10px;bottom:0;color:var(--color-light-muted);text-align:right}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b:nth-of-type(2){color:var(--color-light-ink);font-size:.48em}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b:nth-of-type(2) em{color:var(--color-light-ink);font-weight:700}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b:nth-of-type(3){color:var(--color-light-ink);font-size:.44em;font-weight:700}
:is(.cash-demo, .lineup-pda) .pda-paper .demo-voucher b:nth-of-type(3) em{color:var(--color-light-ink);font-size:1em;font-weight:700}
:is(.cash-demo, .lineup-pda) .demo-print b em{font-style:normal;color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .demo-print strong{font:700 .95em/1 var(--font-display);text-align:center}
:is(.cash-demo, .lineup-pda) .demo-print b:not(:has(em)){justify-content:center}
:is(.cash-demo, .lineup-pda) .demo-flash,:is(.cash-demo, .lineup-pda) .pay-flash{position:absolute;z-index:3;top:4px;left:0;width:154px;height:92px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in oklch,var(--color-blue) 80%,white) 0%,var(--color-blue) 42%,transparent 72%);opacity:0;pointer-events:none;filter:blur(1px)}
:is(.cash-demo, .lineup-pda) .pda-sensor{position:absolute;inset:.35em;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;padding:1em .7em 1.15em;border-radius:.3em;background:oklch(58% .17 242);color:var(--color-white);text-align:center;opacity:0}
:is(.cash-demo, .lineup-pda) .pda-sensor small{font:700 .4em/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch,var(--color-white) 78%,transparent)}
:is(.cash-demo, .lineup-pda) .pda-sensor b{max-width:15em;font:700 .58em/1.2 var(--font-body)}
:is(.cash-demo, .lineup-pda) .pda-sensor em{max-width:16em;font:500 .42em/1.35 var(--font-body);font-style:normal;color:color-mix(in oklch,var(--color-white) 84%,transparent)}
:is(.cash-demo, .lineup-pda) .cash-art{position:relative;width:5.4em;height:4.7em;margin:.05em 0 .1em;font-style:normal}
:is(.cash-demo, .lineup-pda) .cash-art-glow{position:absolute;left:50%;top:.15em;width:3.5em;height:3.5em;transform:translateX(-50%);border-radius:50%;background:color-mix(in oklch,var(--color-white) 24%,transparent)}
:is(.cash-demo, .lineup-pda) .cash-art-card{position:absolute;left:50%;top:.7em;z-index:1;display:grid;place-items:center;width:2.7em;height:1.7em;transform:translateX(-50%);border-radius:.22em;border:1.5px solid var(--color-white);background:color-mix(in oklch,var(--color-white) 10%,transparent)}
:is(.cash-demo, .lineup-pda) .cash-art-chip{position:absolute;left:.28em;top:.36em;width:.48em;height:.34em;border-radius:.05em;border:1px solid color-mix(in oklch,var(--color-white) 88%,transparent);background:color-mix(in oklch,var(--color-white) 16%,transparent);box-shadow:inset 0 .1em 0 color-mix(in oklch,var(--color-white) 40%,transparent)}
:is(.cash-demo, .lineup-pda) .cash-art-card svg{width:1.05em;height:.7em;justify-self:end;margin-right:.18em;fill:none;stroke:var(--color-white);stroke-width:1.7;stroke-linecap:round}
:is(.cash-demo, .lineup-pda) .cash-art-phone{position:absolute;left:50%;bottom:0;width:1.85em;height:2.45em;transform:translateX(-50%);border:1.5px solid var(--color-white);border-radius:.3em .3em .18em .18em;background:color-mix(in oklch,var(--color-white) 8%,transparent)}
:is(.cash-demo, .lineup-pda) .pay-card{position:absolute;z-index:4;top:0;left:10px;width:10em;aspect-ratio:1.586;border-radius:.55em;background:linear-gradient(150deg,#31405f,#161b28 62%);border:1px solid color-mix(in oklch,var(--color-white) 16%,transparent);box-shadow:0 .6em 1.4em var(--color-shadow);font-size:12.5px;opacity:0}
:is(.cash-demo, .lineup-pda) .pay-chip{position:absolute;left:1.15em;top:1.7em;width:1.7em;height:1.3em;border-radius:.22em;background:linear-gradient(160deg,#f6e2a8,#c9963a);box-shadow:inset 0 0 0 1px rgb(90 60 10 / .35),inset 0 .42em 0 rgb(255 255 255 / .18),inset 0 -.42em 0 rgb(120 80 20 / .25)}
:is(.cash-demo, .lineup-pda) .pay-nfc{position:absolute;top:.55em;right:.7em;width:1.15em;height:.95em;fill:none;stroke:var(--color-white);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(.cash-demo, .lineup-pda) .pay-mc{position:absolute;right:.7em;bottom:.55em;width:2.5em;height:1.5em}
:is(.cash-demo, .lineup-pda) .pay-mc circle:first-child{fill:#eb001b}
:is(.cash-demo, .lineup-pda) .pay-mc circle:last-child{fill:#f79e1b}
:is(.cash-demo, .lineup-pda) .demo-tap-card{position:absolute;z-index:4;top:0;left:10px;font-size:12.5px}
.kiosk{position:relative;width:min(320px,100%);height:640px}
.kiosk-body{position:relative;z-index:1;width:214px;padding:18px 14px 14px;border:1px solid var(--color-rule);border-radius:34px 34px 22px 22px;background:linear-gradient(180deg,var(--color-surface-raised),var(--color-pda-body));box-shadow:0 22px 40px var(--color-shadow)}
.kiosk-cam{position:absolute;top:8px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--color-dark);box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--color-white) 18%,transparent);transform:translateX(-50%)}
.kiosk-screen{position:relative;height:268px;overflow:clip;border-radius:18px;background:var(--color-light-paper);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-light-ink) 8%,transparent)}
.kiosk-menu,.kiosk-pay{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:10px}
.kiosk-menu small{font:700 9px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-light-muted)}
.kiosk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-height:0}
.kiosk-pay{align-items:center;justify-content:center;gap:6px;padding:14px 12px;background:oklch(58% .17 242);color:var(--color-white);text-align:center}
.kiosk-pay small{font:700 9px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch,var(--color-white) 78%,transparent)}
.kiosk-pay b{max-width:14em;font:700 13px/1.2 var(--font-body)}
.kiosk-pay em{max-width:16em;font:500 10px/1.35 var(--font-body);font-style:normal;color:color-mix(in oklch,var(--color-white) 84%,transparent)}
.kiosk .cash-art{width:4em;height:3.4em}
.kiosk .pda-row{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:7px 8px 8px;border-radius:10px;font-size:10px}
.kiosk .pda-row em{position:absolute;top:6px;right:6px;font-size:10px}
.kiosk .bottle-ph{width:22px;height:22px;border-radius:6px}
.kiosk .bottle-ph svg{width:9px;height:13px}
.kiosk .pda-pay{margin-top:auto;padding:8px;font-size:11px}
.kiosk-pin{position:absolute;z-index:2;top:118px;left:220px;display:flex;flex-direction:column;gap:4px;width:61px;padding:6px 5px 7px;border:1px solid var(--color-rule);border-radius:12px;background:linear-gradient(180deg,#232838,#141820);box-shadow:10px 14px 22px var(--color-shadow)}
.kiosk-pin .pin-reader{height:26px;border-radius:6px;background:#0d1016;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-white) 10%,transparent)}
.kiosk-pin .pin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.kiosk-pin .pin-keys i{height:6px;border-radius:2px;background:color-mix(in oklch,var(--color-white) 14%,transparent)}
.kiosk-pin .pay-card{top:-1px;left:1px;width:6.6em;font-size:7px}
.kiosk-slot{position:absolute;z-index:2;left:50%;top:calc(100% + 14px);width:78px;height:6px;margin:0;border-radius:2px;background:var(--color-dark);box-shadow:inset 0 2px 3px var(--color-shadow);transform:translateX(-50%)}
.kiosk-out{position:absolute;z-index:3;left:50%;top:calc(100% + 18px);width:78px;height:118px;overflow:clip;transform:translateX(-50%);pointer-events:none}
.kiosk-ticket{position:relative;left:auto;top:auto;width:68px;height:auto;margin:0 auto;padding:0 0 6px;border-radius:0 0 10px 10px;background:var(--color-white);color:var(--color-light-ink);box-shadow:0 8px 14px var(--color-shadow);font-size:10px;transform:translateY(-110%)}
.kiosk-ticket .demo-print{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:2px;padding:0;background:transparent;box-shadow:none;transform:none;animation:none}
.kiosk-ticket .ticket-logo{width:36px;margin-top:6px}
.kiosk-ticket .demo-print > :nth-child(2){margin-top:4px}
.kiosk-ticket .demo-print b{padding-inline:7px;font-size:6.5px}
.kiosk-ticket .demo-qr{width:26px;height:26px;margin:6px auto 14px}
.kiosk-ticket .demo-print::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:1px;background:repeating-linear-gradient(90deg,var(--color-light-ink) 0 2px,transparent 2px 4px)}
.kiosk-stand{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;width:214px;margin-top:-1px}
.kiosk-stand i{width:148px;height:164px;border:1px solid var(--color-rule);border-top:0;border-radius:0 0 18px 18px;background:linear-gradient(180deg,var(--color-pda-body),var(--color-surface-raised))}
.kiosk-stand b{width:176px;height:18px;margin-top:-1px;border-radius:0 0 12px 12px;background:var(--color-dark);box-shadow:0 12px 20px var(--color-shadow)}
:is(.cash-demo, .lineup-pda) .pda-device:has(.pda-dispatch) .pda-slot,:is(.cash-demo, .lineup-pda) .pda-device:has(.pda-dispatch) .pda-display{z-index:2}
:is(.cash-demo, .lineup-pda) .pda-dispatch .pda-wait{background:oklch(32% .008 260);color:var(--color-white)}
:is(.cash-demo, .lineup-pda) .cam-view{position:relative;width:7.4em;padding:7px;background:linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 0 0/14px 2px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 0 0/2px 14px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 100% 0/14px 2px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 100% 0/2px 14px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 0 100%/14px 2px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 0 100%/2px 14px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 100% 100%/14px 2px,linear-gradient(oklch(42% .14 250),oklch(42% .14 250)) 100% 100%/2px 14px;background-repeat:no-repeat}
:is(.cash-demo, .lineup-pda) .cam-view::after{content:"";position:absolute;z-index:2;left:12px;right:12px;top:34%;height:2px;border-radius:2px;background:var(--color-blue);box-shadow:0 0 8px var(--color-blue);opacity:0}
:is(.cash-demo, .lineup-pda) .pda-dispatch .pda-wait > b{color:var(--color-white);font-size:.5em;letter-spacing:.08em;text-transform:uppercase}
:is(.cash-demo, .lineup-pda) .pda-wait .dispatch-ticket{position:relative;top:auto;left:auto;right:auto;z-index:1;width:auto}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .demo-print{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:2px;padding:0 0 8px;border-radius:4px;background:var(--color-white);box-shadow:0 6px 12px var(--color-shadow);transform:none}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .ticket-logo{width:3.2em;margin-top:.45em}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .demo-print > :nth-child(2){margin-top:.35em}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .demo-print b{padding-inline:8px;font-size:7px}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .demo-qr{width:2.3em;height:2.3em;margin:6px auto 6px}
:is(.cash-demo, .lineup-pda) .dispatch-ticket .demo-print::after{content:"";position:absolute;left:.5em;right:.5em;bottom:4px;height:1px;background:repeating-linear-gradient(90deg,var(--color-light-ink) 0 2px,transparent 2px 4px)}
:is(.cash-demo, .lineup-pda) .pda-wait,:is(.cash-demo, .lineup-pda) .pda-balance{position:absolute;inset:.35em;z-index:2;display:flex;flex-direction:column;justify-content:center;border-radius:.3em;background:var(--color-light-paper);color:var(--color-light-ink)}
:is(.cash-demo, .lineup-pda) .pda-wait{align-items:center;gap:.4em;padding:1em .75em;text-align:center}
:is(.cash-demo, .lineup-pda) .pda-wait small{font:700 .4em/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .pda-wait b{font:700 .62em/1.2 var(--font-body)}
:is(.cash-demo, .lineup-pda) .pda-wait em{max-width:16em;font:500 .42em/1.35 var(--font-body);font-style:normal;color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .pda-balance{gap:.55em;padding:1.1em .85em}
:is(.cash-demo, .lineup-pda) .pda-balance b{display:flex;justify-content:space-between;align-items:baseline;font:600 .48em/1.2 var(--font-body);color:var(--color-light-muted)}
:is(.cash-demo, .lineup-pda) .pda-balance b:nth-child(2){color:var(--color-light-ink);font-size:.58em}
:is(.cash-demo, .lineup-pda) .pda-balance b:nth-child(3){color:var(--color-light-ink);font-weight:700}
:is(.cash-demo, .lineup-pda) .pda-balance em{font-style:normal}
@keyframes dispatch-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cam-scan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:1;transform:translateY(46px)}}
@keyframes demo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes demo-eject{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes demo-enter{from{transform:translateX(42px)}to{transform:none}}
@keyframes demo-fade{from{opacity:0}to{opacity:1}}
@keyframes demo-blink{0%,100%{opacity:1}40%{opacity:.25}}
@keyframes demo-slot{from{transform:translate(-50%,78%)}to{transform:translate(-50%,0)}}
@keyframes demo-scan{0%{opacity:0;transform:translateY(0)}10%{opacity:1}100%{opacity:1;transform:translateY(96px)}}
@keyframes demo-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes demo-out{to{opacity:0}}
@keyframes demo-press{0%,100%{transform:none}45%{transform:scale(.96)}}
@keyframes demo-pick{to{box-shadow:inset 0 0 0 2px var(--color-primary)}}
@keyframes demo-tap{from{opacity:0;transform:translate(168px,6px) rotate(16deg)}to{opacity:1;transform:rotate(-7deg)}}
@keyframes demo-leave{from{opacity:1;transform:rotate(-7deg)}to{opacity:0;transform:translate(176px,8px) rotate(14deg)}}
@keyframes demo-glow{0%,100%{opacity:0;transform:scale(.8)}45%{opacity:.95;transform:scale(1.08)}}
@keyframes demo-arm{from{opacity:.38}to{opacity:1}}
@keyframes demo-insert{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pin-tap{from{opacity:0;transform:translate(36px,-2px) rotate(16deg)}to{opacity:1;transform:translate(4px,-12px) rotate(-8deg)}}
@keyframes demo-drop{from{transform:translateY(-110%)}to{transform:translateY(6px)}}
@media(max-width:768px){.cash-demo{padding:28px var(--page-gutter) 12px}.demo-stage{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:var(--space-md)}.demo-visual{min-height:500px}.demo-controls{align-items:stretch}}
@media(max-width:414px){.demo-visual{min-height:460px}:is(.cash-demo, .lineup-pda) .pda-device{font-size:13px}.demo-card{font-size:22px}.demo-rail>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.kiosk{height:520px}}
@media(prefers-reduced-motion:reduce){.demo-slide{transform:none;transition:opacity 150ms linear}:is(.cash-demo, .lineup-pda) .demo-print,:is(.cash-demo, .lineup-pda) .demo-from-slot,:is(.cash-demo, .lineup-pda) .kiosk-ticket,:is(.cash-demo, .lineup-pda) .demo-scan,:is(.cash-demo, .lineup-pda) .demo-chip,:is(.cash-demo, .lineup-pda) .demo-after,:is(.cash-demo, .lineup-pda) .cash-card,:is(.cash-demo, .lineup-pda) .demo-done,:is(.cash-demo, .lineup-pda) .pda-line,:is(.cash-demo, .lineup-pda) .pda-row,:is(.cash-demo, .lineup-pda) .pda-pay,:is(.cash-demo, .lineup-pda) .shop-item,:is(.cash-demo, .lineup-pda) .shop-cart,:is(.cash-demo, .lineup-pda) .demo-amount,:is(.cash-demo, .lineup-pda) .demo-qr,:is(.cash-demo, .lineup-pda) .kiosk-menu,:is(.cash-demo, .lineup-pda) .kiosk-pay,:is(.cash-demo, .lineup-pda) .pin-card,:is(.cash-demo, .lineup-pda) .pda-amount span,.demo-rail i{animation:none !important}:is(.cash-demo, .lineup-pda) .pda-line,:is(.cash-demo, .lineup-pda) .pda-row,:is(.cash-demo, .lineup-pda) .pda-pay,:is(.cash-demo, .lineup-pda) .shop-item,:is(.cash-demo, .lineup-pda) .shop-cart,:is(.cash-demo, .lineup-pda) .demo-done,:is(.cash-demo, .lineup-pda) .demo-amount,:is(.cash-demo, .lineup-pda) .demo-chip,:is(.cash-demo, .lineup-pda) .demo-after,:is(.cash-demo, .lineup-pda) .demo-saldo s,:is(.cash-demo, .lineup-pda) .kiosk-pay,:is(.cash-demo, .lineup-pda) .pin-card,:is(.cash-demo, .lineup-pda) .pda-amount span+span{opacity:1}:is(.cash-demo, .lineup-pda) .kiosk-menu,:is(.cash-demo, .lineup-pda) .pda-amount span:first-child{opacity:0}:is(.cash-demo, .lineup-pda) .cash-card,:is(.cash-demo, .lineup-pda) .demo-print,:is(.cash-demo, .lineup-pda) .demo-tap-card,:is(.cash-demo, .lineup-pda) .pin-card,:is(.cash-demo, .lineup-pda) .dispatch-ticket{transform:none;opacity:1}:is(.cash-demo, .lineup-pda) .pda-wait,:is(.cash-demo, .lineup-pda) .pda-balance{opacity:0}:is(.cash-demo, .lineup-pda) .kiosk-ticket{transform:translateY(6px)}
:is(.cash-demo, .lineup-pda) .demo-tap-card,:is(.cash-demo, .lineup-pda) .pay-card{transform:translate(176px,8px) rotate(14deg);opacity:0}
:is(.cash-demo, .lineup-pda) .pda-sensor,:is(.cash-demo, .lineup-pda) .shop-pay{opacity:0}
:is(.cash-demo, .lineup-pda) .pda-load .pda-pay{opacity:1}
:is(.cash-demo, .lineup-pda) .pda-ok{opacity:1}}
.page-cashless .operations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-cashless .operations-grid article>p{margin:14px 0 0;max-width:none;color:var(--color-white)}
.equipment-lineup .operations-note{max-width:68ch}
@media(max-width:1100px){.page-cashless .operations-grid{grid-template-columns:minmax(0,1fr)}}
.page-cashless .detail-hero{display:block;padding-bottom:104px}
.page-cashless .cash-demo{padding-top:56px;padding-bottom:72px}
.page-cashless .cash-operations{padding-top:80px;padding-bottom:96px}
.page-cashless .equipment-lineup{padding-top:64px;padding-bottom:112px}
@media(max-width:768px){
.page-cashless .detail-hero{padding-bottom:64px}
.page-cashless .cash-demo{padding-top:40px;padding-bottom:48px}
.page-cashless .cash-operations{padding-top:56px;padding-bottom:64px}
.page-cashless .equipment-lineup{padding-top:48px;padding-bottom:80px}
}
.page-cashless .detail-hero>.cash-overview{display:flex;grid-column:1/-1;width:100%;max-width:none;justify-self:stretch}
.page-cashless .detail-hero>div:not(.cash-overview){align-items:end;grid-template-columns:minmax(0,1.45fr) minmax(200px,min(400px,34%))}
.page-cashless .detail-hero h1{grid-row:3;max-width:12em;line-height:.94}
.page-cashless .detail-hero .lede{grid-column:1;grid-row:4;margin-top:16px;max-width:none;color:var(--color-white);line-height:1.55}
.page-cashless .hero-side{grid-column:2;grid-row:3/6;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
.page-cashless .sale-scene{max-width:none;aspect-ratio:100/60}
.sale-scene .scene-panel{right:auto;top:auto;width:48cqi}
.sale-scene .sale-live{right:0;top:0;width:42cqi}
.sale-scene .sale-rank{left:0;top:0;width:50cqi}
.sale-scene .sale-rank ol{margin:0;padding:0;list-style:none;display:flex;align-items:end;gap:1cqi}
.sale-scene .sale-rank li{display:flex;flex:1;flex-direction:column;align-items:center;gap:.45cqi;min-width:0}
.sale-scene .sale-rank b{color:var(--color-muted);font:800 max(12px,2.6cqi)/1 var(--font-display);letter-spacing:-.04em}
.sale-scene .sale-rank li:first-child b{color:var(--color-accent)}
.sale-scene .sale-rank span{max-width:100%;overflow:hidden;font:600 max(10px,1.6cqi)/1.1 var(--font-body);text-overflow:ellipsis;white-space:nowrap}
.sale-scene .bottle-ph{display:grid;place-items:center;width:max(22px,5.4cqi);height:max(22px,5.4cqi);border-radius:8px;background:oklch(90% .01 80)}
.sale-scene .bottle-ph svg{width:42%;height:64%;fill:#c4843a}
.sale-scene .sale-rank li:first-child .bottle-ph{width:max(28px,6.8cqi);height:max(28px,6.8cqi)}
.sale-scene .bottle-ph.b-water{background:oklch(92% .03 230)}
.sale-scene .bottle-ph.b-water svg{fill:#5aa0c4}
.sale-scene .bottle-ph.b-fernet{background:oklch(90% .03 145)}
.sale-scene .bottle-ph.b-fernet svg{fill:#3d6b45}
.sale-scene .sale-chart{right:0;bottom:0;width:38cqi}
.sale-scene .sale-cols{display:flex;align-items:end;gap:1.2cqi;height:max(44px,11cqi)}
.sale-scene .sale-cols>span{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55cqi;height:100%}
.sale-scene .sale-cols i{display:block;width:max(7px,1.7cqi);border-radius:99px;background:var(--color-accent)}
.sale-scene .col-a{height:88%}
.sale-scene .col-b{height:46%;background:var(--color-blue)}
.sale-scene .col-c{height:64%}
.sale-scene .sale-cols b{color:var(--color-muted);font:500 max(9px,1.4cqi)/1 var(--font-body)}
.page-cashless .hero-side .button{align-self:end;margin-top:0}
@media(max-width:768px){.page-cashless .detail-hero>div:not(.cash-overview){display:block}.page-cashless .hero-side{margin-top:28px;width:min(480px,100%)}.page-cashless .hero-side .button{align-self:start}}
.page-cashless .cash-section-head h2{line-height:1.02}
.page-cashless .cash-section-head>p,:is(.cash-demo, .lineup-pda) .cash-section-head p,.page-cashless .demo-copy p,.page-cashless .lineup-body>p{color:var(--color-white)}
.page-cashless .cash-section-head>p{max-width:68ch}
.page-cashless .lineup-body>p{max-width:none}
.page-cashless .demo-copy p{max-width:40em}
:is(.cash-demo, .lineup-pda) .cash-section-head{display:block}
:is(.cash-demo, .lineup-pda) .cash-section-head>div{max-width:none}
:is(.cash-demo, .lineup-pda) .cash-section-head p{margin-top:16px;max-width:68ch;font-size:var(--text-body);line-height:1.55;color:var(--color-white)}
.lineup-pda{display:flex;justify-content:center;align-items:flex-end;width:100%}
.lineup-feature .lineup-illustration{align-items:center;padding:64px 40px 48px}
.lineup-pda .pda-device{font-size:clamp(20px,2vw,28px)}
.lineup-pda .pda-paper>span{animation:none;translate:0 100%}
.contact .form-status{margin:0 0 16px;max-width:none;color:var(--color-light-ink);font-size:15px;line-height:1.5}
.contact .form-status.is-error{color:#8f2d2d}
.contact .captcha{margin:0 0 20px;min-height:78px}