/* aquasale.us — one page. Brand palette (brand/palette.md) and the brand face, Archivo, whose width axis
   does the heavy lifting: extra-wide heavy display type against normal-width text. The one loud thing on
   the page is the working register in the hero; everything around it stays quiet. */

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/Archivo.ttf') format('truetype');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

:root {
	--mist-50: #f0fcfc;
	--mist-100: #eaf5f6;
	--mist-200: #dfeaeb;
	--mist-300: #cdd8d9;
	--mist-400: #a9c0c1;
	--mist-600: #617678;
	--aqua-300: #72ded9;
	--aqua-400: #00cec9;
	--aqua-700: #00716e;
	--aqua-800: #055452;
	--deep-700: #30575d;
	--deep-800: #173e45;
	--deep-900: #022c32;
	--deep-950: #001a1f;
	--buoy: #d9512a;
	--kelp: #2e8a66;

	--font: 'Archivo', system-ui, sans-serif;
	--gutter: clamp(20px, 5vw, 72px);
	--max: 1280px;
	--r: 10px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--mist-100);
	color: var(--deep-900);
	font: 400 1.0625rem/1.55 var(--font);
	font-stretch: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p {
	margin: 0;
}

a {
	color: var(--aqua-700);
}

:focus-visible {
	outline: 3px solid var(--aqua-400);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 10;
	padding: 10px 14px;
	border-radius: var(--r);
	background: var(--deep-900);
	color: #fff;
}

.skip:focus {
	top: 12px;
}

/* ---------------------------------------------------------------- shared */

.section-title {
	font-size: clamp(2.1rem, 4.4vw, 3.6rem);
	font-weight: 850;
	font-stretch: 125%;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.button,
.hub-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--r);
	background: var(--aqua-700);
	color: #fff;
	font: 700 1.0625rem/1 var(--font);
	font-stretch: 112%;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, transform 120ms ease;
}

.button:hover,
.hub-button:hover {
	background: var(--aqua-800);
}

.button:active,
.hub-button:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------- header */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 22px var(--gutter);
}

.brand img {
	width: clamp(132px, 14vw, 172px);
	height: auto;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 28px);
}

.header-link {
	color: var(--deep-900);
	font-weight: 600;
	text-decoration: none;
}

.header-link:hover {
	color: var(--aqua-700);
}

.hub-button {
	min-height: 50px;
	padding: 0 24px;
}

/* ---------------------------------------------------------------- hero */

.hero {
	overflow: hidden;
}

.hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
	align-items: start;
	gap: clamp(28px, 3.4vw, 56px) clamp(32px, 4vw, 64px);
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(72px, 8vw, 112px);
	isolation: isolate;
}

/* The brand aqua as one big fill: a pool the register sits in, cut off where the hero ends. */
.hero-inner::before {
	content: '';
	position: absolute;
	z-index: -1;
	right: -4%;
	top: 30%;
	width: min(66vw, 880px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--aqua-400);
}

.nowrap {
	white-space: nowrap;
}

.hero h1 {
	grid-column: 1 / -1;
	max-width: 11ch;
	font-size: clamp(2.8rem, 8.2vw, 7.6rem);
	font-weight: 870;
	font-stretch: 125%;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.hero-side {
	padding-top: 6px;
}

.demo-wrap {
	position: relative;
}

.demo-hint {
	margin-top: 14px;
	text-align: center;
	color: var(--deep-900);
	font-weight: 700;
	font-stretch: 112%;
	transition: opacity 300ms ease;
}

.demo-hint.is-gone {
	opacity: 0;
}

/* ---------------------------------------------------------------- the register (demo) */

.tablet {
	container-type: inline-size;
	padding: clamp(10px, 1.6vw, 18px);
	border-radius: clamp(20px, 2.6vw, 34px);
	background: var(--deep-950);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.06) inset,
		0 40px 80px -36px rgb(0 26 31 / 0.65),
		0 18px 30px -18px rgb(0 26 31 / 0.5);
}

.tablet-screen {
	position: relative;
	aspect-ratio: 16 / 10.4;
	overflow: hidden;
	border-radius: clamp(10px, 1.4vw, 16px);
	background: #071b20;
	color: #eaf5f6;
	font-size: 2.2cqi;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.reg-top {
	display: flex;
	align-items: center;
	gap: 1.4cqi;
	padding: 1.4cqi 1.8cqi;
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.net {
	display: inline-flex;
	align-items: center;
	gap: 0.8cqi;
	padding: 0.5cqi 1.3cqi;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 99em;
	background: transparent;
	color: inherit;
	font: 600 1.9cqi/1 var(--font);
	cursor: pointer;
}

.net-dot {
	width: 1.2cqi;
	height: 1.2cqi;
	border-radius: 50%;
	background: #39d98a;
	box-shadow: 0 0 0 0.45cqi rgb(57 217 138 / 0.22);
}

.net:not(.is-online) .net-dot {
	background: #ffb02e;
	box-shadow: 0 0 0 0.45cqi rgb(255 176 46 / 0.22);
}

.queue {
	color: #ffcf7a;
	font-size: 1.9cqi;
	font-weight: 600;
}

.reg-order {
	margin-left: auto;
	color: var(--mist-400);
	font-size: 1.9cqi;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Each design fills this column its own way: bars, a body, side panels. */
.screen-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}

.reg-body {
	flex: 1;
	display: grid;
	grid-template-columns: 30% 1fr;
	min-height: 0;
}

.net-wrap {
	display: inline-flex;
	align-items: center;
	gap: 1.4cqi;
}

/* An order column that holds its own number, total and pay button (tacos, kettle corn, coffee). */
.reg-side {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.reg-side .reg-ticket {
	flex: 1;
	border: 0;
}

.reg-ticket {
	position: relative;
	min-height: 0;
	overflow: hidden;
	border-right: 1px solid rgb(255 255 255 / 0.08);
}

.ticket {
	display: flex;
	flex-direction: column;
	gap: 0.9cqi;
	margin: 0;
	padding: 1.4cqi;
	list-style: none;
}

.line {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1cqi;
	padding: 1cqi 1.2cqi;
	border-radius: 1cqi;
	background: rgb(255 255 255 / 0.07);
	outline: 0.35cqi solid transparent;
	animation: line-in 160ms ease-out;
}

.line.is-current {
	background: rgb(255 255 255 / 0.13);
	outline-color: var(--aqua-400);
}

.line-size {
	display: grid;
	place-items: center;
	width: 4.2cqi;
	height: 4.2cqi;
	border-radius: 0.8cqi;
	background: rgb(255 255 255 / 0.12);
	font-weight: 850;
	font-stretch: 125%;
	font-size: 2.2cqi;
}

.line-name {
	min-width: 0;
	overflow: hidden;
	color: var(--mist-400);
	font-size: 1.7cqi;
	line-height: 1.25;
}

.line-price {
	font-weight: 700;
	font-size: 1.9cqi;
	font-variant-numeric: tabular-nums;
}

.ticket-empty[hidden] {
	display: none;
}

.ticket-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgb(255 255 255 / 0.35);
	font-size: 1.9cqi;
}

@keyframes line-in {
	from {
		opacity: 0;
		transform: translateY(-0.8cqi) scale(0.97);
	}
}

.reg-pad {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 1.2cqi;
	min-height: 0;
	padding: 1.4cqi;
}

.sizes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2cqi;
}

.size,
.flavor,
.pay {
	position: relative;
	border: 0;
	font-family: var(--font);
	cursor: pointer;
	transition: transform 70ms ease, filter 70ms ease;
}

.size:active,
.flavor:active,
.pay:active:not(:disabled) {
	transform: scale(0.96);
	filter: brightness(1.12);
}

.size {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1cqi;
	height: 8cqi;
	border-radius: 1.2cqi;
	background: rgb(255 255 255 / 0.13);
	color: #fff;
	font-size: 3.6cqi;
	font-weight: 850;
	font-stretch: 125%;
	outline: 0.4cqi solid transparent;
	outline-offset: -0.4cqi;
}

.size small {
	font-size: 1.6cqi;
	font-weight: 500;
	font-stretch: 100%;
	opacity: 0.7;
}

.size.is-active {
	background: rgb(255 255 255 / 0.26);
	outline-color: #fff;
}

.flavors {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 1.2cqi;
	min-height: 0;
}

/* AquaSale's striped flavor buttons: the flavor's colors at 45°, the name in black outlined in white. */
.flavor {
	display: grid;
	place-items: center;
	padding: 0.6cqi;
	border-radius: 1.2cqi;
	background: repeating-linear-gradient(45deg, var(--a) 0 2.6cqi, var(--b) 2.6cqi 5.2cqi);
	color: #000;
	font-size: 1.9cqi;
	font-weight: 850;
	line-height: 1.05;
	text-align: center;
	text-shadow: 0 0 0.35cqi #fff, 0 0 0.35cqi #fff, 0 0 0.35cqi #fff, 0 0 0.35cqi #fff;
	outline: 0.45cqi solid transparent;
	outline-offset: -0.45cqi;
	opacity: 0.86;
}

.flavor.is-active {
	opacity: 1;
	outline-color: #fff;
}

.reg-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2cqi;
	padding: 1.2cqi 1.6cqi;
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.reg-total {
	font-size: 4.4cqi;
	font-weight: 870;
	font-stretch: 112%;
	font-variant-numeric: tabular-nums;
}

.pay {
	height: 7.2cqi;
	padding: 0 4.4cqi;
	border-radius: 1.2cqi;
	background: var(--aqua-400);
	color: var(--deep-950);
	font-size: 2.8cqi;
	font-weight: 850;
	font-stretch: 112%;
}

.pay:disabled {
	opacity: 0.35;
	cursor: default;
}

.ripple {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* The demo's buttons take keyboard focus like any button. */
.tablet-screen button:focus-visible {
	outline: 0.45cqi solid var(--aqua-300);
	outline-offset: 0.2cqi;
}

/* ---------------------------------------------------------------- design switcher: arrows and dots */

.demo-stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: 'prev tablet next' '. nav .';
	align-items: center;
	gap: 18px clamp(10px, 1.4vw, 18px);
}

.chev-prev {
	grid-area: prev;
}

.chev-next {
	grid-area: next;
}

.demo-stage .tablet {
	grid-area: tablet;
}

.chev {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--deep-900);
	color: #fff;
	cursor: pointer;
	transition: background-color 120ms ease, transform 120ms ease;
}

.chev svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chev:hover {
	background: var(--aqua-700);
}

.chev:active {
	transform: scale(0.94);
}

.demo-nav {
	grid-area: nav;
	display: flex;
	justify-content: center;
}

.dots {
	display: flex;
	gap: 6px;
}

.dot {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dot::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-radius: 99em;
	background: var(--deep-900);
	opacity: 0.3;
	transition: width 200ms ease, opacity 200ms ease;
}

.dot[aria-selected='true']::before {
	width: 24px;
	opacity: 1;
}

/* ---------------------------------------------------------------- tap-to-add menus */

.tablet-screen[data-theme='kettle'] .reg-body {
	grid-template-columns: 1fr 31%;
}

.tablet-screen[data-theme='tacos'] .reg-body {
	grid-template-columns: 34% 1fr;
}

.menu {
	display: grid;
	gap: 1.2cqi;
	min-height: 0;
	padding: 1.4cqi;
}

.item {
	position: relative;
	display: grid;
	align-content: center;
	gap: 0.4cqi;
	border: 0;
	font-family: var(--font);
	cursor: pointer;
	transition: transform 70ms ease, filter 70ms ease;
}

.item:active {
	transform: scale(0.96);
	filter: brightness(1.08);
}

.item[hidden] {
	display: none;
}

.item-count:empty {
	display: none;
}

.item-count {
	position: absolute;
	top: 0.8cqi;
	right: 0.8cqi;
	display: grid;
	place-items: center;
	min-width: 3.2cqi;
	height: 3.2cqi;
	padding: 0 0.8cqi;
	border-radius: 99em;
	font-size: 1.8cqi;
	font-weight: 800;
}

/* Kettle corn: a bright stand. Red bags, butter-yellow drinks, tall condensed type, order on the right. */
.tablet-screen[data-theme='kettle'] {
	background: #fff4d6;
	color: #3a1408;
}

.tablet-screen[data-theme='kettle'] .reg-side {
	gap: 1.2cqi;
	padding: 1.8cqi 1.6cqi 1.6cqi;
	border-left: 1px solid rgb(58 20 8 / 0.14);
	background: #fffaf0;
}

/* The order number as the panel's headline. */
.tablet-screen[data-theme='kettle'] .reg-order {
	margin: 0;
	color: #d7263d;
	font-size: 5.4cqi;
	font-weight: 900;
	font-stretch: 70%;
	line-height: 1;
}

.tablet-screen[data-theme='kettle'] .reg-total {
	align-self: flex-end;
}

.tablet-screen[data-theme='kettle'] .reg-side .pay {
	width: 100%;
}

.tablet-screen[data-theme='kettle'] .menu {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
}

.tablet-screen[data-theme='kettle'] .item {
	justify-items: center;
	border-radius: 2.4cqi;
	background: #d7263d;
	color: #fff;
	box-shadow: inset 0 -0.7cqi 0 rgb(0 0 0 / 0.18);
}

.tablet-screen[data-theme='kettle'] .item.is-drink {
	background: #ffd23f;
	color: #3a1408;
}

.tablet-screen[data-theme='kettle'] .item.is-tin {
	background: #3a1408;
}

.tablet-screen[data-theme='kettle'] .item-name {
	font-size: 3.6cqi;
	font-weight: 850;
	font-stretch: 70%;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
}

.tablet-screen[data-theme='kettle'] .item-price {
	font-size: 2cqi;
	font-weight: 600;
	opacity: 0.85;
}

.tablet-screen[data-theme='kettle'] .item-count {
	background: #fff;
	color: #d7263d;
}

.tablet-screen[data-theme='kettle'] .ticket {
	padding: 0;
}

.tablet-screen[data-theme='kettle'] .line {
	background: #fff;
	box-shadow: 0 0.2cqi 0 rgb(58 20 8 / 0.08);
}

.tablet-screen[data-theme='kettle'] .line-size {
	background: #ffd23f;
	color: #3a1408;
	font-stretch: 100%;
	font-size: 1.8cqi;
}

.tablet-screen[data-theme='kettle'] .line-name {
	color: #3a1408;
	font-weight: 600;
}

.tablet-screen[data-theme='kettle'] .ticket-empty {
	color: rgb(58 20 8 / 0.4);
}

.tablet-screen[data-theme='kettle'] .reg-total {
	font-stretch: 75%;
	font-size: 5cqi;
}

.tablet-screen[data-theme='kettle'] .pay {
	background: #d7263d;
	color: #fff;
	font-stretch: 75%;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Tacos: a late-night truck. Deep green, lime and orange, a long menu of rows with prices. */
.tablet-screen[data-theme='tacos'] {
	background: #0f2a1e;
	color: #f2f7e9;
}

.tablet-screen[data-theme='tacos'] .reg-side {
	gap: 1cqi;
	padding: 2cqi 1.6cqi 1.6cqi;
	border-right: 1px solid rgb(198 244 50 / 0.18);
	background: #0b2017;
}

.tablet-screen[data-theme='tacos'] .reg-order {
	margin: 0 0 0.6cqi;
	color: #c6f432;
	font-size: 3cqi;
	font-weight: 800;
	font-stretch: 90%;
}

.tablet-screen[data-theme='tacos'] .ticket {
	padding: 0;
}

.tablet-screen[data-theme='tacos'] .reg-side .reg-total {
	padding-top: 1cqi;
	border-top: 1px solid rgb(198 244 50 / 0.18);
	font-size: 4.4cqi;
}

.tablet-screen[data-theme='tacos'] .reg-side .pay {
	width: 100%;
	height: 8cqi;
	font-size: 3.2cqi;
}

.tablet-screen[data-theme='tacos'] .menu {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 1cqi;
}

.tablet-screen[data-theme='tacos'] .item {
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 0 2cqi;
	border-radius: 99em;
	background: rgb(242 247 233 / 0.08);
	color: inherit;
	text-align: left;
	outline: 0.35cqi solid transparent;
	outline-offset: -0.35cqi;
}

.tablet-screen[data-theme='tacos'] .item.is-active {
	background: rgb(198 244 50 / 0.16);
	outline-color: #c6f432;
}

.tablet-screen[data-theme='tacos'] .item-name {
	font-size: 2.3cqi;
	font-weight: 700;
	font-stretch: 90%;
}

.tablet-screen[data-theme='tacos'] .item-price {
	color: #ff9a4d;
	font-size: 2cqi;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tablet-screen[data-theme='tacos'] .item-count {
	top: -0.6cqi;
	right: 1.4cqi;
	background: #ff7a1a;
	color: #0f2a1e;
}

.tablet-screen[data-theme='tacos'] .line {
	background: rgb(242 247 233 / 0.06);
	border-radius: 99em;
}

.tablet-screen[data-theme='tacos'] .line-size {
	background: transparent;
	color: #c6f432;
	font-size: 2cqi;
	font-stretch: 100%;
}

.tablet-screen[data-theme='tacos'] .line-name {
	color: #f2f7e9;
	font-weight: 600;
}

.tablet-screen[data-theme='tacos'] .pay {
	background: #c6f432;
	color: #0f2a1e;
	border-radius: 99em;
}

.tablet-screen[data-theme='tacos'] .reg-total {
	font-stretch: 90%;
}

/* Concessions: a grandstand stand that sells everything. 24 items on one screen, small white tiles
   coded by type (food, sweets, drinks), and a receipt-style ticket on the right. */
.tablet-screen[data-theme='concessions'] {
	background: #eef1f5;
	color: #1b2430;
}

.stand-head,
.stand-foot {
	display: flex;
	align-items: center;
	gap: 2cqi;
	padding: 0 1.6cqi;
	background: #fff;
}

.stand-head {
	height: 5.6cqi;
	border-bottom: 1px solid #d8dee6;
	background: #1b2430;
	color: #fff;
}

.stand-foot {
	justify-content: flex-end;
	padding: 1cqi 1.6cqi;
	border-top: 1px solid #d8dee6;
}

.stand-name {
	font-size: 1.9cqi;
	font-weight: 800;
}

.reg-clock {
	color: #b9c3d0;
	font-size: 1.7cqi;
	font-variant-numeric: tabular-nums;
}

.tablet-screen[data-theme='concessions'] .reg-order {
	color: #b9c3d0;
	font-size: 1.7cqi;
}

.tablet-screen[data-theme='concessions'] .reg-body {
	grid-template-columns: 1fr 26%;
}

.tablet-screen[data-theme='concessions'] .menu {
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 1fr;
	gap: 0.7cqi;
	padding: 1cqi;
}

.tablet-screen[data-theme='concessions'] .item {
	--type: #e4572e;
	justify-items: start;
	align-content: space-between;
	gap: 0.2cqi;
	padding: 0.8cqi 0.9cqi 0.8cqi 1.4cqi;
	border-radius: 0.6cqi;
	background: #fff;
	color: #1b2430;
	text-align: left;
	box-shadow: inset 0.55cqi 0 0 var(--type), 0 0.1cqi 0.3cqi rgb(27 36 48 / 0.08);
}

.tablet-screen[data-theme='concessions'] .item.is-sweet {
	--type: #d63c96;
}

.tablet-screen[data-theme='concessions'] .item.is-drink {
	--type: #2f6fed;
}

.tablet-screen[data-theme='concessions'] .item.is-active {
	background: color-mix(in srgb, var(--type) 12%, #fff);
}

.tablet-screen[data-theme='concessions'] .item-name {
	font-size: 1.55cqi;
	font-weight: 700;
	font-stretch: 88%;
	line-height: 1.1;
}

.tablet-screen[data-theme='concessions'] .item-price {
	color: #5b6675;
	font-size: 1.35cqi;
	font-variant-numeric: tabular-nums;
}

.tablet-screen[data-theme='concessions'] .item-count {
	top: auto;
	bottom: 0.6cqi;
	right: 0.6cqi;
	min-width: 2.4cqi;
	height: 2.4cqi;
	font-size: 1.3cqi;
	background: var(--type);
	color: #fff;
}

.tablet-screen[data-theme='concessions'] .reg-ticket {
	border-right: 0;
	border-left: 1px solid #d8dee6;
	background: #fff;
}

.tablet-screen[data-theme='concessions'] .ticket {
	gap: 0;
	padding: 1cqi 1.4cqi;
}

.tablet-screen[data-theme='concessions'] .line {
	grid-template-columns: 3cqi 1fr auto;
	padding: 0.8cqi 0;
	border-radius: 0;
	border-bottom: 1px dashed #d8dee6;
	background: none;
	animation-duration: 120ms;
}

.tablet-screen[data-theme='concessions'] .line-size {
	width: auto;
	height: auto;
	background: none;
	color: #5b6675;
	font-size: 1.45cqi;
	font-stretch: 100%;
	font-weight: 600;
}

.tablet-screen[data-theme='concessions'] .line-name {
	color: #1b2430;
	font-size: 1.5cqi;
	font-weight: 600;
}

.tablet-screen[data-theme='concessions'] .line-price {
	font-size: 1.5cqi;
	font-weight: 600;
}

.tablet-screen[data-theme='concessions'] .ticket-empty {
	color: #9aa4b2;
}

.tablet-screen[data-theme='concessions'] .reg-total {
	font-size: 3.6cqi;
	font-stretch: 100%;
	font-weight: 800;
}

.tablet-screen[data-theme='concessions'] .pay {
	height: 6cqi;
	border-radius: 0.8cqi;
	background: #2f6fed;
	color: #fff;
	font-stretch: 100%;
	font-size: 2.4cqi;
}

/* Coffee cart: the vendor's own photos on every tile. Category tabs across the top, the order on the right. */
.tablet-screen[data-theme='coffee'] {
	background: #f7f3ee;
	color: #2b1d14;
}

.cats {
	display: flex;
	align-items: center;
	gap: 1.4cqi;
	padding: 1.2cqi 1.6cqi;
	background: #2b1d14;
	color: #f7f3ee;
}

.cat-tabs {
	display: flex;
	gap: 0.8cqi;
}

.cat {
	height: 4.4cqi;
	padding: 0 2.2cqi;
	border: 0;
	border-radius: 99em;
	background: transparent;
	color: #d9c7b5;
	font: 600 1.9cqi/1 var(--font);
	cursor: pointer;
}

.cat[aria-pressed='true'] {
	background: #f7f3ee;
	color: #2b1d14;
}

.tablet-screen[data-theme='coffee'] .reg-order {
	color: #d9c7b5;
	font-size: 1.8cqi;
}

.tablet-screen[data-theme='coffee'] .reg-body {
	grid-template-columns: 1fr 28%;
}

.tablet-screen[data-theme='coffee'] .menu {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: calc((100% - 2 * 1cqi) / 3);
	align-content: start;
	gap: 1cqi;
	padding: 1.2cqi;
}

.tablet-screen[data-theme='coffee'] .item {
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	align-content: stretch;
	padding: 0;
	overflow: hidden;
	border-radius: 1.2cqi;
	background: #fff;
	color: #2b1d14;
	text-align: left;
	box-shadow: 0 0.2cqi 0.6cqi rgb(43 29 20 / 0.12);
	outline: 0.4cqi solid transparent;
	outline-offset: -0.4cqi;
}

.tablet-screen[data-theme='coffee'] .item.is-active {
	outline-color: #b5651d;
}

.tablet-screen[data-theme='coffee'] .item-photo {
	grid-column: 1 / -1;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	pointer-events: none;
}

.tablet-screen[data-theme='coffee'] .item-name {
	padding: 0.7cqi 0 0.8cqi 1cqi;
	font-size: 1.6cqi;
	font-weight: 700;
	line-height: 1.1;
}

.tablet-screen[data-theme='coffee'] .item-price {
	align-self: center;
	padding: 0 1cqi 0 0.6cqi;
	color: #8a6a52;
	font-size: 1.45cqi;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tablet-screen[data-theme='coffee'] .item-count {
	top: 0.8cqi;
	right: 0.8cqi;
	background: #b5651d;
	color: #fff;
}

.tablet-screen[data-theme='coffee'] .reg-side {
	border-left: 1px solid #e4d9cd;
	background: #fff;
}

.tablet-screen[data-theme='coffee'] .line {
	background: #f7f3ee;
}

.tablet-screen[data-theme='coffee'] .line-size {
	background: transparent;
	color: #b5651d;
	font-size: 1.7cqi;
	font-stretch: 100%;
}

.tablet-screen[data-theme='coffee'] .line-name {
	color: #2b1d14;
	font-weight: 600;
}

.tablet-screen[data-theme='coffee'] .ticket-empty {
	color: #b3a291;
}

.side-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1cqi;
	padding: 1.2cqi 1.4cqi;
	border-top: 1px solid #e4d9cd;
}

.tablet-screen[data-theme='coffee'] .reg-total {
	font-size: 3.2cqi;
	font-stretch: 100%;
}

.tablet-screen[data-theme='coffee'] .pay {
	height: 5.6cqi;
	padding: 0 3cqi;
	border-radius: 1cqi;
	background: #b5651d;
	color: #fff;
	font-stretch: 100%;
	font-size: 2.2cqi;
}

/* ---------------------------------------------------------------- promises */

.promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(32px, 6vw, 96px);
	padding: clamp(64px, 9vw, 120px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	background: var(--deep-900);
	color: var(--mist-100);
}

.promises-title {
	grid-column: 1 / -1;
	max-width: 18ch;
	margin-bottom: clamp(40px, 5vw, 64px);
	color: var(--aqua-400);
	font-size: clamp(2.2rem, 4.6vw, 3.9rem);
	font-weight: 850;
	font-stretch: 125%;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.promise {
	padding: clamp(28px, 3.4vw, 44px) 0;
	border-top: 1px solid rgb(0 206 201 / 0.35);
}

.promise h3 {
	font-size: clamp(1.75rem, 3.1vw, 2.75rem);
	font-weight: 820;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: -0.015em;
	color: #fff;
}

.promise p {
	max-width: 46ch;
	margin-top: 16px;
	color: var(--mist-400);
	font-size: 1.125rem;
}

/* ---------------------------------------------------------------- screenshots */

.screens {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	align-items: end;
	gap: clamp(14px, 2vw, 28px);
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(64px, 8vw, 112px) var(--gutter) 0;
}

.shot {
	margin: 0;
}

.shot img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 14px;
	background: var(--deep-800);
	box-shadow: 0 24px 48px -30px rgb(0 26 31 / 0.6);
}

.shot figcaption {
	margin-top: 12px;
	color: var(--deep-700);
	font-weight: 600;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- features */

.features,
.steps {
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(72px, 9vw, 128px) var(--gutter) 0;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(24px, 3.4vw, 56px);
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.feature {
	padding: 28px 0 36px;
	border-top: 2px solid var(--deep-900);
}

.icon {
	width: 36px;
	height: 36px;
	fill: none;
	stroke: var(--aqua-700);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.feature h3 {
	margin-top: 18px;
	font-size: 1.3rem;
	font-weight: 780;
	font-stretch: 112%;
	line-height: 1.15;
}

.feature p {
	max-width: 38ch;
	margin-top: 8px;
	color: var(--deep-700);
}

/* ---------------------------------------------------------------- how it works */

.step-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3.4vw, 56px);
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	counter-increment: step;
}

.step::before {
	content: counter(step);
	display: block;
	color: var(--aqua-700);
	font-size: clamp(3.4rem, 5.4vw, 4.6rem);
	font-weight: 870;
	font-stretch: 125%;
	line-height: 0.9;
}

.step h3 {
	margin-top: 16px;
	font-size: 1.3rem;
	font-weight: 780;
	font-stretch: 112%;
}

.step p {
	max-width: 38ch;
	margin-top: 8px;
	color: var(--deep-700);
}

/* ---------------------------------------------------------------- contact */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 80px);
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(80px, 10vw, 140px);
	scroll-margin-top: 12px;
}

.contact-intro p {
	max-width: 40ch;
	margin-top: 20px;
	color: var(--deep-700);
	font-size: 1.125rem;
}

.contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	padding: clamp(22px, 3vw, 36px);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 0 rgb(2 44 50 / 0.06), 0 30px 60px -40px rgb(2 44 50 / 0.45);
}

.field {
	display: grid;
	gap: 6px;
}

.field-wide,
.form-foot {
	grid-column: 1 / -1;
}

.field label {
	font-weight: 650;
	font-size: 0.95rem;
}

.optional {
	color: var(--mist-600);
	font-weight: 400;
}

.field input,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mist-300);
	border-radius: 8px;
	background: var(--mist-50);
	color: var(--deep-900);
	font: inherit;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.field textarea {
	resize: vertical;
	min-height: 140px;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--aqua-700);
	background: #fff;
	box-shadow: 0 0 0 3px rgb(0 206 201 / 0.35);
}

.field.is-invalid input,
.field.is-invalid textarea {
	border-color: var(--buoy);
}

.field-error {
	color: var(--buoy);
	font-size: 0.9rem;
	font-weight: 600;
}

.trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 4px;
}

.form-status {
	font-weight: 600;
}

.form-status.is-error {
	color: var(--buoy);
}

.form-status.is-sent {
	color: var(--kelp);
}

.button:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding: 36px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	background: var(--deep-950);
	color: var(--mist-400);
}

.site-footer nav {
	display: flex;
	gap: 24px;
}

.site-footer a {
	color: var(--mist-100);
	font-weight: 600;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--aqua-400);
}

.copyright {
	margin-left: auto;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 960px) {
	.hero-inner {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		max-width: none;
	}

	/* Under the register only, so it doesn't run behind the headline. */
	.hero-inner::before {
		top: auto;
		bottom: -18%;
		right: -25vw;
		width: min(100vw, 760px);
	}

	.screens {
		grid-template-columns: 1fr 1fr;
	}

	.shot-register {
		grid-column: 1 / -1;
	}

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

@media (max-width: 680px) {
	.header-link {
		display: none;
	}

	/* The register gets the full width; the arrows sit under it, beside the dots. */
	.demo-stage {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: 'tablet tablet tablet' 'prev nav next';
	}

	.chev {
		width: 44px;
		height: 44px;
	}

	.hub-button {
		min-height: 46px;
		padding: 0 18px;
	}

	.promises,
	.feature-grid,
	.step-list,
	.contact,
	.contact-form,
	.screens {
		grid-template-columns: 1fr;
	}

	.copyright {
		margin-left: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}