@font-face {
	font-family: Kalice;
	src: url("/landing/releases/81ac99d7d6321f84/assets/fonts/Kalice-Trial-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--scene-background: #272a28;
	--table-color: #272a28;
	--table-text: #f4efdf;
	--logo-mask-color: rgb(0 0 0 / 30%);
	--logo-mask-mobile-color: rgb(34 34 34 / 88%);
	--logo-mask-hover-color: rgb(0 0 0 / 45%);
	--logo-mask-active-color: rgb(0 0 0 / 52%);
	--logo-mask-focus-color: rgb(0 0 0 / 55%);
	color-scheme: light;
	color: var(--table-text);
	background: var(--scene-background);
	font-synthesis: none;
	cursor: default;
}

:root[data-logo-mask="light"] {
	--logo-mask-color: rgb(255 255 255 / 40%);
	--logo-mask-mobile-color: rgb(255 255 255 / 88%);
	--logo-mask-hover-color: rgb(255 255 255 / 55%);
	--logo-mask-active-color: rgb(255 255 255 / 62%);
	--logo-mask-focus-color: rgb(255 255 255 / 65%);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: 320px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.hero {
	/* The 1500 × 1000 stage preserves the approved visible composition. */
	--scene-width: max(100vw, 164.5dvh);
	/* Keep the shared 3:2 room/SVG stage pinned to the viewport bottom. */
	--scene-top: calc(100dvh - var(--scene-width) * 2 / 3);
	--headline-size: clamp(28px, calc(var(--scene-width) * 0.0494), 76px);
	--footer-space: 64px;
	--header-top: max(20px, env(safe-area-inset-top));
	position: fixed;
	inset: 0;
	display: flow-root;
	height: 100dvh;
	overflow: clip;
	background: var(--table-color);
}

.hero-logo {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
}

/* Option + E: leave the full scene visible while hiding page chrome. */
:root[data-landing-chrome-hidden] .hero-logo,
:root[data-landing-chrome-hidden] .hero-copy,
:root[data-landing-chrome-hidden] .site-footer {
	visibility: hidden;
}

.hero-actions {
	pointer-events: auto;
	position: fixed;
	top: max(20px, env(safe-area-inset-top));
	left: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 6px;
	transform: translateX(-50%);
	border-radius: 14px;
	background: rgb(255 255 255 / 70%);
	outline: 1px solid rgb(0 0 0 / 10%);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 5%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.try-beta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding-inline: 10px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	font-family:
		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease;
}

.try-beta,
.site-footer a {
	cursor: pointer;
}

.try-beta:hover {
	background: #1f2937;
}

.try-beta:focus-visible {
	outline: 2px solid #252521;
	outline-offset: 3px;
}

.site-footer {
	user-select: none;
	-webkit-user-select: none;
	pointer-events: auto;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 12px max(16px, env(safe-area-inset-right))
		max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: var(--table-color);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: rgb(244 239 223 / 46%);
	font:
		300 13px / 1.2 ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}

.site-footer:focus-within a {
	color: rgb(244 239 223 / 68%);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 28px;
	}

	.site-footer:hover a {
		color: rgb(244 239 223 / 68%);
	}
}

.footer-links {
	display: inline-flex;
	gap: 14px;
}

.footer-legal-label {
	display: none;
}

.site-footer a,
.site-footer p {
	pointer-events: auto;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.site-footer a:hover {
	color: var(--table-text);
}

.site-footer a:focus-visible {
	border-radius: 3px;
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.site-footer p {
	margin: 0;
}

.footer-brand {
	margin-right: 20px;
}

.footer-brand sup {
	margin-left: 1px;
	font-size: 0.65em;
	line-height: 0;
}

.scene {
	position: relative;
	left: 50%;
	width: var(--scene-width);
	margin-left: calc(var(--scene-width) * -0.5);
	/* Center the room and SVG as one cropped composition. */
	margin-top: var(--scene-top);
}

.scene-artwork {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	/* Swiping cannot pan the scene; pinch zoom remains available. */
	touch-action: pinch-zoom;
	-webkit-tap-highlight-color: transparent;
}

.scene-artwork:disabled {
	cursor: default;
	opacity: 1;
}

.scene-artwork:focus-visible {
	outline: 3px solid #252521;
	outline-offset: -3px;
}

.scene-background,
.scene-art {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	object-position: center;
	pointer-events: none;
}

.scene-art-live {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hero-copy {
	pointer-events: none;
	position: absolute;
	top: min(
		77%,
		calc(
			100dvh -
			var(--scene-top) -
			var(--footer-space) -
			var(--headline-size) *
			2.16
		)
	);
	right: 0;
	left: 0;
	margin-inline: auto;
	width: max-content;
	max-width: calc(100vw - 32px);
	text-align: center;
}

h1 {
	margin: 0;
	font-family: Kalice, Georgia, serif;
	font-size: var(--headline-size);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: normal;
	transform: perspective(900px) rotateX(5deg);
	transform-origin: center top;
}

/* Hidden only when the pre-paint bootstrap runs; no-JS content stays visible. */
:root[data-scene-entrance]:not([data-scene-entrance="ready"]) .scene-artwork {
	opacity: 0;
	visibility: hidden;
}

:root[data-scene-entrance]:not([data-title-ready]) h1,
:root[data-scene-entrance]:not([data-title-ready]) .hero-actions,
:root[data-scene-entrance]:not([data-title-ready]) .site-footer {
	opacity: 0;
}

@keyframes scene-appear {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes hero-title-appear {
	from {
		opacity: 0;
		translate: 0 6px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes interface-appear {
	from {
		opacity: 0;
		translate: 0 5px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root[data-scene-entrance="ready"] .scene-artwork {
		animation: scene-appear 200ms ease-out both;
	}

	:root[data-title-ready="animated"] h1 {
		animation: hero-title-appear 300ms ease-out 100ms both;
	}

	:root[data-title-ready="animated"] .hero-actions {
		animation: interface-appear 240ms ease-out 460ms both;
	}

	:root[data-title-ready="animated"] .site-footer {
		animation: interface-appear 240ms ease-out 760ms both;
	}
}

/* In short landscape windows, keep the hands above the headline. */
@media (min-aspect-ratio: 2 / 1) {
	.hero {
		--scene-top: min(
			calc(100dvh - var(--scene-width) * 2 / 3),
			calc(58dvh - var(--scene-width) * 0.3977)
		);
		--headline-size: clamp(28px, 7.6dvh, 76px);
	}

	.site-footer {
		right: 0;
		bottom: 0;
		left: 0;
		padding: 10px max(16px, env(safe-area-inset-right))
			max(10px, env(safe-area-inset-bottom))
			max(16px, env(safe-area-inset-left));
		background: var(--table-color);
	}
}

/* Let the table reach the bottom corners behind the inset desktop footer. */
@media (min-width: 1280px) {
	.hero {
		--footer-space: 48px;
	}

	.hero-copy {
		top: min(
			max(77%, calc(var(--scene-width) * 0.4457 + 8px)),
			calc(
				100dvh -
				var(--scene-top) -
				var(--footer-space) -
				var(--headline-size) *
				2.16
			)
		);
	}

	.site-footer {
		background: none;
		padding-right: calc(
			max(clamp(32px, 4vw, 64px), env(safe-area-inset-right)) +
			8px
		);
		padding-left: calc(
			max(clamp(32px, 4vw, 64px), env(safe-area-inset-left)) +
			8px
		);
	}
}

/* Keep the phone footer to one row: Legal left, brand right. */
@media (max-width: 639px) {
	.hero {
		--headline-size: clamp(32px, 10vw, 60px);
		--footer-space: 104px;
	}

	.site-footer {
		padding: 12px max(16px, env(safe-area-inset-right))
			max(16px, env(safe-area-inset-bottom))
			max(16px, env(safe-area-inset-left));
		flex-direction: row;
		align-items: center;
		gap: 16px;
		font-size: 14px;
		line-height: 1.375;
	}

	.footer-terms-label,
	.footer-privacy {
		display: none;
	}

	.footer-legal-label {
		display: inline;
	}

	.footer-brand {
		margin-right: 0;
	}

	.footer-copyright {
		display: none;
	}
}

/* Stack the headline and CTA by viewport width, regardless of input device. */
@media (max-width: 1279px) {
	.hero {
		--headline-size: clamp(32px, min(12.5vw, 11dvh), 112px);
		--scene-width: max(100vw, 154.63dvh);
		--scene-offset: -16px;
		--cta-height: 60px;
		--copy-gap: 24px;
		--scene-top: min(
			0px,
			calc(100dvh - var(--scene-width) * 2 / 3),
			calc(var(--scene-width) * -0.0587 + var(--scene-offset)),
			calc(
				100dvh -
				var(--footer-space) -
				var(--headline-size) *
				2.24 -
				var(--cta-height) -
				var(--copy-gap) -
				24px -
				var(--scene-width) *
				0.3977
			)
		);
		--footer-space: max(64px, calc(env(safe-area-inset-bottom) + 50px));
	}

	/* Overlap the SVG by 1px to hide fractional-pixel seams at the join. */
	.scene-artwork::after {
		content: "";
		position: absolute;
		top: calc(100% - 1px);
		right: 0;
		left: 0;
		height: 100dvh;
		background: var(--table-color);
	}

	.hero-copy {
		position: fixed;
		top: auto;
		right: max(16px, env(safe-area-inset-right));
		bottom: var(--footer-space);
		left: max(16px, env(safe-area-inset-left));
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--copy-gap);
		width: auto;
		max-width: none;
	}

	h1 {
		line-height: 1.12;
	}

	.hero-actions {
		position: static;
		bottom: auto;
		left: auto;
		right: auto;
		width: fit-content;
		max-width: 100%;
		transform: none;
		border-radius: 18px;
	}

	.hero-logo {
		display: none;
	}
}

/* Size the button by viewport so device emulation and normal windows match. */
@media (max-width: 1279px) {
	.try-beta {
		height: 48px;
		padding-inline: 20px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 600;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
}

/* Tablets need their own hierarchy: keep the brand in the open wall and stop
   the intermediate headline scale from overpowering the cast. */
@media (min-width: 640px) and (max-width: 1279px) {
	.hero {
		--headline-size: clamp(44px, min(7.25vw, 6.25svh), 60px);
		--scene-width: max(100vw, 145svh);
		--scene-offset: 24px;
		--cta-height: 48px;
		--copy-gap: 48px;
		--footer-space: max(88px, calc(env(safe-area-inset-bottom) + 68px));
	}

	.hero-copy {
		top: 52%;
		bottom: var(--footer-space);
		justify-content: center;
		transform: none;
	}

	:root[data-controls-variant="keycap"] .hero-logo {
		top: calc(var(--header-top) + 36px);
		left: 50%;
		display: block;
		width: clamp(112px, 17vw, 136px);
	}
}

/* Reveal more of the cast on phones; tablets use the gentler crop above. */
@media (max-width: 639px) {
	.hero {
		--headline-size: clamp(30px, min(11.75vw, 10.34svh), 105px);
		--scene-width: max(100vw, 128svh);
		/* Compensate for the smaller SVG, then lower the foreground by 24px. */
		--scene-offset: calc(
			clamp(0px, 30dvh - 186px, 72px) +
			8px +
			(max(100vw, 144.76dvh) - var(--scene-width)) *
			0.301
		);
		--cta-height: 48px;
		--copy-gap: 44px;
		/* A fixed 184px reserve pulls the copy into the cast in Safari's shorter
		   content viewport. Let that breathing room contract on real phones while
		   retaining the approved spacing in tall previews. */
		--footer-space: max(
			clamp(108px, 16svh, 184px),
			calc(env(safe-area-inset-bottom) + 92px)
		);
	}

	.hero-logo {
		position: fixed;
		top: calc(max(20px, env(safe-area-inset-top)) + 76px);
		left: 50%;
		z-index: 3;
		display: block;
		width: clamp(105px, 30vw, 130px);
		aspect-ratio: 289 / 63;
		transform: translateX(-50%);
		background: var(--logo-mask-mobile-color);
		-webkit-mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
		mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
		pointer-events: none;
	}

	.site-footer {
		color: rgb(244 239 223 / 46%);
	}

	.hero-copy {
		transform: translateY(8px);
	}

	.hero-actions {
		width: 100%;
		max-width: 148px;
		padding: 0;
		background: none;
		outline: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.try-beta {
		width: 100%;
		background: var(--table-text);
		color: var(--table-color);
		font-size: 18px;
		font-weight: 500;
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: transparent;
	}

	.try-beta:hover {
		background: #fffaf0;
	}

	.try-beta:active {
		background: var(--table-text);
	}

	.try-beta:focus-visible {
		outline-color: var(--table-text);
	}
}

@media (max-width: 639px) and (orientation: portrait) {
	.hero {
		/* Use the full viewport height as the camera width: reveal more of the cast
		   and let the table edge settle lower without breaking the 3:2 stage. */
		--scene-width: max(100vw, 100svh);
		--scene-top: 0px;
	}
}

/* Permanent glass-mounted dark key with interactive logo. */
:root[data-controls-variant="keycap"] .hero-logo {
	--logo-press-y: 0px;
	--logo-scale: 1;
	position: fixed;
	top: calc(var(--header-top) + 28px);
	left: calc(50% + 4px);
	z-index: 3;
	display: block;
	width: 112px;
	aspect-ratio: 289 / 63;
	background: var(--logo-mask-color);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	-webkit-mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
	mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
	transform: translate3d(-50%, var(--logo-press-y), 0) scale(var(--logo-scale));
	transform-origin: center;
	will-change: transform;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	transition:
		background-color 240ms ease,
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-controls-variant="keycap"] .hero-logo:hover:not(:disabled) {
	--logo-scale: 1.055;
	background: var(--logo-mask-hover-color);
}

:root[data-controls-variant="keycap"] .hero-logo:active:not(:disabled) {
	--logo-press-y: 2px;
	--logo-scale: 0.975;
	background: var(--logo-mask-active-color);
}

:root[data-controls-variant="keycap"] .hero-logo:focus-visible {
	outline: 2px solid var(--logo-mask-focus-color);
	outline-offset: 6px;
}

:root[data-controls-variant="keycap"] .hero-logo:disabled {
	cursor: default;
}

:root[data-controls-variant="keycap"] .hero-actions {
	position: absolute;
	top: auto;
	bottom: calc(100% + 24px);
	padding: 6px;
	border-radius: 13px;
	background: rgb(207 216 221 / 74%);
	outline: 1px solid rgb(255 255 255 / 62%);
	box-shadow:
		0 8px 18px rgb(0 0 0 / 18%),
		inset 0 1px 0 rgb(255 255 255 / 72%);
	-webkit-backdrop-filter: blur(10px) saturate(72%);
	backdrop-filter: blur(10px) saturate(72%);
	transform: translateX(-50%) perspective(135px) rotateX(18deg);
	transform-origin: center bottom;
	transition:
		background-color 180ms ease,
		outline-color 180ms ease,
		box-shadow 180ms ease;
}

:root[data-controls-variant="keycap"] .hero-actions:hover {
	background: rgb(216 224 229 / 82%);
	outline-color: rgb(255 255 255 / 74%);
	box-shadow:
		0 8px 18px rgb(0 0 0 / 18%),
		inset 0 1px 0 rgb(255 255 255 / 82%);
}

:root[data-controls-variant="keycap"] .try-beta {
	--key-edge: #202220;
	--key-face: #2c2e2c;
	--key-shadow: rgb(12 13 12 / 30%);
	height: 36px;
	padding-block: 5px 6px;
	padding-inline: 16px;
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 8px;
	background: var(--key-face);
	box-shadow:
		0 3px 0 var(--key-edge),
		0 5px 8px var(--key-shadow),
		inset 0 1px 0 rgb(255 255 255 / 10%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	-webkit-user-select: none;
	user-select: none;
	transform: translate3d(0, -2px, 0);
	transform-origin: center bottom;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 120ms ease,
		transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-controls-variant="keycap"] .try-beta:hover {
	background: var(--key-face);
	border-color: rgb(255 255 255 / 10%);
	box-shadow:
		0 3px 0 var(--key-edge),
		0 5px 8px var(--key-shadow),
		inset 0 1px 0 rgb(255 255 255 / 12%),
		inset 0 0 12px rgb(255 255 255 / 2%);
	transform: translate3d(0, -2px, 0);
}

:root[data-controls-variant="keycap"] .try-beta:active {
	background: #292b29;
	box-shadow:
		0 2px 0 var(--key-edge),
		0 3px 6px rgb(12 13 12 / 22%),
		inset 0 1px 2px rgb(0 0 0 / 18%);
	transform: translate3d(0, -1px, 0);
	transition-duration: 70ms;
}

:root[data-controls-variant="keycap"] .try-beta:focus-visible {
	outline: none;
}

@media (max-width: 1279px) {
	:root[data-controls-variant="keycap"] .hero-actions {
		position: static;
		inset: auto;
		transform: perspective(135px) rotateX(18deg);
	}

	:root[data-controls-variant="keycap"] .hero-logo {
		display: none;
	}

	:root[data-controls-variant="keycap"] .try-beta {
		height: 48px;
		padding-inline: 20px;
		border-radius: 10px;
		font-size: 16px;
	}
}

@media (max-width: 1279px) {
	:root[data-controls-variant="keycap"] .hero-actions {
		width: 152px;
		max-width: 152px;
		padding: 8px;
		border-radius: 22px;
		background: linear-gradient(
			180deg,
			rgb(174 184 190 / 82%) 0%,
			rgb(198 208 213 / 78%) 48%,
			rgb(214 222 226 / 80%) 100%
		);
		outline-color: rgb(222 228 231 / 58%);
		transform: none;
	}

	:root[data-controls-variant="keycap"] .hero-actions:hover {
		background: linear-gradient(
			180deg,
			rgb(182 192 198 / 86%) 0%,
			rgb(205 214 219 / 82%) 48%,
			rgb(220 227 231 / 84%) 100%
		);
		outline-color: rgb(229 234 237 / 66%);
	}

	:root[data-controls-variant="keycap"] .hero-logo {
		position: fixed;
		top: calc(max(20px, env(safe-area-inset-top)) + 76px);
		left: 50%;
		display: block;
		width: clamp(105px, 30vw, 130px);
		background: var(--logo-mask-mobile-color);
		transform: translate3d(-50%, var(--logo-press-y), 0)
			scale(var(--logo-scale));
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: transparent;
		pointer-events: auto;
	}

	:root[data-controls-variant="keycap"] .try-beta {
		width: 100%;
		border-radius: 17px;
		border-top: 0;
		background: var(--key-face);
		box-shadow:
			0 3px 0 var(--key-edge),
			0 5px 8px var(--key-shadow);
		color: #fff;
		font-size: 18px;
		font-weight: 500;
		transform: translate3d(0, -1.5px, 0);
	}

	:root[data-controls-variant="keycap"] .try-beta:hover {
		border-top: 0;
		background: var(--key-face);
		box-shadow:
			0 3px 0 var(--key-edge),
			0 5px 8px var(--key-shadow);
		transform: translate3d(0, -1.5px, 0);
	}

	:root[data-controls-variant="keycap"] .try-beta:active {
		border-top: 0;
		background: var(--key-face);
		box-shadow:
			0 2px 0 var(--key-edge),
			0 3px 6px rgb(12 13 12 / 22%);
		transform: translate3d(0, -0.5px, 0);
	}
}

/* Wide CTA composition. The scene is width-driven and the copy centers in the
   visible tabletop. Remove data-desktop-cta="below-title" from scene.html to
   restore the preserved table-positioned perspective layout. */
@media (min-width: 900px) and (min-height: 500px) and (min-aspect-ratio: 3 / 2) {
	:root[data-desktop-cta="below-title"] .hero {
		--scene-width: 100vw;
		--scene-top: calc(100dvh - var(--scene-width) * 2 / 3);
		--headline-size: clamp(36px, min(4.5vw, 7.5dvh), 68px);
		--cta-height: 48px;
		--copy-gap: clamp(24px, 4dvh, 44px);
	}

	:root[data-desktop-cta="below-title"] .hero-copy {
		position: fixed;
		top: max(50dvh, calc(var(--scene-top) + var(--scene-width) * 0.3977 + 8px));
		right: max(16px, env(safe-area-inset-right));
		bottom: 0;
		left: max(16px, env(safe-area-inset-left));
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--copy-gap);
		width: auto;
		max-width: none;
		transform: translateY(clamp(8px, 2dvh, 16px));
	}

	:root[data-desktop-cta="below-title"] h1 {
		line-height: 1.04;
	}

	:root[data-controls-variant="keycap"][data-desktop-cta="below-title"]
		.hero-logo {
		top: calc(var(--header-top) + 28px);
		left: calc(50% + 4px);
		width: 112px;
		background: var(--logo-mask-color);
	}

	:root[data-desktop-cta="below-title"] .hero-actions {
		position: static;
		inset: auto;
		width: fit-content;
		max-width: 100%;
		padding: 6px;
		border-radius: 13px;
		background: rgb(207 216 221 / 74%);
		outline: 1px solid rgb(255 255 255 / 62%);
		box-shadow:
			0 8px 18px rgb(0 0 0 / 12%),
			inset 0 1px 0 rgb(255 255 255 / 88%);
		-webkit-backdrop-filter: blur(10px) saturate(72%);
		backdrop-filter: blur(10px) saturate(72%);
		transform: none;
		transform-origin: center;
	}

	:root[data-desktop-cta="below-title"] .hero-actions:hover {
		background: rgb(216 224 229 / 82%);
		outline-color: rgb(255 255 255 / 74%);
		box-shadow:
			0 8px 18px rgb(0 0 0 / 12%),
			inset 0 1px 0 rgb(255 255 255 / 94%);
	}

	:root[data-desktop-cta="below-title"] .try-beta {
		width: auto;
		height: 36px;
		padding-block: 5px 6px;
		padding-inline: 16px;
		border: 1px solid rgb(255 255 255 / 8%);
		border-radius: 8px;
		background: var(--key-face);
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		transform: translateY(-1px);
		box-shadow:
			0 2px 0 var(--key-edge),
			0 5px 8px var(--key-shadow),
			inset 0 1px 0 rgb(255 255 255 / 10%);
	}

	:root[data-desktop-cta="below-title"] .try-beta:hover {
		border: 1px solid rgb(255 255 255 / 10%);
		background: var(--key-face);
		box-shadow:
			0 2px 0 var(--key-edge),
			0 5px 8px var(--key-shadow),
			inset 0 1px 0 rgb(255 255 255 / 12%),
			inset 0 0 12px rgb(255 255 255 / 2%);
		transform: translateY(-1px);
	}

	:root[data-desktop-cta="below-title"] .try-beta:active {
		border: 1px solid rgb(255 255 255 / 8%);
		background: #292b29;
		box-shadow:
			0 1px 0 var(--key-edge),
			0 3px 6px rgb(12 13 12 / 22%),
			inset 0 1px 2px rgb(0 0 0 / 18%);
		transform: translateY(-1px);
	}

	:root[data-desktop-cta="below-title"] .site-footer {
		background: none;
		padding-right: calc(
			max(clamp(32px, 4vw, 64px), env(safe-area-inset-right)) +
			8px
		);
		padding-left: calc(
			max(clamp(32px, 4vw, 64px), env(safe-area-inset-left)) +
			8px
		);
	}
}

/* Option + P: a noninteractive overlay derived from the current table SVG. */
.perspective-overlay {
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	color: #ff3030;
}

.perspective-overlay svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
}

.perspective-construction {
	stroke-width: 1.5;
	stroke-dasharray: 7 5;
	opacity: 0.85;
}

.perspective-overlay circle {
	fill: currentColor;
	stroke: white;
	stroke-width: 1.5;
}

.perspective-overlay text {
	fill: currentColor;
	stroke: #fff;
	stroke-width: 3;
	paint-order: stroke;
	font:
		600 13px system-ui,
		sans-serif;
}

/* A copy of the outgoing room sits above it and below the table while a
   feathered hole opens from the logo. The new room is painted underneath. */
.scene-reveal {
	display: block;
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* A PHONE ON ITS SIDE (Sam, 2026-09-26: "show more of the wall? push table
   down, make the title in one line? logo into the footer subtle"). An
   iPhone turned sideways is ~850 x 330 under Safari's bar. It fell into the
   phone/tablet rules, which crop the room from the top to fit a two-line
   headline and a big key; the wall went off screen and the logo, dark and
   placed for the wall, sat invisible on the dark table. Here the scene zooms in
   and the table fills the bottom two-thirds, so the two-line headline has
   room around it and the key shrinks below it; the footer sits on the
   table (Legal, then the logo in the footer's own quiet color).
   (hover: none) keeps short desktop windows out. */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) {
	.hero {
		/* Zoomed in 15% and the table's far edge a third of the way down, so
		   the table fills the bottom two-thirds (Sam, 2026-09-26: "zoom in the
		   scene a bit so there is more table area", "table covers 60-70%"). */
		--scene-width: 115vw;
		--scene-top: min(0px, calc(35dvh - var(--scene-width) * 0.3977));
		--headline-size: clamp(20px, min(8dvh, 3.4vw), 30px);
		--footer-space: max(38px, calc(env(safe-area-inset-bottom) + 28px));
	}

	.hero-copy {
		top: calc(var(--scene-top) + var(--scene-width) * 0.3977 + 24px);
		bottom: var(--footer-space);
		/* Sit low, where the table is wide enough for one line. */
		justify-content: flex-end;
		gap: clamp(18px, 7dvh, 28px);
		padding-bottom: 0;
		transform: none;
	}

	:root[data-controls-variant="keycap"] .hero-logo {
		display: none;
	}

	:root[data-controls-variant="keycap"] .hero-actions {
		width: 108px;
		max-width: 108px;
		padding: 5px;
		border-radius: 15px;
	}

	:root[data-controls-variant="keycap"] .try-beta {
		height: 32px;
		border-radius: 11px;
		font-size: 14px;
	}

	/* The phone's footer: Legal on the left, the mark on the right. */
	.footer-terms-label,
	.footer-privacy,
	.footer-copyright {
		display: none;
	}

	.footer-legal-label {
		display: inline;
	}

	/* No band: the table already runs to the bottom of the screen, so the
	   footer sits on it, pulled in from the sides past the chairs. */
	.site-footer {
		padding: 8px max(9vw, env(safe-area-inset-right))
			max(10px, env(safe-area-inset-bottom))
			max(9vw, env(safe-area-inset-left));
		background: none;
	}

	.site-footer p {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	/* The name stays in the text for screen readers; the eye gets the mark. */
	.footer-brand {
		display: block;
		width: 60px;
		margin-right: 0;
		aspect-ratio: 289 / 63;
		background: currentColor;
		font-size: 0;
		-webkit-mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
		mask: url("/landing/releases/81ac99d7d6321f84/assets/logo.svg") center / contain no-repeat;
	}
}