/* biome-ignore-all lint: launched design CSS kept for visual parity. */
/* ============================================================
   MAPPA SUB-PAGE SHELL — shared nav, menu overlay, footer,
   buttons, type tokens. Import this and inline only the
   per-page section styles.
   ============================================================ */
:root {
	--page-max: 1440px;
	--content-max: 1280px;
	--nav-h: 80px;
	--hero-bg: rgb(250, 250, 250);
	--ink: rgb(16, 16, 17);
	--ink-soft: rgb(96, 98, 102);
	--line: rgb(230, 230, 230);
	--dark-ink: rgb(37, 37, 37);
	--light: rgb(250, 250, 250);
	--yellow: rgb(255, 210, 0);
}
html,
body {
	background: var(--hero-bg);
	color: var(--ink);
}
body {
	font-family: var(--font-sans, "Geist", system-ui, sans-serif);
	margin: 0;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: pointer;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes conicSpin {
	to {
		--angle: 360deg;
	}
}
@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ============ NAV ============ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-h);
	display: grid;
	grid-template-columns: 80px 1fr auto 80px;
	background: var(--hero-bg);
	border-bottom: 1px solid var(--line);
	transition:
		background-color 0.35s ease,
		border-color 0.35s ease,
		color 0.35s ease;
	color: var(--dark-ink);
}
.nav.is-dark {
	background: rgba(20, 20, 20, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: rgba(255, 255, 255, 0.08);
	color: var(--light);
}
.nav-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 81px;
	height: var(--nav-h);
	border-right: 1px solid var(--line);
}
.nav-cell.right {
	border-right: 0;
	border-left: 1px solid var(--line);
	margin-left: -1px;
}
.nav.is-dark .nav-cell {
	border-color: rgba(255, 255, 255, 0.08);
}
.nav-cta-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px 0 14px;
	height: var(--nav-h);
}
.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 8px 0 18px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease;
	white-space: nowrap;
}
.nav-cta .nav-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	flex: 0 0 28px;
}
.nav-cta .nav-cta-icon svg {
	width: 12px;
	height: 12px;
	display: block;
}
.nav-cta:hover {
	transform: translateY(-0.5px);
}
.nav-cta:active {
	transform: translateY(0);
}
.nav-cta--primary {
	background: #181818;
	color: #fff;
}
.nav-cta--primary:hover {
	background: #000;
}
.nav-cta--primary .nav-cta-icon {
	background: #000;
	color: #fff;
}
.nav-cta--secondary {
	background: transparent;
	color: var(--dark-ink);
	border-color: rgba(0, 0, 0, 0.14);
}
.nav-cta--secondary:hover {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.22);
}
.nav-cta--secondary .nav-cta-icon {
	background: #181818;
	color: #fff;
}
.nav.is-dark .nav-cta--primary {
	background: #fff;
	color: #111;
}
.nav.is-dark .nav-cta--primary .nav-cta-icon {
	background: #111;
	color: #fff;
}
.nav.is-dark .nav-cta--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.22);
}
.nav.is-dark .nav-cta--secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.36);
}
.nav.is-dark .nav-cta--secondary .nav-cta-icon {
	background: #fff;
	color: #111;
}
@media (max-width: 720px) {
	.nav-cta-cell {
		display: none;
	}
}

/* hamburger */
.menu-btn {
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	padding: 0;
	position: relative;
	color: inherit;
	cursor: pointer;
}
.nav-cell:has(.menu-btn) {
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.nav-cell:has(.menu-btn:hover) {
	background: rgba(0, 0, 0, 0.08);
}
.nav.is-dark .nav-cell:has(.menu-btn:hover) {
	background: rgba(255, 255, 255, 0.1);
}
.nav.is-menu-open .nav-cell:has(.menu-btn:hover) {
	background: rgba(0, 0, 0, 0.08);
}
.menu-btn .bar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu-btn .bar:nth-child(1) {
	transform: translate(-50%, calc(-50% - 5px));
}
.menu-btn .bar:nth-child(2) {
	transform: translate(-50%, calc(-50% + 5px));
}
.nav.is-menu-open .menu-btn .bar:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}
.nav.is-menu-open .menu-btn .bar:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-logo {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	align-self: center;
	height: var(--nav-h);
	margin-left: clamp(16px, 2vw, 24px);
}
.nav-logo img {
	height: 28px;
	width: auto;
	display: block;
}
.nav-logo .logo-dark,
.nav-logo .logo-menu {
	display: none;
}
.nav.is-dark .nav-logo .logo-light {
	display: none;
}
.nav.is-dark .nav-logo .logo-dark {
	display: block;
}
.nav.is-menu-open {
	background: var(--yellow);
	color: var(--dark-ink);
	border-bottom-color: #e0b700;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.nav.is-menu-open .nav-cell {
	border-color: #e0b700;
}
.nav.is-menu-open .nav-logo .logo-light,
.nav.is-menu-open .nav-logo .logo-dark {
	display: none;
}
.nav.is-menu-open .nav-logo .logo-menu {
	display: block;
}

/* waveform icon */
.wave-icon {
	width: 56px;
	height: 36px;
	color: inherit;
	overflow: visible;
	cursor: pointer;
}
.wave-icon .wb {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	transform-origin: center;
	transform-box: fill-box;
	animation: wbar 1.4s ease-in-out infinite;
	animation-play-state: paused;
	transform: scaleY(0.45);
}
.wave-icon .b1 {
	animation-delay: 0s;
}
.wave-icon .b2 {
	animation-delay: 0.1s;
}
.wave-icon .b3 {
	animation-delay: 0.22s;
}
.wave-icon .b4 {
	animation-delay: 0.32s;
}
.wave-icon .b5 {
	animation-delay: 0.18s;
}
.wave-icon .b6 {
	animation-delay: 0.4s;
}
.wave-icon .b7 {
	animation-delay: 0.28s;
}
.wave-icon .b8 {
	animation-delay: 0.12s;
}
.wave-icon .b9 {
	animation-delay: 0.36s;
}
@keyframes wbar {
	0%,
	100% {
		transform: scaleY(0.25);
	}
	50% {
		transform: scaleY(5.5);
	}
}

/* ============ Sections + rails ============ */
section,
.footer {
	position: relative;
	display: flex;
	flex-direction: column;
}
.rails::before,
.rails::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
	pointer-events: none;
	z-index: 1;
}
.rails::before {
	left: 80px;
}
.rails::after {
	right: 80px;
}
.rails.dark::before,
.rails.dark::after {
	background: rgba(255, 255, 255, 0.1);
}

/* ============ Generic section head ============ */
.section-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}
.section-head .eyebrow {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.22em;
	font-weight: 600;
	color: rgb(140, 140, 140);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.section-head h2 {
	font-family: var(--font-sans);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0 0 14px;
	text-wrap: pretty;
}
.section-head p {
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	margin: 0 auto;
	max-width: 620px;
	text-wrap: pretty;
}

/* ============ Hero crumb pill ============ */
.crumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 32px;
	padding: 0 14px;
	border-radius: 100px;
	background: #fff;
	border: 1px solid var(--line);
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: rgb(43, 43, 44);
	width: fit-content;
	text-transform: uppercase;
}
.crumb .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
}
.crumb .sep {
	opacity: 0.4;
}

/* ============ Hero pattern (generic, light) ============ */
.hero {
	background: var(--hero-bg);
	padding-top: var(--nav-h);
	min-height: 100vh;
	justify-content: center;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgb(220, 220, 220) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.45) 55%,
		rgba(0, 0, 0, 0) 95%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.45) 55%,
		rgba(0, 0, 0, 0) 95%
	);
}
.hero-grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 64px 80px;
	max-width: var(--page-max);
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.hero-headline {
	font-family: var(--font-sans);
	font-size: clamp(48px, 5.6vw, 84px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 24px 0;
	max-width: 720px;
	text-wrap: pretty;
}
.hero-headline .underline-sketch {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}
.hero-headline .underline-sketch svg {
	position: absolute;
	left: -2%;
	right: -2%;
	width: 104%;
	bottom: -0.18em;
	height: 0.36em;
	pointer-events: none;
	overflow: visible;
}
.hero-headline .underline-sketch svg path {
	fill: none;
	stroke: #ffd200;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hero-sub {
	font-size: 20px;
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 560px;
	letter-spacing: -0.005em;
	margin: 0 0 32px;
}
.hero-cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}

/* ============ Buttons ============ */
.btn-primary {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 32px;
	height: 55px;
	padding: 10px 10px 10px 36px;
	border-radius: 100px;
	background: linear-gradient(rgb(12, 8, 35) 0%, rgb(65, 65, 65) 100%);
	box-shadow: 0 6px 20px 0 rgba(255, 210, 0, 0.35);
	color: #fff;
	border: 0;
	font-size: 17px;
	font-family: inherit;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.35s ease,
		letter-spacing 0.35s ease;
}
.btn-primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		120px 80px at var(--mx, 50%) var(--my, 50%),
		rgba(255, 210, 0, 0.45),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: -1;
	pointer-events: none;
}
.btn-primary:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow:
		0 14px 36px 0 rgba(255, 210, 0, 0.55),
		0 0 0 1px rgba(255, 210, 0, 0.35) inset;
	letter-spacing: 0.005em;
}
.btn-primary:hover::before {
	opacity: 1;
}
.btn-primary:active {
	transform: translateY(0) scale(0.98);
	transition-duration: 0.12s;
}
.btn-primary .icon-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	color: var(--ink);
	flex: none;
	transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.btn-primary:hover .icon-circle {
	transform: rotate(45deg) scale(1.08);
	background: var(--yellow);
}
.btn-primary .icon-circle svg {
	width: 12px;
	height: 12px;
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	height: 55px;
	padding: 10px 10px 10px 36px;
	border-radius: 100px;
	background: transparent;
	color: var(--ink);
	border: 1px solid rgba(16, 16, 17, 0.18);
	font-size: 17px;
	font-family: inherit;
	cursor: pointer;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		background-color 0.35s ease,
		border-color 0.35s ease,
		letter-spacing 0.35s ease;
}
.btn-secondary:hover {
	transform: translateY(-2px) scale(1.02);
	background: rgba(16, 16, 17, 0.04);
	border-color: rgba(16, 16, 17, 0.32);
	letter-spacing: 0.005em;
}
.btn-secondary:active {
	transform: translateY(0) scale(0.98);
}
.btn-secondary .icon-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	display: grid;
	place-items: center;
	color: #fff;
	flex: none;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		background-color 0.35s ease;
}
.btn-secondary:hover .icon-circle {
	transform: rotate(45deg) scale(1.08);
	background: var(--yellow);
	color: var(--ink);
}
.btn-secondary .icon-circle svg {
	width: 12px;
	height: 12px;
}

/* dark variants for use in dark sections */
.on-dark .btn-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.22);
}
.on-dark .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.38);
}
.on-dark .btn-secondary .icon-circle {
	background: #fff;
	color: #000;
}

/* ============ Reusable sphere/wave animations ============ */
.sphere-spin {
	animation: sphereSpin 28s linear infinite;
	transform-origin: 50% 50%;
}
.sphere-spin-rev {
	animation: sphereSpin 36s linear infinite reverse;
	transform-origin: 50% 50%;
}
@keyframes sphereSpin {
	to {
		transform: rotate(360deg);
	}
}
.sphere-pulse {
	animation: spherePulse 3.4s ease-in-out infinite;
	transform-origin: 50% 50%;
}
@keyframes spherePulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.04);
		opacity: 0.82;
	}
}

/* ============ FOOTER ============ */
.footer {
	background: var(--dark-ink);
	color: #fff;
	padding: 96px 48px 64px;
	overflow: hidden;
}
.footer-inner {
	max-width: 1220px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.footer-cols {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 80px;
	padding: 80px 0;
}
.footer-brand .lockup {
	display: inline-flex;
	align-items: center;
}
.footer-brand .footer-wordmark {
	height: 36px;
	width: auto;
	display: block;
}
.footer-brand .tagline {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
}
.footer-socials {
	display: flex;
	gap: 24px;
	margin-top: 56px;
}
.footer-socials a {
	width: 24px;
	height: 24px;
	color: #fff;
	transition: opacity 0.2s ease;
}
.footer-socials a:hover {
	opacity: 0.7;
}
.footer-socials svg {
	width: 100%;
	height: 100%;
}
.footer-nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
.nav-col h4 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.005em;
	margin: 0 0 16px;
	color: #fff;
}
.nav-col a {
	display: block;
	font-size: 16px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
	transition: color 0.15s ease;
}
.nav-col a:hover {
	color: #fff;
}
.nav-col a.is-current {
	color: var(--yellow);
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 14px;
	color: #fff;
}
.footer-bottom .links {
	display: flex;
	gap: 20px;
}
.footer-bottom .links a {
	text-decoration: underline;
}
.footer-globe {
	position: absolute;
	left: 50%;
	bottom: -700px;
	transform: translateX(-50%);
	width: 1120px;
	height: 1120px;
	opacity: 0.18;
	pointer-events: none;
	z-index: 1;
}
.footer-globe svg {
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.5);
}

/* ============ MENU OVERLAY ============ */
.menu-overlay {
	position: fixed;
	inset: 0;
	background: var(--yellow);
	color: var(--dark-ink);
	z-index: 90;
	padding-top: var(--nav-h);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
	pointer-events: none;
}
.menu-overlay[data-open="true"] {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}
.menu-grid {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(480px, 720px);
	align-items: stretch;
	padding: 0 80px;
	gap: 64px;
	overflow: hidden;
}
.menu-left {
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 0;
}
.menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-list li {
	display: block;
}
.menu-link {
	display: inline-flex;
	align-items: center;
	position: relative;
	color: rgb(16, 16, 17);
	text-decoration: none;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.01em;
	padding: 4px 12px 4px 0;
	transition:
		padding 0.35s cubic-bezier(0.6, 0, 0.2, 1),
		color 0.25s ease;
}
.menu-link.is-inactive {
	color: rgb(180, 145, 0);
	pointer-events: none;
	cursor: default;
}
.menu-link::after {
	content: "";
	position: absolute;
	inset: 8% -2px 8% -2px;
	background: rgba(255, 255, 255, 0.55);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
	z-index: -1;
	border-radius: 2px;
}
.menu-link:hover::after {
	transform: scaleX(1);
}
.menu-link-trigger {
	cursor: pointer;
	width: 100%;
	gap: 10px;
	white-space: nowrap;
}
.menu-link-trigger.is-inactive {
	color: rgb(180, 145, 0);
	pointer-events: none;
	cursor: default;
}
.menu-chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.5, 1.6, 0.4, 1);
}
.menu-group.is-open > .menu-link-trigger .menu-chevron {
	transform: rotate(180deg);
}
.menu-sub-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-group.is-open > .menu-sub-list {
	max-height: 240px;
}
.menu-sub-link {
	display: block;
	padding: 5px 0 5px 20px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: rgb(16, 16, 17);
	text-decoration: none;
	transition: color 0.2s ease;
}
.menu-sub-link:hover {
	color: rgb(131, 109, 14);
}
.menu-sub-link.is-inactive {
	color: rgb(180, 145, 0);
	pointer-events: none;
	cursor: default;
}
.menu-card {
	width: 100%;
	max-width: 320px;
	margin-top: 53px;
	color: var(--dark-ink);
}
.menu-card h3 {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 4px;
}
.menu-card .sub {
	font-size: 14px;
	line-height: 1.4;
	color: rgb(131, 109, 14);
	margin: 0 0 32px;
}
.menu-socials {
	display: flex;
	gap: 18px;
	margin-top: 32px;
}
.menu-socials a {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	color: var(--dark-ink);
	border-radius: 6px;
	transition: transform 0.25s ease;
}
.menu-socials a:hover {
	transform: translateY(-2px);
}
.menu-socials svg {
	width: 22px;
	height: 22px;
}
.menu-demo {
	width: 100%;
	height: 100%;
	background: rgb(255, 227, 102);
	border-left: 1px solid rgb(224, 183, 0);
	border-right: 1px solid rgb(224, 183, 0);
	display: grid;
	grid-template-rows: 1fr 1fr;
	overflow: hidden;
}
.menu-demo-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 40px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.menu-demo-cta--dark {
	background: rgb(37, 37, 37);
	color: rgb(250, 250, 250);
}
.menu-demo-cta--light {
	background: rgb(255, 227, 102);
	color: rgb(16, 16, 17);
}
.menu-demo-cta--dark:hover {
	background: rgb(20, 20, 20);
}
.menu-demo-cta--light:hover {
	background: rgb(255, 235, 140);
}
.menu-demo-cta .label {
	font-family: "Geist", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(48px, 4.4vw, 68px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	transition: transform 0.35s cubic-bezier(0.5, 1.6, 0.4, 1);
}
.menu-demo-cta:hover .label {
	transform: translateX(8px);
}
.menu-demo-cta .arrow {
	width: 56px;
	display: inline-flex;
	transform: rotate(45deg);
	transition: transform 0.35s cubic-bezier(0.5, 1.6, 0.4, 1);
}
.menu-demo-cta .arrow svg {
	width: 100%;
	height: auto;
	display: block;
}
.menu-demo-cta:hover .arrow {
	transform: rotate(45deg) translate(0, -6px) scale(1.1);
}
.menu-foot {
	padding: 32px 80px;
	border-top: 1px solid rgb(235, 193, 0);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: rgb(131, 109, 14);
}
.menu-foot .legal {
	display: flex;
	gap: 28px;
}
.menu-foot a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}
body.menu-open {
	overflow: hidden;
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 24px;
		padding-top: 32px;
		padding-bottom: 56px;
	}
	.rails::before,
	.rails::after {
		display: none;
	}
	.footer-cols {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 0;
	}
	.footer-nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.menu-grid {
		grid-template-columns: 1fr;
		padding: 24px;
		gap: 24px;
		overflow: auto;
	}
}