/* biome-ignore-all lint: CSS is copied from the launched static design for visual parity. */
@import url("/assets/tokens.css");

: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);
	overflow-x: hidden;
}
body {
	font-family: var(--font-sans, "Geist", system-ui, sans-serif);
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: pointer;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ============ 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 CTAs (right side, before wave cell) */
.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: var(--font-sans, 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);
}

/* Primary — dark pill */
.nav-cta--primary {
	background: #181818;
	color: #fff;
}
.nav-cta--primary:hover {
	background: #000;
}
.nav-cta--primary .nav-cta-icon {
	background: #000;
	color: #fff;
}

/* Secondary — light pill */
.nav-cta--secondary {
	background: transparent;
	color: var(--dark-ink, #181818);
	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;
}

/* Dark-nav overrides */
.nav.is-dark .nav-cta--primary {
	background: #fff;
	color: #111;
}
.nav.is-dark .nav-cta--primary:hover {
	background: #f2f2f2;
}
.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;
}
/* hover background fills the full 80×80 nav cell, lines stay still */
.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);
}
/* (the old per-button square is no longer needed) */
.menu-btn::before {
	display: none;
}
.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);
	z-index: 1;
}
/* default = stacked */
.menu-btn .bar:nth-child(1) {
	transform: translate(-50%, calc(-50% - 5px));
}
.menu-btn .bar:nth-child(2) {
	transform: translate(-50%, calc(-50% + 5px));
}
/* open: bars cross into an X */
.nav.is-menu-open .menu-btn {
	transform: rotate(0deg);
}
.nav.is-menu-open .menu-btn .bar {
	width: 28px;
}
.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);
}

/* logo (uses official Mappa wordmark from design system) */
.nav-logo {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	align-self: center;
	height: var(--nav-h);
	margin-left: clamp(16px, 2vw, 24px);
	color: inherit;
}
.nav-logo img {
	height: 28px;
	width: auto;
	display: block;
}
.nav-logo .logo-dark {
	display: none;
}
.nav-logo .logo-menu {
	display: none;
}
.nav.is-dark .nav-logo .logo-light {
	display: none;
}
.nav.is-dark .nav-logo .logo-dark {
	display: block;
}

/* When the side menu is open, nav goes yellow, content stays dark */
.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 {
	display: none;
}
.nav.is-menu-open .nav-logo .logo-dark {
	display: none;
}
.nav.is-menu-open .nav-logo .logo-menu {
	display: block;
}

/* waveform icon (right cell) — animated voice bars */
.wave-icon {
	width: 56px;
	height: 36px;
	color: inherit;
	overflow: visible;
	cursor: pointer;
	transition: transform 0.35s ease;
}
.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;
}
.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);
	}
}
/* idle: bars paused, smaller dormant state.
     active (audio playing): full animation. */
.wave-icon .wb {
	animation-play-state: paused;
	transform: scaleY(0.45);
	transform-origin: center;
	transform-box: fill-box;
	transition: transform 0.35s ease;
}
.nav.is-audio-playing .wave-icon .wb {
	animation-play-state: running;
	transform: none;
}

/* per-bar amplitude variance for organic feel */
.wave-icon .b1,
.wave-icon .b9 {
	animation-duration: 1.6s;
}
.wave-icon .b3,
.wave-icon .b7 {
	animation-duration: 1.1s;
}
.wave-icon .b5 {
	animation-duration: 0.95s;
}

/* ============ SECTIONS — base layout ============ */
/* Sections size to content with comfortable vertical breathing room. */
section,
.footer {
	position: relative;
	min-height: auto;
	padding: 96px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.container {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 48px;
}

/* ============ HERO ============ */
.hero {
	background: var(--hero-bg);
	padding: var(--nav-h) 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 100vh;
	height: auto;
}
.hero-grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	justify-content: center;
	padding: 24px 48px;
	max-width: var(--page-max);
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.hero {
	justify-content: center;
}
.hero-left {
	justify-content: center;
}
.btn-primary.hero-record-cta {
	padding: 10px 10px 10px 36px;
	gap: 24px;
	height: 52px;
	font-size: 16px;
	width: 188px;
	flex: none;
	letter-spacing: normal !important;
}
.btn-primary.hero-record-cta:hover {
	letter-spacing: normal !important;
}
.btn-primary.hero-record-cta:disabled {
	cursor: wait;
	opacity: 0.68;
	transform: none;
}
.btn-primary.hero-record-cta .icon-circle svg {
	width: 14px;
	height: 14px;
}
.hero::before {
	z-index: 0 !important;
}
.hero-left {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 680px;
}
.hero-right {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
	min-height: 0;
}
.hero-portrait-mobile {
	display: none;
}

.hero-portrait {
	max-width: 100%;
	max-height: 560px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: center;
}
/* ===== MATCHING pill ===== */
.match-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 16px;
	border-radius: 100px;
	background: #fff;
	border: 1px solid var(--line);
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: rgb(43, 43, 44);
	width: fit-content;
}
.match-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.7);
	animation: matchPillFlick 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes matchPillFlick {
	0%,
	60%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.55);
	}
	8% {
		opacity: 0.2;
	}
	14% {
		opacity: 1;
	}
	22% {
		opacity: 0.35;
	}
	30% {
		opacity: 1;
		box-shadow: 0 0 0 6px rgba(255, 210, 0, 0);
	}
}
.hero-headline {
	font-family: var(--font-sans);
	font-size: 76px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -2.4px;
	color: var(--ink);
	margin: 0;
}
.hero-headline .hero-main-line {
	display: inline-block;
	font-size: 0.9em;
	letter-spacing: -2.2px;
}
.hero-headline .hero-sub-line {
	display: inline-block;
	font-size: 0.4em;
	letter-spacing: -0.5px;
	line-height: 1.15;
	vertical-align: middle;
}
.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 record card ===== */
.hero-record-card {
	background: #fff;
	border: 1px solid #000;
	border-radius: 16px;
	padding: 18px 8px 18px 24px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
	position: relative;
	isolation: isolate;
	max-width: 662px;
	width: 100%;
}
.hero-record-card::before {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	border-radius: 26px;
	background: conic-gradient(
		from var(--angle, 0deg),
		rgba(255, 210, 0, 0.95) 0deg,
		rgba(255, 210, 0, 0.25) 60deg,
		rgba(255, 210, 0, 0.05) 120deg,
		rgba(255, 210, 0, 0.05) 240deg,
		rgba(255, 210, 0, 0.25) 300deg,
		rgba(255, 210, 0, 0.95) 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	padding: 3px;
	filter: blur(0.4px) drop-shadow(0 0 14px rgba(255, 210, 0, 0.45));
	animation: conicSpin 4.2s linear infinite;
	pointer-events: none;
	z-index: -1;
}
.hero-record-stage {
	position: relative;
}
.hero-voice-progress {
	display: none;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-record-stage[data-state="recording"] .hero-voice-progress,
.hero-record-stage[data-state="paused"] .hero-voice-progress {
	display: block;
}
.hero-voice-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 400 13px / 1 var(--font-sans);
	color: rgb(80, 80, 82);
	margin-bottom: 10px;
}
.hero-voice-progress-label {
	font-weight: 500;
	color: rgb(43, 43, 44);
}
.hero-voice-progress-pct {
	font: 500 13px / 1 var(--font-mono, "Geist Mono", monospace);
	color: rgb(43, 43, 44);
	font-variant-numeric: tabular-nums;
}
.hero-voice-progress-track {
	position: relative;
	height: 4px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 9999px;
	overflow: hidden;
}
.hero-voice-progress-bar {
	height: 100%;
	background: rgb(31, 31, 31);
	border-radius: 9999px;
	transition: width 0.12s linear;
}
.hero-record-idle,
.hero-record-active {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: space-between;
}
.hero-record-active {
	display: none;
}
.hero-record-stage[data-state="recording"] .hero-record-idle,
.hero-record-stage[data-state="paused"] .hero-record-idle {
	display: none;
}
.hero-record-stage[data-state="recording"] .hero-record-active,
.hero-record-stage[data-state="paused"] .hero-record-active {
	display: flex;
}
.hero-record-text {
	line-height: 1.35;
}
.hero-record-title {
	font-size: 15px;
	font-weight: 600;
	color: rgb(43, 43, 44);
}
.hero-record-hint {
	font-size: 14px;
	color: rgb(120, 120, 122);
	margin-top: 4px;
}
.hrt-caret {
	display: inline-block;
	width: 2px;
	height: 0.95em;
	margin-left: 2px;
	vertical-align: -0.12em;
	background: currentColor;
	opacity: 0.75;
	animation: hrtBlink 1s steps(2, end) infinite;
}
@keyframes hrtBlink {
	0%,
	49% {
		opacity: 0.75;
	}
	50%,
	100% {
		opacity: 0;
	}
}
.hero-record-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 4px 0 22px;
	background: #0a0a0a;
	color: #fff;
	border-radius: 100px;
	border: 0;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition:
		transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.25s ease;
	white-space: nowrap;
	flex: none;
}
.hero-record-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.hero-record-btn:active {
	transform: scale(0.97);
}
.hero-record-mic-circle {
	width: 36px;
	height: 36px;
	background: #fff;
	color: #000;
	border-radius: 100%;
	display: grid;
	place-items: center;
}
.hero-record-mic-circle svg {
	width: 14px;
	height: 14px;
}
.hero-record-pulse {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(220, 40, 40);
	display: grid;
	place-items: center;
	position: relative;
}
.hero-record-pulse::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(220, 40, 40, 0.5);
	animation: heroPulse 1.4s ease-out infinite;
}
@keyframes heroPulse {
	0% {
		transform: scale(0.95);
		opacity: 0.7;
	}
	100% {
		transform: scale(1.25);
		opacity: 0;
	}
}
.hero-record-pulse span {
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 3px;
	display: block;
}
.hero-record-pulse svg {
	width: 20px;
	height: 20px;
	color: #fff;
	display: block;
}
.hero-record-bars {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 3px;
	height: 28px;
	overflow: hidden;
}
.hero-record-bars span {
	flex: 1;
	min-width: 3px;
	background: rgb(0, 0, 0);
	border-radius: 100px;
	animation: heroBars 1.1s ease-in-out infinite;
	transform-origin: center;
	height: 30%;
}
.hero-record-bars span:nth-child(odd) {
	animation-duration: 0.9s;
}
.hero-record-bars span:nth-child(3n) {
	animation-duration: 1.35s;
	animation-delay: 0.1s;
}
.hero-record-bars span:nth-child(4n + 1) {
	animation-duration: 1.6s;
	animation-delay: 0.2s;
}
.hero-record-stage[data-state="paused"] .hero-record-bars span,
.hero-record-stage[data-state="paused"] .hero-record-pulse::before {
	animation-play-state: paused;
}
@keyframes heroBars {
	0%,
	100% {
		transform: scaleY(0.25);
	}
	50% {
		transform: scaleY(1);
	}
}
.hero-record-stop {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.hero-record-stop svg {
	width: 12px;
	height: 12px;
}
/* ===== Hero stats row ===== */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	font-size: 13px;
	color: rgb(43, 43, 44);
	margin-top: 4px;
	width: 100%;
}
.hero-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}
.hero-stat svg {
	width: 18px;
	height: 18px;
	color: rgb(43, 43, 44);
	flex: none;
}
.hero-stat strong {
	font-weight: 700;
}
/* ===== Trusted-by strip (inside hero) ===== */
.hero-trusted {
	border-top: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	padding: 0 48px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	position: relative;
	z-index: 2;
}
.hero-trusted-label {
	font-size: 13px;
	color: rgb(43, 43, 44);
	font-weight: 500;
}
.hero-trusted-ticker {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		#000 8%,
		#000 92%,
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 8%,
		#000 92%,
		transparent
	);
}
.hero-trusted-logos {
	display: flex;
	align-items: center;
	gap: 80px;
	width: max-content;
	animation: marquee 30s linear infinite;
	opacity: 0.55;
}
.hero-trusted-logos .logo-mark {
	color: #252525;
}
/* subtle dot pattern behind everything in the hero */
.hero::before,
.demo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgb(220, 220, 220) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: 0 0;
	pointer-events: none;
	z-index: 0;
	/* fade the pattern toward the bottom so it doesn't compete with text */
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.55) 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.55) 55%,
		rgba(0, 0, 0, 0) 95%
	);
}
.hero-inner {
	z-index: 1;
}
.demo {
	position: relative;
}
.demo > * {
	position: relative;
	z-index: 1;
}
.hero-inner {
	width: 100%;
	padding: 48px 48px 0;
	position: relative;
}
/* ============ HERO AUDIO-WAVE STAGE ============ */
.hero-stage {
	position: absolute;
	left: 0;
	top: var(--nav-h);
	width: 100%;
	/* upper region of the hero, above the headline block */
	height: 460px;
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}
.hero-inner > * {
	position: relative;
	z-index: 1;
}
/* a single audio-wave circle — single SVG line that undulates */
.wave-circle {
	--size: 480px;
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--size);
	height: var(--size);
	transform: translate(-50%, -50%);
	transform-origin: center;
	will-change: transform, opacity;
}
.wave-circle svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
}
.wave-circle .wave-path {
	fill: none;
	stroke: rgb(170, 170, 170);
	stroke-width: 0.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
		stroke 0.5s ease,
		stroke-width 0.5s ease;
}
.wave-circle.is-red .wave-path {
	stroke: rgb(200, 90, 90);
}
.wave-circle.is-green .wave-path {
	stroke: rgb(80, 160, 100);
}

/* Centered person avatar inside a wave circle */
.wave-avatar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 31%;
	height: 31%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	background: rgb(230, 230, 230);
	border: 4px solid rgb(255, 255, 255);
	box-sizing: border-box;
	transition: border-color 0.35s ease;
}
.wave-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wave-circle.is-red .wave-avatar {
	border-color: rgb(220, 60, 60);
}
.wave-circle.is-green .wave-avatar {
	border-color: rgb(40, 170, 80);
}

/* MATCHING badge — sits at the CENTER of the circle */
.matching-badge {
	position: absolute;
	left: 50%;
	bottom: 18%;
	top: auto;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px 0 10px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: #111;
	opacity: 0;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(4px);
}
.matching-badge .signal-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.6);
	animation: signalSearch 1.1s ease-in-out infinite;
}
.matching-badge.match-no .signal-dot {
	background: rgb(220, 60, 60);
	animation: signalNo 1.1s ease-in-out infinite;
}
.matching-badge.match-yes .signal-dot {
	background: rgb(40, 170, 80);
	animation: signalYes 1.6s ease-in-out infinite;
}
@keyframes signalSearch {
	0% {
		transform: scale(0.8);
		box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.55);
	}
	70% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(255, 210, 0, 0);
	}
	100% {
		transform: scale(0.8);
		box-shadow: 0 0 0 0 rgba(255, 210, 0, 0);
	}
}
@keyframes signalNo {
	0%,
	100% {
		transform: scale(1);
	}
	25% {
		transform: scale(0.6);
	}
	50% {
		transform: scale(1.1);
	}
	75% {
		transform: scale(0.7);
	}
}
@keyframes signalYes {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(40, 170, 80, 0.4);
	}
	50% {
		transform: scale(1.1);
		box-shadow: 0 0 0 8px rgba(40, 170, 80, 0);
	}
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 4px 12px 4px 4px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--line);
	font-size: 14px;
	color: rgb(43, 43, 44);
}
.eyebrow-link {
	text-decoration: none;
	color: rgb(43, 43, 44);
	cursor: pointer;
	transition:
		transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}
.eyebrow-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: rgb(220, 220, 220);
}
.eyebrow .badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--yellow);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: #000;
}
.eyebrow .badge svg,
.eyebrow .badge .badge-icon {
	width: 14px;
	height: 14px;
	display: block;
}

.h-display {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 96px;
	line-height: 92px;
	letter-spacing: -3px;
	color: var(--ink);
	margin: 32px 0 24px;
}
.h-sub {
	max-width: 851px;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--ink-soft);
}

/* primary CTA pill — animated */
.btn-primary {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 32px;
	height: 55px;
	padding: 10px 10px 10px 48px;
	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: 18px;
	font-family: var(--font-sans);
	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;
}
/* yellow glow sweep on hover */
.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;
	transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}

/* Conduit-scoped: yellow primary CTA, same interactions */
.conduit .btn-primary {
	background: linear-gradient(
		180deg,
		rgb(255, 210, 0) 0%,
		rgb(255, 222, 76) 100%
	);
	color: rgb(16, 16, 17);
	box-shadow: 0 6px 24px 0 rgba(255, 210, 0, 0.45);
}
.conduit .btn-primary::before {
	background: radial-gradient(
		140px 90px at var(--mx, 50%) var(--my, 50%),
		rgba(255, 255, 255, 0.55),
		transparent 70%
	);
}
.conduit .btn-primary:hover {
	box-shadow:
		0 16px 40px 0 rgba(255, 210, 0, 0.65),
		0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}
.conduit .btn-primary .icon-circle {
	background: rgb(16, 16, 17);
	color: #fff;
}
.conduit .btn-primary:hover .icon-circle {
	background: #fff;
	color: rgb(16, 16, 17);
}

/* secondary CTA pill — outline style */
.btn-secondary {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 32px;
	height: 55px;
	padding: 10px 10px 10px 48px;
	border-radius: 100px;
	background: transparent;
	color: var(--ink);
	border: 1px solid rgba(16, 16, 17, 0.18);
	font-size: 18px;
	font-family: var(--font-sans);
	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);
	transition-duration: 0.12s;
}
.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;
}

.hero-cta {
	margin-top: 48px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}

/* ============ VIDEO / AUDIO EXPERIENCE SECTION ============ */
.video {
	position: relative;
	background: var(--dark-ink);
	color: var(--light);
	overflow: hidden;
	padding: 0;
	height: 720px;
	align-items: stretch;
}
/* dot pattern (matches hero, dark variant) */
.video::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		rgba(255, 255, 255, 0.1) 1px,
		transparent 1px
	);
	background-size: 22px 22px;
	background-position: 0 0;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.35) 55%,
		rgba(0, 0, 0, 0) 90%
	);
	mask-image: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.35) 55%,
		rgba(0, 0, 0, 0) 90%
	);
}
/* circular audio visualizer (single SVG path, FFT-driven) */
.video-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 520px;
	height: 520px;
	max-width: 70vmin;
	max-height: 70vmin;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}
.video-circle-path {
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 1.2;
	stroke-linejoin: round;
	stroke-linecap: round;
	transition:
		stroke 0.5s ease,
		stroke-width 0.5s ease;
	filter: drop-shadow(0 0 8px rgba(255, 210, 0, 0));
}
.video.is-playing .video-circle-path {
	stroke: var(--yellow);
	stroke-width: 1.4;
	filter: drop-shadow(0 0 10px rgba(255, 210, 0, 0.55));
}
/* faint scanline that activates after first reveal */
.video-scanline {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 210, 0, 0.35),
		transparent
	);
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.video.is-playing .video-scanline {
	opacity: 1;
}

/* UI layer */
.video-ui {
	position: relative;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: 48px 64px;
}

/* topbar */
.video-topbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(-12px);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
}
.video-topbar.is-in {
	opacity: 1;
	transform: translateY(0);
}
.video-topbar .brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.video-topbar .brand-name {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--light);
}
.video-topbar .brand-name em {
	font-style: normal;
	color: var(--yellow);
}
.video-tag {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	line-height: 1.7;
}
.video-topbar .meta {
	text-align: right;
}

/* center stack */
.video-center-stack {
	display: grid;
	place-items: center;
	position: relative;
}
.video-headline {
	text-align: center;
	pointer-events: none;
}
.video-headline .line {
	display: block;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(48px, 6.4vw, 92px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--light);
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-headline .line.is-in {
	opacity: 1;
	transform: translateY(0);
}
.video-headline .line .accent {
	color: var(--yellow);
}
.video-sub {
	margin-top: 28px;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 22px;
	letter-spacing: 0.02em;
	color: #ffffff;
	max-width: 760px;
	text-align: center;
	min-height: 1.4em;
	text-wrap: pretty;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}
.video-sub.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* play button (only shown when not playing) — reuses the existing vc-play visual */
.video-play-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	z-index: 4;
	transition: opacity 0.5s ease;
}
.video.is-playing .video-play-wrap {
	opacity: 0;
	pointer-events: none;
}
.vc-play {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgb(0, 0, 0);
	border: 2px solid var(--yellow);
	box-shadow: 0 0 0 8px rgba(255, 210, 0, 0.15);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}
.vc-play:hover {
	transform: scale(1.06);
	box-shadow:
		0 0 0 14px rgba(255, 210, 0, 0.18),
		0 0 40px rgba(255, 210, 0, 0.45);
}
.vc-play svg {
	width: 26px;
	height: 26px;
	margin-left: 4px;
	color: var(--light);
}
.video-play-label {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
}

/* bottom stats */
.video-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: end;
}
.video-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.video-stat.is-in {
	opacity: 1;
	transform: translateY(0);
}
.video-stat:nth-child(2) {
	text-align: center;
	align-items: center;
}
.video-stat:nth-child(3) {
	text-align: right;
	align-items: flex-end;
}
.video-stat .num {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--light);
}
.video-stat .num em {
	font-style: normal;
	color: var(--yellow);
}
.video-stat .label {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
}

/* progress bar (bottom of section, like a film strip) */
.video-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.06);
	z-index: 3;
}
.video-progress .bar {
	height: 100%;
	width: 0%;
	background: var(--yellow);
	box-shadow: 0 0 12px var(--yellow);
	transition: width 0.15s linear;
}

@media (max-width: 980px) {
	.video {
		height: 600px;
	}
	.video-ui {
		padding: 32px 24px;
	}
	.video-topbar .meta {
		display: none;
	}
	.video-bottom {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
	.video-stat:nth-child(3) {
		display: none;
	}
}

/* ============ TEST DEMO SECTION (search) ============ */
.demo {
	background: var(--hero-bg);
	padding: 120px 48px;
	align-items: center;
	text-align: center;
}
.demo-badge {
	width: 44px;
	height: 44px;
	border-radius: 5px;
	background: var(--yellow);
	display: grid;
	place-items: center;
	margin: 0 auto 8px;
	overflow: hidden;
	transform: scale(0.85);
}
.demo-badge.is-in {
	animation: badgePop 700ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
.demo-badge svg {
	width: 22px;
	height: 22px;
	color: #000;
	transform-origin: center;
}
.demo-badge.is-in svg {
	animation: glassScan 1100ms cubic-bezier(0.4, 0.05, 0.4, 1) 200ms both;
}
@keyframes badgePop {
	0% {
		transform: scale(0.6) rotate(-8deg);
		opacity: 0;
	}
	60% {
		transform: scale(1.12) rotate(2deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0);
		opacity: 1;
	}
}
@keyframes glassScan {
	0% {
		transform: translate(-6px, 4px) rotate(-12deg);
	}
	35% {
		transform: translate(6px, -4px) rotate(8deg);
	}
	65% {
		transform: translate(-3px, 2px) rotate(-4deg);
	}
	100% {
		transform: translate(0, 0) rotate(0);
	}
}
.demo h2 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -1px;
	margin: 8px auto;
	max-width: 586px;
	color: var(--ink);
}
.demo p.sub {
	font-size: 14px;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	margin: 0 0 32px;
}
.search-wrap {
	position: relative;
	width: 586px;
	max-width: 100%;
	margin: 0 auto;
}
.search-wrap::before {
	/* animated conic-gradient ring around the search box */
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	border-radius: 28px;
	background: conic-gradient(
		from var(--angle, 0deg),
		rgba(255, 210, 0, 0.95) 0deg,
		rgba(255, 210, 0, 0.25) 60deg,
		rgba(255, 210, 0, 0.05) 120deg,
		rgba(255, 210, 0, 0.05) 240deg,
		rgba(255, 210, 0, 0.25) 300deg,
		rgba(255, 210, 0, 0.95) 360deg
	);
	/* knock out the center so we get a "gradient border" effect */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	padding: 3px;
	filter: blur(0.4px) drop-shadow(0 0 14px rgba(255, 210, 0, 0.45));
	animation: conicSpin 4.2s linear infinite;
	pointer-events: none;
}
/* @property lets us animate a custom angle for the conic gradient */
@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes conicSpin {
	to {
		--angle: 360deg;
	}
}
.search-box {
	position: relative;
	background: rgb(243, 243, 241);
	border: 1px solid #000;
	border-radius: 20px;
	padding: 12px;
	text-align: left;
}
.search-box .input {
	width: 100%;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 8px;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 14px;
	line-height: 22px;
	color: var(--ink);
	resize: none;
}
.search-box .input::placeholder {
	color: rgb(97, 100, 107);
}
.search-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}
.mic-btn {
	width: 32px;
	height: 32px;
	border-radius: 100px;
	background: #000;
	border: 0;
	display: grid;
	place-items: center;
	color: #fff;
	transition:
		background-color 0.25s ease,
		transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.mic-btn:hover {
	background: var(--yellow);
	color: #000;
	transform: scale(1.1);
}
.mic-btn:active {
	transform: scale(0.95);
}
.mic-btn svg {
	width: 14px;
	height: 14px;
}
.search-wrap.is-focus::before {
	filter: blur(0) drop-shadow(0 0 22px rgba(255, 210, 0, 0.7));
}

/* === Record box (replaces text input) === */
.record-box {
	padding: 18px 18px 18px 22px;
	min-height: 96px;
}
.record-stage {
	position: relative;
	min-height: 60px;
}
.record-idle,
.record-active {
	display: flex;
	align-items: center;
	gap: 16px;
	transition: opacity 0.35s ease;
}
.record-active {
	display: none;
}
.record-stage[data-state="recording"] .record-idle {
	display: none;
}
.record-stage[data-state="recording"] .record-active {
	display: flex;
}
.record-mic {
	flex: none;
	width: 56px;
	height: 56px;
	background: #000;
	color: #fff;
	border-radius: 100%;
	display: grid;
	place-items: center;
	border: 0;
	cursor: pointer;
	transition:
		transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.25s ease,
		background-color 0.25s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.record-mic:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.record-mic:active {
	transform: scale(0.96);
}
.record-mic svg {
	width: 22px;
	height: 22px;
}
.record-prompt {
	line-height: 1.25;
	text-align: left;
}
.record-title {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	color: rgb(43, 43, 44);
}
.record-hint {
	font-family: var(--font-sans);
	font-size: 13px;
	color: rgb(120, 120, 122);
	margin-top: 2px;
}
/* RECORDING STATE */
.record-pulse {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgb(220, 40, 40);
	color: #fff;
	display: grid;
	place-items: center;
	position: relative;
}
.record-pulse span {
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 3px;
	display: block;
}
.record-pulse::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(220, 40, 40, 0.5);
	animation: recPulse 1.2s ease-out infinite;
}
@keyframes recPulse {
	0% {
		transform: scale(0.9);
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}
.record-bars {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 36px;
}
.record-bars span {
	flex: 1;
	background: rgb(43, 43, 44);
	border-radius: 6px;
	height: 30%;
	animation: recBar 0.9s ease-in-out infinite;
	transform-origin: center;
}
.record-bars span:nth-child(1) {
	animation-delay: -0.05s;
	animation-duration: 1.1s;
}
.record-bars span:nth-child(2) {
	animation-delay: -0.2s;
	animation-duration: 0.85s;
}
.record-bars span:nth-child(3) {
	animation-delay: -0.32s;
	animation-duration: 1.25s;
}
.record-bars span:nth-child(4) {
	animation-delay: -0.1s;
	animation-duration: 0.95s;
}
.record-bars span:nth-child(5) {
	animation-delay: -0.4s;
	animation-duration: 1.05s;
}
.record-bars span:nth-child(6) {
	animation-delay: -0.18s;
	animation-duration: 0.8s;
}
.record-bars span:nth-child(7) {
	animation-delay: -0.27s;
	animation-duration: 1.15s;
}
.record-bars span:nth-child(8) {
	animation-delay: -0.05s;
	animation-duration: 0.95s;
}
.record-bars span:nth-child(9) {
	animation-delay: -0.45s;
	animation-duration: 1.2s;
}
.record-bars span:nth-child(10) {
	animation-delay: -0.13s;
	animation-duration: 0.85s;
}
.record-bars span:nth-child(11) {
	animation-delay: -0.36s;
	animation-duration: 1s;
}
.record-bars span:nth-child(12) {
	animation-delay: -0.08s;
	animation-duration: 1.25s;
}
.record-bars span:nth-child(13) {
	animation-delay: -0.22s;
	animation-duration: 0.9s;
}
.record-bars span:nth-child(14) {
	animation-delay: -0.3s;
	animation-duration: 1.1s;
}
.record-bars span:nth-child(15) {
	animation-delay: -0.16s;
	animation-duration: 0.8s;
}
.record-bars span:nth-child(16) {
	animation-delay: -0.42s;
	animation-duration: 1.05s;
}
.record-bars span:nth-child(17) {
	animation-delay: -0.06s;
	animation-duration: 0.95s;
}
.record-bars span:nth-child(18) {
	animation-delay: -0.25s;
	animation-duration: 1.2s;
}
.record-bars span:nth-child(19) {
	animation-delay: -0.34s;
	animation-duration: 0.85s;
}
.record-bars span:nth-child(20) {
	animation-delay: -0.12s;
	animation-duration: 1s;
}
@keyframes recBar {
	0%,
	100% {
		height: 18%;
	}
	20% {
		height: 70%;
	}
	50% {
		height: 100%;
	}
	80% {
		height: 45%;
	}
}
.record-meta {
	flex: none;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 14px;
	color: rgb(43, 43, 44);
	min-width: 84px;
	text-align: right;
}
.record-timer {
	font-weight: 700;
}
.record-limit {
	color: rgb(140, 140, 143);
	margin-left: 4px;
}
.record-stop {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgb(43, 43, 44);
	color: #fff;
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
}
.record-stop:hover {
	background: rgb(220, 40, 40);
	transform: scale(1.06);
}
.record-stop svg {
	width: 14px;
	height: 14px;
}

.chips-intro {
	margin-top: 40px;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 14px;
	letter-spacing: -0.01em;
	color: rgb(140, 140, 140);
	font-style: italic;
}
.chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 14px;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.chip {
	padding: 8px 14px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--dark-ink);
	transition: background-color 0.2s ease;
}
.chip:hover {
	background: rgba(255, 210, 0, 0.18);
}

/* ============ MARKETING PHRASE ============ */
.marketing {
	background: var(--hero-bg);
	border-top: 1px solid var(--line);
	padding: 80px 48px;
	text-align: center;
	overflow: hidden;
	justify-content: center;
}
.hl-yellow {
	position: relative;
	padding: 0 2px;
}
.hl-yellow::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36%;
	background: var(--yellow);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hl-yellow.is-drawn::after {
	transform: scaleX(1);
}
/* ===== animated audio-wave background — vertical bars (equalizer style) ===== */
.marketing-wave {
	position: absolute;
	left: 0;
	right: 0;
	top: 38%;
	transform: translateY(-50%);
	height: 280px;
	pointer-events: none;
	overflow: hidden;
}
.marketing-wave .wave-track {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	gap: 8px;
	padding: 0 24px;
	box-sizing: border-box;
}
.marketing-wave .wave-bar {
	flex: none;
	width: 8px;
	background: rgb(232, 232, 232);
	border-radius: 6px;
	transform-origin: center;
	height: var(--h, 40px);
	animation: barPulse var(--dur, 1.4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes barPulse {
	0%,
	100% {
		transform: scaleY(0.45);
	}
	50% {
		transform: scaleY(1);
	}
}
.marketing h2 {
	position: relative;
	z-index: 3;
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -3px;
	color: var(--ink);
	margin: 0 0 12px;
}
.marketing p.sub {
	position: relative;
	z-index: 3;
	font-size: 32px;
	line-height: 1;
	color: var(--ink);
	margin: 0;
}
.trusted {
	margin-top: 140px;
	text-align: center;
}
.trusted .label {
	opacity: 0.6;
	font-size: 16px;
	color: var(--dark-ink);
	letter-spacing: -0.02em;
	margin-bottom: 24px;
}
.ticker {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		#000 10%,
		#000 90%,
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 10%,
		#000 90%,
		transparent
	);
}
.ticker-track {
	display: flex;
	align-items: center;
	gap: 80px;
	width: max-content;
	animation: marquee 30s linear infinite;
}
@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
.logo-mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	color: #252525;
}
.logo-mark .logo-svg {
	height: 100%;
	width: auto;
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ============ WHY THIS WORKS ============ */
.why {
	background: var(--hero-bg);
	padding: 80px 80px;
	align-items: stretch;
}
/* continuous vertical rails extending the nav cell dividers down through Marketing → Why → FAQ */
.marketing::before,
.marketing::after,
.why::before,
.why::after,
.conduit::before,
.conduit::after,
.faq::before,
.faq::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
	pointer-events: none;
	z-index: 1;
}
.marketing::before,
.why::before,
.conduit::before,
.faq::before {
	left: 80px;
}
.marketing::after,
.why::after,
.conduit::after,
.faq::after {
	right: 80px;
}
/* Dark-section variant of the rails */
.conduit::before,
.conduit::after {
	background: rgba(255, 255, 255, 0.1);
}
.why-card {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--hero-bg);
	width: 100%;
}
.why-head {
	text-align: center;
	padding: 32px 24px;
	border-bottom: 1px solid var(--line);
}
.why-head h2 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
	margin: 0 0 8px;
}
.why-head p {
	font-size: 14px;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	margin: 0;
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.why-item {
	padding: 24px;
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	overflow: hidden;
}
.why-item:last-child {
	border-right: 0;
}
.why-img {
	width: 100%;
	aspect-ratio: 16 / 8;
	background: #fff;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}
/* subtle inline visual placeholder for each card */
.why-img.v1 {
	background-image: url("/assets/why-card-1.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.why-img.v2 {
	background-image: url("/assets/why-card-2.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.why-img.v3 {
	background-image: url("/assets/why-card-3.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.why-item h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
}
.why-item p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	margin: 0;
}

/* ============ SUCCESS STORIES ============ */
.success {
	background: var(--hero-bg);
	padding: 80px 80px 96px;
	position: relative;
}
.success::before,
.success::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
	z-index: 1;
}
.success::before {
	left: 80px;
}
.success::after {
	right: 80px;
}
.success-inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 24px 48px 0;
	position: relative;
	z-index: 2;
}
.success-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.success-head h2 {
	font-family: var(--font-sans);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
	margin: 0 0 8px;
}
.success-sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
}
.success-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
	height: auto;
	padding: 24px;
}
.success-card {
	grid-column: span 2;
	background: var(--dark-ink);
	border-radius: 16px;
	display: grid;
	place-items: center;
	color: #fff;
	text-decoration: none;
	position: relative;
	min-height: 130px;
	min-width: 0;
	overflow: hidden;
	overflow: hidden;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.35s ease,
		background 0.35s ease;
	cursor: pointer;
	border: 0;
	isolation: isolate;
}
.success-card:nth-child(4) {
	grid-column: 2 / span 2;
}
/* equalizer bars background */
.success-card .eq {
	position: absolute;
	inset: auto 0 0 0;
	height: 60%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 20px 0;
	gap: 4px;
	opacity: 0.1;
	transition:
		opacity 0.45s ease,
		height 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2);
	pointer-events: none;
	z-index: 0;
}
.success-card .eq i {
	display: block;
	flex: 1 1 0;
	background: linear-gradient(
		180deg,
		rgba(255, 210, 0, 0) 0%,
		rgba(255, 210, 0, 0.85) 100%
	);
	border-radius: 2px 2px 0 0;
	height: 30%;
	transform-origin: bottom;
	animation: eqIdle 2.4s ease-in-out infinite;
}
.success-card .eq i:nth-child(2n) {
	animation-duration: 2s;
	animation-delay: -0.4s;
}
.success-card .eq i:nth-child(3n) {
	animation-duration: 2.8s;
	animation-delay: -0.9s;
}
.success-card .eq i:nth-child(5n) {
	animation-duration: 1.7s;
	animation-delay: -0.2s;
}
.success-card .eq i:nth-child(7n) {
	animation-duration: 3.1s;
	animation-delay: -1.3s;
}
@keyframes eqIdle {
	0%,
	100% {
		transform: scaleY(0.35);
	}
	50% {
		transform: scaleY(1);
	}
}
.success-card:hover .eq {
	opacity: 0.55;
	height: 75%;
}
/* yellow corner accent that draws in */
.success-card .corner {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 22px;
	height: 22px;
	pointer-events: none;
	z-index: 2;
}
.success-card .corner::before,
.success-card .corner::after {
	content: "";
	position: absolute;
	background: var(--yellow);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.success-card .corner::before {
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
}
.success-card .corner::after {
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	transform: scaleY(0);
	transform-origin: top center;
}
.success-card:hover .corner::before {
	transform: scaleX(1);
	transition-delay: 0s;
}
.success-card:hover .corner::after {
	transform: scaleY(1);
	transition-delay: 0.08s;
}
/* index */
.success-card .idx {
	position: absolute;
	bottom: 16px;
	left: 20px;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
	z-index: 2;
	transition: color 0.35s ease;
}
.success-card:hover .idx {
	color: var(--yellow);
}
/* company label */
.success-card .name {
	position: absolute;
	bottom: 16px;
	right: 20px;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
	z-index: 2;
	transition:
		color 0.35s ease,
		transform 0.35s ease;
}
.success-card:hover .name {
	color: #fff;
	transform: translateX(-2px);
}
.success-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
	background: rgb(20, 20, 21);
}
.success-card .arrow {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	place-items: center;
	color: #fff;
	z-index: 2;
	transform: translate(-6px, 6px) rotate(-45deg);
	opacity: 0;
	transition:
		opacity 0.35s ease,
		transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		background 0.35s ease,
		color 0.35s ease,
		border-color 0.35s ease;
}
.success-card:hover .arrow {
	opacity: 1;
	transform: translate(0, 0) rotate(0deg);
	background: var(--yellow);
	color: var(--dark-ink);
	border-color: var(--yellow);
}
.success-card .logo {
	position: relative;
	z-index: 1;
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.success-card:hover .logo {
	transform: translateY(-6px) scale(1.04);
}
.success-card .sail {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 0.18em;
	color: #fff;
}
.success-cta {
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 32px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
}
.success-cta .label {
	font-size: 18px;
	color: var(--ink);
	font-weight: 500;
}
.success-cta .btn-primary {
	height: 44px;
	padding: 0 8px 0 24px;
	font-size: 14px;
	gap: 18px;
}
.success-cta .btn-primary .icon-circle {
	width: 28px;
	height: 28px;
}
@media (max-width: 900px) {
	.success-grid {
		grid-template-columns: 1fr;
		height: auto;
	}
	.success-card,
	.success-card:nth-child(4) {
		grid-column: auto;
	}
	.success-inner {
		width: 100% !important;
	}
	.success-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* ============ IMPACT TABS (Scout / Conduit) ============ */
.impact {
	background: var(--hero-bg);
	padding: 64px 80px 72px;
	position: relative;
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}
.impact.is-conduit {
	background: #000;
	color: #fff;
}
.impact.is-conduit .impact-title {
	color: #fff;
}
.impact.is-conduit::before,
.impact.is-conduit::after {
	background: rgba(255, 255, 255, 0.08);
}
.impact.is-conduit .impact-tabs-row::before {
	background: rgba(255, 255, 255, 0.1);
}
.impact.is-conduit .impact-tab {
	color: rgba(255, 255, 255, 0.55);
}
.impact.is-conduit .impact-tab:hover {
	color: #fff;
}
.impact.is-conduit .impact-tab.is-active {
	background: #fff;
	color: #111;
	box-shadow:
		0 0 0 1.5px var(--yellow),
		0 4px 12px -4px rgba(0, 0, 0, 0.6);
}
.impact::before,
.impact::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
	z-index: 1;
}
.impact::before {
	left: 80px;
}
.impact::after {
	right: 80px;
}
.impact-inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}
.impact-title {
	font-family: var(--font-sans);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -1.2px;
	color: var(--ink);
	text-align: center;
	margin: 0 auto;
	max-width: 880px;
}
.impact-tabs-row {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 32px;
}
.impact-divider {
	position: absolute;
	left: -104px;
	right: -104px;
	top: 50%;
	height: 2px;
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.22) 60%,
		transparent 60%
	);
	background-size: 18px 2px;
	background-repeat: repeat-x;
	background-position: left center;
	transform: translateY(-1px);
	z-index: 0;
}
.impact-tabs {
	position: relative;
	z-index: 1;
	display: inline-flex;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 999px;
	padding: 4px;
	margin: 0;
	left: auto;
	transform: none;
}
.impact-tab {
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		color 0.25s ease,
		background 0.25s ease,
		box-shadow 0.25s ease;
}
.impact-tab:hover {
	color: var(--ink);
}
.impact-tab.is-active {
	background: #fff;
	color: var(--ink);
	box-shadow:
		0 0 0 1.5px var(--yellow),
		0 4px 12px -4px rgba(0, 0, 0, 0.08);
}
.impact-stage {
	margin-top: 36px;
	position: relative;
	min-height: 360px;
}
.impact-cta {
	margin-top: 16px;
	align-self: stretch;
	justify-content: center;
	height: 44px;
	padding: 0 8px 0 24px;
	font-size: 14px;
	gap: 18px;
}
.impact-cta .icon-circle {
	width: 28px;
	height: 28px;
}
.impact-panel {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1.7fr 1fr;
	grid-template-rows: 40px 1fr 40px auto;
	gap: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-panel.is-active {
	opacity: 1;
	pointer-events: auto;
}
.impact-panel .impact-card {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-panel.is-active .impact-card {
	opacity: 1;
	transform: translateY(0);
}
.impact-panel.is-active .impact-card.card-left {
	transition-delay: 0.15s;
}
.impact-panel.is-active .impact-card.card-center {
	transition-delay: 0.3s;
}
.impact-panel.is-active .impact-card.card-right {
	transition-delay: 0.45s;
}
.impact-panel.is-active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition-delay: 0.12s;
}
.impact-card {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--dark-ink);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px 24px;
	transition:
		transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		box-shadow 0.45s ease;
	cursor: pointer;
	isolation: isolate;
}
.impact-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-image: var(--bg);
	transition:
		transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.2),
		filter 0.5s ease;
}
.impact-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.72) 100%);
}
.impact-card > * {
	position: relative;
	z-index: 2;
}
.impact-card:not(a) {
	cursor: default;
}
.impact-card .impact-cta {
	cursor: pointer;
}
.impact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
}
.impact-card:hover::before {
	transform: scale(1.04);
}
.impact-card .card-logo {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 3;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
}
.impact-card h3 {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 8px;
	letter-spacing: -0.2px;
}
.impact-card p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	max-width: 56ch;
}
/* layout positions per card */
.impact-card.card-left {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.impact-card.card-center {
	grid-column: 2;
	grid-row: 1 / span 3;
}
.impact-card.card-right {
	grid-column: 3;
	grid-row: 2 / span 2;
}
.impact-tile {
	background: rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	align-self: stretch;
	justify-self: stretch;
}
.impact-tile.tile-tl {
	grid-column: 1;
	grid-row: 1;
	height: 56px;
	align-self: start;
}
.impact-tile.tile-bl {
	grid-column: 1;
	grid-row: 3;
	height: 56px;
	align-self: end;
}
.impact-tile.tile-tr {
	grid-column: 3;
	grid-row: 1;
	height: 56px;
	align-self: start;
}
.impact-tile.tile-br {
	grid-column: 3;
	grid-row: 3;
	height: 56px;
	align-self: end;
}
/* cards inherit the panel's smooth crossfade — no per-card animation */
.impact-card-illo {
	display: none;
	width: 100%;
	flex: 1 1 0;
	min-height: 0;
	object-fit: contain;
	object-position: center;
	z-index: 2;
	pointer-events: none;
	margin: 0;
}
.impact-panel[data-panel="scout"] .impact-card-illo {
	display: block;
}
.impact-panel[data-panel="conduit"] .impact-card-illo {
	display: block;
}
.impact-panel[data-panel="scout"] .impact-card,
.impact-panel[data-panel="conduit"] .impact-card {
	justify-content: flex-end;
	padding: 24px;
	gap: 14px;
}
.impact-panel[data-panel="scout"] .impact-card .card-logo,
.impact-panel[data-panel="conduit"] .impact-card .card-logo {
	margin-bottom: auto;
}
.impact-panel[data-panel="scout"] .impact-card .card-logo,
.impact-panel[data-panel="conduit"] .impact-card .card-logo {
	position: static;
	padding: 0;
}
.impact-panel[data-panel="scout"] .impact-card h3,
.impact-panel[data-panel="scout"] .impact-card p,
.impact-panel[data-panel="conduit"] .impact-card h3,
.impact-panel[data-panel="conduit"] .impact-card p {
	position: relative;
	z-index: 3;
	margin: 0;
}
/* Scout panel: light theme with yellow */
.impact-panel[data-panel="scout"] .impact-card {
	color: var(--ink);
	background: var(--hero-bg);
}
.impact-panel[data-panel="scout"] .impact-card::after {
	background: none;
}
.impact-panel[data-panel="scout"] .impact-card p {
	color: rgba(28, 28, 30, 0.78);
}
.impact-panel[data-panel="scout"] .impact-card .card-logo {
	color: rgba(28, 28, 30, 0.55);
}
.impact-panel[data-panel="scout"] .impact-card.card-left {
	--bg: linear-gradient(rgb(255, 240, 170), rgb(255, 240, 170));
}
.impact-panel[data-panel="scout"] .impact-card.card-center {
	--bg: linear-gradient(rgb(255, 232, 130), rgb(255, 232, 130));
}
.impact-panel[data-panel="scout"] .impact-card.card-right {
	--bg: linear-gradient(rgb(252, 246, 210), rgb(252, 246, 210));
}
/* Conduit panel: matches Scout's prior dark/yellow gradient set */
.impact-panel[data-panel="conduit"] .impact-card.card-left {
	--bg: linear-gradient(140deg, rgb(28, 28, 30) 0%, rgb(60, 52, 32) 100%);
}
.impact-panel[data-panel="conduit"] .impact-card.card-center {
	--bg: linear-gradient(
		140deg,
		rgb(20, 20, 21) 0%,
		rgb(60, 50, 12) 60%,
		rgb(120, 90, 12) 100%
	);
}
.impact-panel[data-panel="conduit"] .impact-card.card-right {
	--bg: linear-gradient(140deg, rgb(24, 24, 26) 0%, rgb(38, 38, 40) 100%);
}
@media (max-width: 900px) {
	.impact-stage {
		min-height: auto;
		position: relative;
	}
	.impact-panel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 16px;
		transition: none;
	}
	.impact-panel.is-active {
		position: relative;
		opacity: 1;
	}
	.impact-card.card-left,
	.impact-card.card-center,
	.impact-card.card-right {
		grid-column: 1;
		grid-row: auto;
		min-height: 260px;
	}
	.impact-tile {
		display: none;
	}
}

/* dark stat bar */
.stats {
	background: var(--dark-ink);
	color: var(--light);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	height: 144px;
	align-items: center;
}
.stat {
	text-align: center;
	border-right: 2px solid #fff;
	padding: 0 16px;
}
.stat:last-child {
	border-right: 0;
}
.stat .num {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: rgb(250, 249, 246);
}
.stat .lbl {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 16px;
	line-height: 1.4;
	color: rgb(122, 122, 122);
	margin-top: 4px;
}

/* ============ CONDUIT ============ */
.conduit {
	position: relative;
	background: rgb(0, 0, 0);
	color: var(--light);
	padding: 96px 80px 120px;
	overflow: hidden;
	border-bottom: 1px solid rgb(28, 28, 28);
}
.conduit-dashline {
	position: absolute;
	left: 81px;
	right: 80px;
	top: 0;
	height: 1px;
	background-image: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.22) 50%,
		transparent 50%
	);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.conduit-dashline.is-ready {
	opacity: 1;
}
.conduit-glow {
	content: "";
	position: absolute;
	width: 1100px;
	height: 1100px;
	left: var(--cx, 50%);
	top: var(--cy, 30%);
	transform: translate(-50%, -50%);
	background: radial-gradient(
		circle,
		rgba(255, 210, 0, 0.55) 0%,
		rgba(255, 210, 0, 0.18) 30%,
		rgba(255, 210, 0, 0.05) 55%,
		transparent 75%
	);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.conduit-wave {
	position: absolute;
	right: -380px;
	top: 50%;
	transform: translateY(-50%);
	width: 720px;
	height: 720px;
	pointer-events: none;
	z-index: 1;
	color: rgba(255, 255, 255, 0.55);
}
.conduit-wave .wave-circle {
	--size: 100%;
	pointer-events: none;
}
.conduit-inner {
	position: relative;
	z-index: 2;
	max-width: 1300px;
	margin: 0 auto;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-height: 640px;
	row-gap: 32px;
}
.conduit-headrow {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 32px;
}
.conduit-eyebrow {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 210, 0, 0.85);
	margin-bottom: -20px;
}
.conduit-supporting {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	max-width: 100%;
	margin: 0;
}
.conduit-subheadline {
	font-family: var(--font-sans);
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.7);
	margin: -16px 0 0;
	font-weight: 400;
	max-width: 720px;
}
.conduit-headrow h2 {
	font-family: var(--font-sans);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: rgb(255, 255, 255);
	margin: 0;
	max-width: 720px;
}
.conduit-pill-row {
	display: flex;
	justify-content: flex-end;
}
.conduit-pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 16px 4px 4px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(168, 168, 168, 0.17);
	box-shadow: 0 2px 40px rgba(0, 0, 0, 0.1);
}
.conduit-pill .badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--yellow);
	color: #000;
	border-radius: 4px;
	padding: 6px 12px 6px 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}
.conduit-pill .badge img {
	width: 14px;
	height: 14px;
	display: block;
}
.conduit-pill code {
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 13px;
	color: rgb(233, 233, 233);
}
.conduit-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 24px;
}
.conduit-item {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: start;
	column-gap: 20px;
	row-gap: 0;
}
.conduit-item .conduit-item-icon,
.conduit-item-icon {
	grid-row: 1 / span 3;
	grid-column: 1;
	display: block;
	width: 50px;
	height: 50px;
	margin-bottom: 0;
	margin-top: 4px;
}
.conduit-item .ico {
	grid-row: 1 / span 3;
	grid-column: 1;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: rgb(43, 43, 44);
	display: grid;
	place-items: center;
	margin-bottom: 0;
	margin-top: 4px;
}
.conduit-item .ico img {
	width: 24px;
	height: 24px;
}
.conduit-item h3 {
	grid-column: 2;
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.1;
}
.conduit-item p {
	grid-column: 2;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.4;
	color: rgb(182, 182, 182);
	margin: 0;
	max-width: 360px;
}
.conduit-cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.btn-conduit {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 10px 10px 10px 32px;
	border-radius: 100px;
	background: linear-gradient(
		180deg,
		rgb(255, 210, 0) 0%,
		rgb(255, 211, 8) 100%
	);
	color: #000;
	border: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}
.btn-conduit:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(255, 210, 0, 0.4);
}
.btn-conduit .icon-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #000;
	display: grid;
	place-items: center;
	color: rgb(250, 250, 250);
}
.btn-conduit .icon-circle svg {
	width: 14px;
	height: 14px;
}
.conduit-tools {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 12px 24px;
	border-radius: 40px;
	color: rgb(233, 233, 233);
	font-family: var(--font-sans);
	font-size: 13px;
}
.conduit-tools .tool-icons {
	display: inline-flex;
	gap: 14px;
	align-items: center;
}
.conduit-tools .tool-ico {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
	transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.conduit-tools .tool-ico:hover {
	transform: translateY(-2px) scale(1.08);
}
.conduit-tools .tool {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.1);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--font-mono, "Geist Mono", monospace);
	font-size: 10px;
	font-weight: 600;
}
@media (max-width: 900px) {
	.conduit-features {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.conduit-headrow {
		grid-template-columns: 1fr;
	}
	.conduit-wave {
		display: none;
	}
}

.wave-circle.is-conduit .wave-path {
	stroke: rgba(200, 200, 200, 0.6);
	stroke-width: 0.55;
}
/* ============ FAQ ============ */
.faq {
	background: var(--hero-bg);
	padding: 80px 80px;
	align-items: stretch;
}
.faq-card {
	width: 100%;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.faq-left {
	padding: 64px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 32px;
}
.faq-icon {
	width: 44px;
	height: 44px;
	border-radius: 5px;
	background: var(--yellow);
	display: grid;
	place-items: center;
}
.faq-icon svg {
	width: 22px;
	height: 22px;
	color: #000;
}
.faq-left h2 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ink);
	margin: 8px 0 0;
}
.faq-left p {
	font-size: 14px;
	color: var(--ink-soft);
	letter-spacing: -0.005em;
	line-height: 1.4;
	margin: 8px 0 0;
	max-width: 480px;
}
.faq-right {
	border-left: 1px solid var(--line);
	padding: 32px;
	display: flex;
	flex-direction: column;
}
.faq-item {
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.faq-item:last-child {
	border-bottom: 0;
}
.faq-q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	font-family: var(--font-sans);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--dark-ink);
}
.faq-q .toggle {
	flex: none;
	width: 24px;
	height: 24px;
	position: relative;
}
.faq-q .toggle::before,
.faq-q .toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 1.5px;
	background: #000;
	transform: translate(-50%, -50%);
	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}
.faq-q .toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.is-open .faq-q .toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}
.faq-a {
	overflow: hidden;
	max-height: 0;
	transition:
		max-height 0.35s ease,
		margin-top 0.35s ease;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--ink-soft);
}
.faq-item.is-open .faq-a {
	max-height: 240px;
	margin-top: 16px;
}

.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;
}

.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;
}

/* large faded globe behind footer */
.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);
}

/* responsive trims */
@media (max-width: 980px) {
	.h-display {
		font-size: 64px;
		line-height: 1.02;
		letter-spacing: -2px;
	}
	.marketing h2 {
		font-size: 64px;
		letter-spacing: -2px;
	}
	.marketing p.sub {
		font-size: 22px;
	}
	.hero-arc {
		width: 600px;
		height: 600px;
		top: -440px;
		transform: translateX(-30%);
	}
	.why-grid {
		grid-template-columns: 1fr;
		height: auto !important;
	}
	.why-item {
		border-right: 0;
		border-bottom: 1px solid var(--line);
		height: auto !important;
	}
	.stats {
		grid-template-columns: repeat(2, 1fr);
		height: auto;
		padding: 24px 0;
		gap: 24px 0;
	}
	.stat {
		border-right: 0;
	}
	.faq-card {
		grid-template-columns: 1fr;
	}
	.faq-right {
		border-left: 0;
		border-top: 1px solid var(--line);
	}
	.footer-cols {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 0;
	}
	.footer-nav {
		grid-template-columns: repeat(2, 1fr);
	}
	.video-graph {
		display: none;
	}
}

/* ============ MENU OVERLAY ============ */
.menu-overlay {
	position: fixed;
	inset: 0;
	background: var(--yellow);
	color: var(--dark-ink);
	z-index: 90; /* below nav (which is 100) so the X stays visible */
	padding-top: var(--nav-h);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* enter animation: clip-path reveal from top */
	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 0 80px;
	gap: 64px;
	position: relative;
	overflow: hidden;
}

.menu-left {
	padding: 40px 0;
}

/* ===== Demo card (right): two stacked CTAs — full height between nav and footer ===== */
.menu-demo {
	position: relative;
	z-index: 2;
	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:
		filter 0.3s ease,
		background-color 0.3s ease;
}
.menu-demo-cta--dark:hover {
	background: rgb(20, 20, 20);
}
.menu-demo-cta--light:hover {
	background: rgb(255, 235, 140);
}
.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 .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;
	flex: 1;
	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 {
	flex: none;
	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-left {
	position: relative;
	z-index: 2;
	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;
}
/* inactive (current page) link — muted dark-yellow, no hover effects */
.menu-link.is-inactive {
	color: rgb(180, 145, 0); /* dark yellow over yellow bg */
	pointer-events: none;
	cursor: default;
}
.menu-link.is-inactive::before,
.menu-link.is-inactive::after {
	display: none;
}
.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:hover,
.menu-link:focus-visible {
	color: rgb(16, 16, 17);
}
/* hover: glow dot + soft yellow highlight band over the text */
.menu-link::before {
	content: "";
	position: absolute;
	left: -32px;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.85);
	transform: translate(-12px, -50%) scale(0.6);
	opacity: 0;
	transition:
		transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1),
		opacity 0.25s ease;
	pointer-events: none;
}
.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::before,
.menu-link:focus-visible::before {
	transform: translate(0, -50%) scale(1);
	opacity: 1;
}
.menu-link:hover::after,
.menu-link:focus-visible::after {
	transform: scaleX(1);
}

/* "Let's talk" block now sits inside the left column, below the nav list */
.menu-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 320px;
	margin-top: 53px;
	color: var(--dark-ink);
}
.menu-card h3 {
	font-family: "Geist", system-ui, sans-serif;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 4px;
	color: rgb(16, 16, 17);
}
.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,
		opacity 0.25s ease;
}
.menu-socials a:hover {
	transform: translateY(-2px);
}
.menu-socials svg {
	width: 22px;
	height: 22px;
}

/* Bottom legal row */
.menu-foot {
	position: relative;
	z-index: 2;
	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;
}

/* Stagger reveal of menu links / card / footer */
.menu-overlay .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-overlay[data-open="true"] .reveal {
	opacity: 1;
	transform: translateY(0);
}
.menu-overlay[data-open="true"] .reveal:nth-child(1) {
	transition-delay: 0.35s;
}
.menu-overlay[data-open="true"] .reveal:nth-child(2) {
	transition-delay: 0.42s;
}
.menu-overlay[data-open="true"] .reveal:nth-child(3) {
	transition-delay: 0.49s;
}
.menu-overlay[data-open="true"] .reveal:nth-child(4) {
	transition-delay: 0.58s;
}
.menu-overlay[data-open="true"] .menu-card.reveal {
	transition-delay: 0.5s;
}
.menu-overlay[data-open="true"] .menu-foot .reveal {
	transition-delay: 0.65s;
}

/* prevent body scroll while menu open */
body.menu-open {
	overflow: hidden;
}

@media (max-width: 900px) {
	.menu-grid {
		grid-template-columns: 1fr;
		padding: 32px 24px;
		gap: 24px;
		overflow: auto;
	}
	.menu-demo-cta {
		width: 100% !important;
	}
	.menu-link {
		font-size: clamp(40px, 12vw, 72px);
	}
	.menu-cta {
		padding: 0 24px 24px;
	}
	.menu-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 0 24px 24px;
	}
	.menu-foot .legal {
		gap: 18px;
	}
}

/* ============ MOBILE (≤ 600px) ============ */
/* ============ TABLET-WIDE (721–1200px) ============ */
@media (min-width: 721px) and (max-width: 1200px) {
	.hero-grid {
		gap: 32px;
		padding: 24px 36px;
	}
	.hero-portrait {
		width: 100% !important;
		height: clamp(320px, 38vw, 460px) !important;
		object-fit: cover !important;
		object-position: center top !important;
	}
	.hero-headline {
		font-size: clamp(44px, 5vw, 54px);
	}
}

/* ============ TABLET-NARROW (601–720px) ============ */
@media (min-width: 601px) and (max-width: 720px) {
	.hero-grid {
		grid-template-columns: 1fr !important;
		padding: 24px 32px 0 !important;
		gap: 24px;
		font-size: 48px !important;
	}
	.hero-right {
		display: none;
	}
	.hero-left {
		gap: 24px;
	}
	.hero-portrait-mobile {
		display: block;
		width: 92%;
		height: clamp(415px, calc(190px + 37.5vw), 460px);
		background:
			url("/assets/hero-portrait.png") center bottom / cover no-repeat;
		border-radius: 12px;
		margin: 0 auto;
	}
	.hero-headline {
		font-size: 52px;
		letter-spacing: -1.8px;
	}
	.hero-stats {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
	}
	.hero-record-idle {
		flex-wrap: wrap;
		gap: 12px;
	}
	.btn-primary.hero-record-cta {
		width: 100% !important;
		justify-content: center;
	}
	.hero-trusted {
		padding: 0 32px 28px !important;
	}
	.hero-cta {
		flex-direction: column;
	}
	.btn-primary,
	.btn-secondary {
		width: 100%;
		justify-content: center;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	/* Nav — collapse CTA column, shrink cells */
	.nav {
		grid-template-columns: 64px 1fr 64px !important;
	}
	.nav-cell {
		width: 64px;
	}
	.nav-cta-cell {
		display: none;
	}

	/* Hero grid → single column */
	.hero-grid {
		grid-template-columns: 1fr !important;
		padding: 24px 20px 0 !important;
		gap: 24px;
		font-size: 32px !important;
	}
	.hero-right {
		display: none;
	}
	.hero-left {
		gap: 24px;
	}
	.hero-portrait-mobile {
		display: block;
		width: 92%;
		height: clamp(288px, calc(-33.2px + 74.71vw), 415px);
		background:
			url("/assets/hero-portrait.png") center bottom / cover no-repeat;
		border-radius: 12px;
		margin: 0 auto;
	}
	.hero-headline {
		font-size: 42px;
		letter-spacing: -1.6px;
	}
	.hero-stats {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
	}
	.hero-record-idle {
		flex-wrap: wrap;
		gap: 12px;
	}
	.btn-primary.hero-record-cta {
		width: 100% !important;
		justify-content: center;
	}
	.hero-trusted {
		padding: 0 20px 20px !important;
	}
	.hero-cta {
		flex-direction: column;
	}
	.btn-primary,
	.btn-secondary {
		width: 100%;
		justify-content: center;
		font-size: 16px;
	}

	/* General container padding */
	.container {
		padding: 0 20px;
	}
	section,
	.footer {
		min-height: auto;
	}

	/* Marketing */
	.marketing {
		padding: 60px 20px;
	}
	.marketing::before {
		left: 20px;
	}
	.marketing::after {
		right: 20px;
	}
	.marketing h2 {
		font-size: 44px;
		letter-spacing: -1.5px;
	}
	.marketing p.sub {
		font-size: 20px;
	}
	.h-display {
		font-size: 44px;
		line-height: 1.05;
		letter-spacing: -1.5px;
	}

	/* Why */
	.why {
		padding: 40px 20px;
	}
	.why::before {
		left: 20px;
	}
	.why::after {
		right: 20px;
	}
	.why-grid {
		grid-template-columns: 1fr !important;
		height: auto !important;
	}
	.why-item {
		height: auto !important;
	}

	/* Success */
	.success {
		padding: 40px 20px 60px;
	}
	.success::before {
		left: 20px;
	}
	.success::after {
		right: 20px;
	}
	.success-inner {
		width: 100% !important;
		padding: 16px 0 0;
	}
	.success-grid {
		height: auto;
		gap: 8px;
	}
	.success-card {
		min-height: 80px;
	}
	.success-card .logo-svg {
		max-width: 120px !important;
	}

	/* Impact */
	.impact {
		padding: 40px 20px;
	}
	.impact::before {
		left: 20px;
	}
	.impact::after {
		right: 20px;
	}

	/* Stats bar */
	.stats {
		grid-template-columns: 1fr !important;
		height: auto;
		padding: 24px 0;
	}
	.stat {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: 16px;
	}
	.stat:last-child {
		border-bottom: 0;
	}

	/* Why — inline heights from JS */
	.why-head {
		height: auto !important;
		min-height: 0 !important;
	}
	.why-img {
		height: 140px !important;
	}

	/* Impact — inline heights */
	.impact-card {
		height: auto !important;
		min-height: 180px !important;
	}

	/* Conduit */
	.conduit {
		padding: 60px 20px 80px;
	}
	.conduit::before {
		left: 20px;
	}
	.conduit::after {
		right: 20px;
	}
	.conduit-inner {
		padding-left: 0;
		min-height: auto;
	}
	.conduit-features {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.conduit-wave {
		display: none;
	}

	/* Video */
	.video {
		height: auto;
		min-height: 540px;
	}
	.video-topbar {
		display: none !important;
	}
	.video-circle {
		top: 40% !important;
	}
	.video-play-wrap {
		top: 40% !important;
	}
	.video-center-stack {
		position: static;
	}
	.video-headline .line {
		font-size: clamp(13px, 4vw, 18px) !important;
	}
	.video-sub {
		font-size: 13px !important;
		max-width: 200px;
		margin-top: 8px;
	}
	.video-bottom {
		grid-template-columns: 1fr 1fr 1fr;
		padding: 0 16px 16px;
		margin-top: 56px !important;
	}
	.video-stat:nth-child(3) {
		display: flex !important;
	}
	.video-stat .num {
		font-size: 22px !important;
	}
	.video-stat:nth-child(2),
	.video-stat:nth-child(3) {
		text-align: left;
		align-items: flex-start;
	}

	/* FAQ */
	.faq {
		padding: 40px 20px;
	}
	.faq::before {
		left: 20px;
	}
	.faq::after {
		right: 20px;
	}
	.faq-card {
		grid-template-columns: 1fr;
	}
	.faq-right {
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	/* Demo search section */
	.demo {
		padding: 60px 20px;
	}

	/* Footer */
	.footer {
		padding: 60px 20px 40px;
	}
	.footer-cols {
		grid-template-columns: 1fr;
	}

	/* Menu overlay */
	.menu-overlay {
		overflow-y: auto !important;
	}
	.menu-grid {
		padding: 24px 20px;
		gap: 16px;
		grid-template-columns: 1fr !important;
		overflow: visible !important;
	}
	.menu-left {
		align-self: start !important;
	}
	.menu-link {
		font-size: clamp(26px, 7vw, 34px) !important;
		line-height: 1.2 !important;
	}
	.menu-demo {
		height: auto !important;
	}
	.menu-demo-cta {
		padding: 20px 24px !important;
	}
	.menu-demo-cta .label {
		font-size: clamp(24px, 7vw, 32px) !important;
	}
	.menu-demo-cta .arrow {
		width: 36px !important;
	}
}

/* ---- accordion sub-menu ---- */
.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;
}

/* ============ HERO VARIANT: PostHog graph test ============ */
.hero-sphere {
	display: none;
	position: absolute;
	left: 50%;
	top: 35%;
	width: min(820px, 92vmin);
	height: min(820px, 92vmin);
	transform: translate(-50%, -50%) rotate(90deg);
	pointer-events: none;
	z-index: 0;
	opacity: 0.64;
	-webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 95%);
	mask-image: radial-gradient(closest-side, #000 60%, transparent 95%);
}

.hero[data-hero-variant="photo"] .match-pill {
	display: none;
}

.hero[data-hero-variant="graph"] {
	position: relative;
}

.hero[data-hero-variant="graph"] .hero-sphere {
	display: block;
}

.hero[data-hero-variant="graph"] .hero-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 24px;
}

.hero[data-hero-variant="graph"] .hero-left {
	align-items: center;
	max-width: 880px;
	width: 100%;
}

.hero[data-hero-variant="graph"] .hero-headline {
	text-align: center;
}

.hero[data-hero-variant="graph"] .hero-stats {
	justify-content: center;
}

.hero[data-hero-variant="graph"] .hero-record-title {
	text-align: left;
}

.hero[data-hero-variant="graph"] .btn-primary.hero-record-cta {
	width: auto !important;
}

.hero[data-hero-variant="graph"] .hero-right,
.hero[data-hero-variant="graph"] .hero-portrait-mobile {
	display: none !important;
}

.hero[data-hero-variant="graph"] .match-pill {
	display: inline-flex;
}

@media (max-width: 720px) {
	.hero[data-hero-variant="graph"] .hero-sphere {
		top: 28%;
		width: min(560px, 110vmin);
		height: min(560px, 110vmin);
	}
}