/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · genre: atmospheric · macrostructure: Split Studio (left-aligned editorial hero + live ranked panel) · theme: custom (dark · grotesque-sans · violet #5612D6) · enrichment: Tier-A CSS art · nav: N1 · footer: Ft1 */

@import url("tokens.css");

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

html,
body {
	overflow-x: clip;
}

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

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: oldstyle-nums;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
	/* short headings stay on one line; longer ones wrap into balanced lines */
	text-wrap: balance;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

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

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Layout primitives ---------- */

.wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 var(--space-md);
}

.eyebrow-quiet {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

/* ---------- Scroll reveal (rises + fades up on enter) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.7s var(--ease-out),
		transform 0.7s var(--ease-out);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	padding: 0.7rem 1.25rem;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--dur-short) var(--ease-out),
		border-color var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out),
		color var(--dur-short) var(--ease-out);
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	box-shadow: 0 6px 20px oklch(48% 0.27 300 / 0.35);
}

.btn--primary:hover {
	background: var(--color-accent-2);
	transform: translateY(-1px);
	box-shadow: 0 10px 28px oklch(48% 0.27 300 / 0.45);
}

.btn--primary:active {
	transform: translateY(0);
}

.btn--ghost {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-rule);
}

.btn--ghost:hover {
	border-color: var(--color-ink);
	transform: translateY(-1px);
}

.btn--ghost:active {
	transform: translateY(0);
}

.btn--lg {
	font-size: var(--text-base);
	padding: 0.85rem 1.6rem;
}

/* Gradient border + a bright arc that sweeps around the border line */
.btn--glow {
	position: relative;
	isolation: isolate;
}

.btn__label {
	position: relative;
	z-index: 2;
}

/* base static gradient border */
.btn--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		oklch(78% 0.09 300) 0%,
		oklch(62% 0.18 297) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* a window clipped to the 1px border band; the spinning arc shows only here */
.btn__ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.btn__spin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 320%;
	aspect-ratio: 1;
	translate: -50% -50%;
	/* one smooth highlight that fades in and out — no hard spike */
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 280deg,
		oklch(96% 0.05 300 / 0.85) 340deg,
		transparent 360deg
	);
	animation: btn-arc-spin 3.4s linear infinite;
}

@keyframes btn-arc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Typographic link CTA */
.tlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 500;
	color: var(--color-accent);
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-mid) var(--ease-out);
}

.tlink:hover {
	background-size: 100% 1px;
}

.tlink .arrow {
	transition: transform var(--dur-short) var(--ease-out);
}

.tlink:hover .arrow {
	transform: translateX(3px);
}

/* ---------- Full-width top bar ---------- */

.nav {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	width: 100%;
	background: color-mix(in oklch, var(--color-paper) 70%, transparent);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	border-bottom: 1px solid var(--color-rule);
}

.nav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-md);
	letter-spacing: -0.03em;
	color: var(--color-ink);
}

.wordmark__icon {
	height: 1.45em;
	width: auto;
	display: block;
}

.nav__links {
	display: flex;
	gap: var(--space-md);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-2);
}

.nav__links a {
	white-space: nowrap;
	transition: color var(--dur-short) var(--ease-out);
}

.nav__links a:hover {
	color: var(--color-ink);
}

.nav__actions {
	margin-left: auto;
	padding-left: var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.nav__login {
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-2);
	transition: color var(--dur-short) var(--ease-out);
}

.nav__login:hover {
	color: var(--color-ink);
}

/* compact pill CTA in the bar (matches the hero button shape) */
.nav .btn--primary {
	border-radius: var(--radius-pill);
	padding: 0.6rem 1.2rem;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: none;
}

.nav .btn--primary:hover {
	box-shadow: 0 6px 18px oklch(48% 0.27 300 / 0.4);
}

/* ---------- Mobile nav: hamburger + drawer (shown <= 60rem) ---------- */
.nav__burger {
	display: none; /* desktop: hidden; revealed in the 60rem media query */
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	margin: -6px -8px -6px 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.nav__burger span {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	border-radius: 2px;
	background: var(--color-ink);
	transition:
		transform 0.25s var(--ease-out),
		opacity 0.2s var(--ease-out);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
	display: none; /* shown only when .nav.is-open inside the 60rem media query */
	flex-direction: column;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.nav__drawer a {
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-2);
	padding: 0.85rem 0.2rem;
	border-bottom: 1px solid var(--color-rule-soft);
	transition: color var(--dur-short) var(--ease-out);
}
.nav__drawer a:hover { color: var(--color-ink); }
.nav__drawer .nav__login {
	font-size: var(--text-sm);
}
.nav__drawer .btn--primary {
	margin-top: var(--space-md);
	width: 100%;
	justify-content: center;
	border-bottom: 0;
	text-align: center;
	color: var(--color-accent-ink); /* keep button label legible on violet (the .nav__drawer a rule would darken it) */
}
.nav__drawer .btn--primary:hover {
	color: var(--color-accent-ink);
}

/* ---------- Hero · H2 split diptych ---------- */

.hero {
	position: relative;
	padding-top: var(--space-lg);
	padding-bottom: var(--space-2xl);
	overflow: clip;
}

/* atmospheric violet glow — single radial, not an aurora blob */
.hero::before {
	content: "";
	position: absolute;
	top: -18%;
	left: 50%;
	translate: -50% 0;
	width: 90vw;
	max-width: 900px;
	aspect-ratio: 1.4;
	background: radial-gradient(ellipse at center, var(--color-glow), transparent 60%);
	pointer-events: none;
	z-index: 0;
	filter: blur(14px);
}

.hero .wrap {
	position: relative;
	z-index: 1;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.4rem 0.85rem;
	margin-bottom: var(--space-lg);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	background: color-mix(in oklch, var(--color-accent) 12%, transparent);
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.hero__badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 30%, transparent);
}

.hl {
	color: var(--color-accent);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: var(--space-xl) var(--space-2xl);
}

.hero__title {
	font-size: var(--text-display);
	max-width: 18ch;
	margin-top: var(--space-md);
}

.hero__lede {
	margin-top: var(--space-lg);
	font-size: var(--text-md);
	line-height: 1.55;
	color: var(--color-ink-2);
	max-width: 56ch;
}

.hero__cta {
	margin-top: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.hero__note {
	margin-top: var(--space-lg);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	color: var(--color-ink-3);
}

/* Tier-A CSS art — ranked candidate panel */
.proof-panel {
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(22% 0.02 264 / 0.03), 0 18px 40px oklch(22% 0.02 264 / 0.05);
}

.proof-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
}

.proof-panel__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-2);
}

.proof-panel__score-label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.rank-row {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-rule-soft);
}

.rank-row:last-child {
	border-bottom: 0;
}

.rank-row__n {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-ink-3);
	font-variant-numeric: tabular-nums;
}

.rank-row__bar {
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-paper-3);
	overflow: hidden;
}

.rank-row__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
}

.rank-row__score {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- Logo wall · T2 hairline ---------- */

.logos {
	padding-block: var(--space-2xl);
	border-top: 1px solid var(--color-rule);
}

.logos__stats {
	text-align: center;
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--color-ink);
	margin-bottom: var(--space-2xs);
}

.logos__label {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

/* carousel-first variant (/v2): logo band on top, stats/trust text below — clean rhythm,
   no stray top rule (the full-bleed marquee band is the divider) */
.logos--stacked {
	border-top: none;
	padding-block: var(--space-xl) var(--space-3xl);
}
.logos--stacked .logos__text {
	margin-top: var(--space-2xl);
	text-align: center;
}
.logos--stacked .logos__stats {
	margin: 0 0 var(--space-xs);
}
.logos--stacked .logos__label {
	margin: 0;
}

/* seamless flow from the logo carousel into the "One AI platform" section (no rule) */
.logos--stacked .marquee {
	border-bottom: none;
}
.logos--stacked + .caps {
	border-top: none;
}

/* proof block: trust line + label above the 5+/100M+/2X stat cards */
.stats__intro {
	text-align: center;
	margin-bottom: var(--space-2xl);
}
.stats__intro .logos__stats {
	margin-bottom: var(--space-xs);
}
.stats__intro .logos__label {
	margin: 0;
}

/* Logo carousel — seamless infinite marquee */
.marquee {
	position: relative;
	overflow: hidden;
	border-block: 1px solid var(--color-rule);
	background: var(--color-paper-2);
	padding-block: var(--space-2xl);
	/* full-bleed across the page width, edge to edge */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.marquee__track {
	display: flex;
	width: max-content;
	gap: clamp(2.5rem, 6vw, 5rem);
	animation: marquee-scroll 42s linear infinite;
}


.marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* Source logos are white-on-transparent — native fit for the dark theme. */
.marquee__item img {
	height: 72px;
	width: auto;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity var(--dur-mid) var(--ease-out);
}

.marquee__item img:hover {
	opacity: 1;
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* exactly one set (half the doubled track) */
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-xl) clamp(2rem, 5vw, 4rem);
	}
}

/* ---------- Stat strip · T4 ---------- */

.stats {
	padding-block: var(--space-3xl);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.stat {
	position: relative;
	padding: var(--space-xl) var(--space-lg);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition:
		border-color var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}

/* faint violet wash that pools at the bottom of each card */
.stat::after {
	content: "";
	position: absolute;
	inset: auto -20% -60% -20%;
	height: 80%;
	background: radial-gradient(ellipse at center, color-mix(in oklch, var(--color-accent) 20%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-out);
	pointer-events: none;
}

.stat:hover {
	border-color: color-mix(in oklch, var(--color-accent) 55%, var(--color-rule));
	transform: translateY(-3px);
}

.stat:hover::after {
	opacity: 1;
}

/* short accent tick above the number */
.stat__num {
	position: relative;
	font-family: var(--font-mono);
	font-size: clamp(2.5rem, 4vw, 3.4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--color-ink);
	line-height: 1;
}

.stat__num--pending {
	color: var(--color-ink-3);
}

.stat__label {
	position: relative;
	margin-top: var(--space-sm);
	font-size: var(--text-base);
	line-height: 1.45;
	color: var(--color-ink-2);
}

.stat__hint {
	display: block;
	margin-top: var(--space-3xs);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--color-ink-3);
}

/* ---------- Capabilities · Split Studio diptychs ---------- */

.caps {
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.caps__intro {
	max-width: 50ch;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.caps__intro h2 {
	font-size: var(--text-2xl);
}

.caps__intro p {
	margin-top: var(--space-md);
	font-size: var(--text-md);
	color: var(--color-ink-2);
}

.dip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-block: var(--space-2xl);
}

/* Grid/flex blow-out guard: by default grid & flex items have min-width:auto, so
   a single nowrap child (e.g. the typing demo's query) can force a track wider
   than the viewport and get clipped. Letting these panels shrink keeps every
   animated demo inside the screen on phones/tablets. */
.dip > *,
.hero__grid > *,
.compare > *,
.contact-grid > *,
.gsearch,
.srank,
.cgrowth,
.compose,
.hpanel,
.tcard {
	min-width: 0;
}

.dip + .dip {
	border-top: 1px solid var(--color-rule-soft);
}

.dip__text h3 {
	font-size: var(--text-xl);
}

.dip__text p {
	margin-top: var(--space-md);
	font-size: var(--text-md);
	line-height: 1.5;
	color: var(--color-ink-2);
	max-width: 40ch;
}

.dip__text .tlink {
	margin-top: var(--space-lg);
}

.dip__num {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-accent);
	letter-spacing: 0.1em;
}

/* reversed direction */
.dip--rev .dip__text {
	order: 2;
}

/* Motif surfaces (Tier-A CSS art) */
.motif {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	background: var(--color-paper-2);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-sm);
	overflow: hidden;
}

/* Motif: SmartRank bars */
.bars {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.bars__row {
	display: grid;
	grid-template-columns: 5ch 1fr 3ch;
	align-items: center;
	gap: var(--space-sm);
}

.bars__name {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.bars__track {
	height: 10px;
	background: var(--color-paper-3);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.bars__fill {
	display: block;
	height: 100%;
	background: var(--color-accent);
	border-radius: var(--radius-pill);
}

.bars__val {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-2);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Motif: GenAI consolidation nodes */
.nodes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	align-items: center;
}

.node {
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	background: var(--color-paper);
	padding: var(--space-sm) var(--space-2xs);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-2);
}

.node--core {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border-color: var(--color-accent);
	font-weight: 500;
}

/* Framed real product screenshot */
.shot {
	margin: 0;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-paper-2);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 24px 50px oklch(0% 0 0 / 0.35);
}

.shot img {
	width: 100%;
	height: auto;
	display: block;
}

/* Motif: animated people map */
.peoplemap {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 240px;
}

.peoplemap__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pline {
	stroke: var(--color-accent);
	stroke-width: 0.5;
	stroke-dasharray: 2 3;
	opacity: 0.55;
	animation: pline-flow 2.4s linear infinite;
}

.pline--soft {
	stroke: var(--color-rule);
	opacity: 0.6;
	animation-duration: 3.6s;
}

@keyframes pline-flow {
	to {
		stroke-dashoffset: -10;
	}
}

.pnode {
	position: absolute;
	transform: translate(-50%, -50%);
	animation: pnode-float 6s var(--ease-in-out) infinite alternate;
	animation-delay: var(--d, 0s);
}

.pnode--avatar {
	width: 52px;
	height: 52px;
}

.pnode--avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-paper-3);
	box-shadow: 0 4px 14px oklch(0% 0 0 / 0.4);
}

.pnode--dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-ink-3);
}

.pnode--hub {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 50%, transparent);
	animation: pnode-pulse 2.4s var(--ease-out) infinite;
}

@keyframes pnode-float {
	from {
		transform: translate(-50%, -50%);
	}
	to {
		transform: translate(-50%, calc(-50% - 8px));
	}
}

@keyframes pnode-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 50%, transparent);
	}
	70% {
		box-shadow: 0 0 0 16px color-mix(in oklch, var(--color-accent) 0%, transparent);
	}
	100% {
		box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 0%, transparent);
	}
}

/* ---------- Spec sheet · F3 tabular ---------- */

.spec {
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.spec__head {
	margin-bottom: var(--space-xl);
}

.spec__head h2 {
	font-size: var(--text-2xl);
	max-width: 24ch;
}

.spec__table {
	width: 100%;
	border-collapse: collapse;
}

.spec__table tr {
	border-top: 1px solid var(--color-rule);
}

.spec__table tr:last-child {
	border-bottom: 1px solid var(--color-rule);
}

.spec__table th {
	text-align: left;
	vertical-align: top;
	padding: var(--space-md) var(--space-md) var(--space-md) 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-md);
	letter-spacing: -0.02em;
	width: 30%;
}

.spec__table td {
	padding: var(--space-md) 0;
	color: var(--color-ink-2);
	font-size: var(--text-base);
	vertical-align: top;
}

.spec__table .spec__val {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-accent);
	white-space: nowrap;
	text-align: right;
	font-variant-numeric: tabular-nums;
	width: 18%;
}

/* ---------- Testimonials · carousel ---------- */

.proof {
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.proof__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.proof__heading {
	font-size: var(--text-2xl);
	max-width: 26ch;
}

.tcar__ctrl {
	display: flex;
	gap: var(--space-2xs);
	flex-shrink: 0;
}

.tcar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-rule);
	background: var(--color-paper-2);
	color: var(--color-ink-2);
	cursor: pointer;
	transition:
		color var(--dur-short) var(--ease-out),
		border-color var(--dur-short) var(--ease-out),
		background var(--dur-short) var(--ease-out);
}

.tcar__btn:hover {
	color: var(--color-accent-ink);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* viewport + sliding track */
.tcar__viewport {
	overflow: hidden;
	border-radius: var(--radius-card);
}

.tcar__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.55s var(--ease-out);
}

.tcard {
	flex: 0 0 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--color-accent) 9%, transparent), transparent 55%),
		var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
}

.tcard__quote {
	position: relative;
	font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
	line-height: 1.5;
	color: var(--color-ink);
	padding-top: 2.6rem;
	max-width: 60ch;
}

.tcard__quote::before {
	content: "“";
	position: absolute;
	top: -0.35em;
	left: -0.04em;
	font-family: var(--font-display);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-accent);
}

.tcard__by {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: auto;
}

.tcard__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--color-paper-3);
	border: 2px solid color-mix(in oklch, var(--color-accent) 35%, transparent);
}

.tcard__name {
	display: block;
	font-weight: 600;
	color: var(--color-ink);
}

.tcard__role {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	margin-top: 2px;
}

/* dots */
.tcar__dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2xs);
	margin-top: var(--space-lg);
}

.tcar__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-rule);
	cursor: pointer;
	transition:
		width var(--dur-short) var(--ease-out),
		background var(--dur-short) var(--ease-out);
}

.tcar__dot[aria-current="true"] {
	width: 26px;
	background: var(--color-accent);
}

/* ---------- Final CTA strip ---------- */

.cta {
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-rule);
	text-align: center;
}

.cta h2 {
	font-size: var(--text-2xl);
	max-width: 26ch;
	margin-inline: auto;
}

.cta p {
	margin-top: var(--space-md);
	color: var(--color-ink-2);
	font-size: var(--text-md);
}

.cta__btn {
	margin-top: var(--space-xl);
}

/* ---------- Footer · Ft1 mast-headed ---------- */

.foot {
	background: var(--color-paper-2);
	color: var(--color-ink-2);
	border-top: 1px solid var(--color-rule);
	padding-block: var(--space-2xl);
}

.foot__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--space-xl);
	padding-bottom: var(--space-2xl);
	border-bottom: 1px solid var(--foot-rule);
}

.foot__brand .wordmark {
	color: var(--color-ink);
	font-size: var(--text-lg);
}

.foot__tag {
	margin-top: var(--space-md);
	color: var(--foot-mute);
	font-size: var(--text-sm);
	max-width: 28ch;
}

.foot__col h4 {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--foot-faint);
	margin: 0 0 var(--space-md);
	font-weight: 500;
}

.foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.foot__col a {
	color: var(--foot-link);
	font-size: var(--text-sm);
	transition: color var(--dur-short) var(--ease-out);
}

.foot__col a:hover {
	color: var(--color-ink);
}

.foot__addr {
	color: var(--foot-mute);
	font-size: var(--text-sm);
	font-style: normal;
	line-height: 1.6;
}

.foot__addr a {
	color: var(--foot-link-strong);
}

.foot__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-top: var(--space-lg);
	font-size: var(--text-sm);
	color: var(--foot-faint);
}

/* ---------- Responsive ---------- */

@media (max-width: 60rem) {
	.dip {
		grid-template-columns: 1fr;
	}

	.proof__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.dip {
		gap: var(--space-lg);
	}

	.dip--rev .dip__text {
		order: 0;
	}

	/* mobile bar = wordmark + theme toggle + hamburger; everything else moves
	   into the drawer */
	.nav__links,
	.nav__actions > .nav__login,
	.nav__actions > .btn--primary {
		display: none;
	}
	.nav__burger {
		display: flex;
	}
	.nav.is-open .nav__drawer {
		display: flex;
		padding-top: var(--space-sm);
		padding-bottom: var(--space-lg);
		border-top: 1px solid var(--color-rule);
	}

	.foot__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}

	.foot__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 40rem) {
	.hero__title {
		font-size: var(--text-display-s);
	}

	.stats__grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.hero__cta .btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.spec__table th {
		width: auto;
	}

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

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* =====================================================================
   Sub-page shared sections (Executive Hiring, VC/PE, Data API,
   Integrations, Our Team, Contact) — consistent with the home system.
   ===================================================================== */

/* Compact sub-page hero (reuses .hero glow + .hero__inner centering) */
.hero--sub {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.hero--sub .hero__title {
	font-size: var(--text-display-s);
	max-width: 20ch;
}

.section {
	padding-block: var(--space-3xl);
	border-top: 1px solid var(--color-rule);
}

.section__head {
	max-width: 52ch;
	margin-bottom: var(--space-2xl);
}

.section__head h2 {
	font-size: var(--text-2xl);
}

.section__head p {
	margin-top: var(--space-md);
	max-width: 42ch;
	font-size: var(--text-md);
	color: var(--color-ink-2);
}

/* ROI / metric grid */
.metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-lg);
}

.metric {
	padding: var(--space-lg);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
}

.metric__num {
	font-family: var(--font-mono);
	font-size: var(--text-2xl);
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.metric__label {
	margin-top: var(--space-2xs);
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	line-height: 1.45;
}

/* Old way vs HelloSky way comparison */
.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}

.compare__col {
	padding: var(--space-xl);
	border-radius: var(--radius-card);
	border: 1px solid var(--color-rule);
}

.compare__col--old {
	background: transparent;
}

.compare__col--new {
	background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper-2));
	border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
}

.compare__tag {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-md);
}

.compare__col--new .compare__tag {
	color: var(--color-accent);
}

.compare__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.compare__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--text-base);
	color: var(--color-ink-2);
	line-height: 1.45;
}

.compare__list li::before {
	position: absolute;
	left: 0;
	top: 0.05em;
	font-family: var(--font-mono);
}

.compare__col--old .compare__list li::before {
	content: "—";
	color: var(--color-ink-3);
}

.compare__col--new .compare__list li::before {
	content: "✓";
	color: var(--color-accent);
}

/* Feature-card grid (data domains, capabilities) */
.cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-lg);
}

.icard {
	padding: var(--space-lg);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	transition:
		border-color var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}

.icard:hover {
	border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
	transform: translateY(-3px);
}

.icard__n {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	color: var(--color-accent);
}

.icard h3 {
	margin-top: var(--space-xs);
	font-size: var(--text-lg);
}

.icard p {
	margin-top: var(--space-sm);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-ink-2);
}

/* Integrations */
.intg-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-lg);
}

.intg-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-lg);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	transition: border-color var(--dur-short) var(--ease-out);
}

.intg-card:hover {
	border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
}

.intg-card__logo {
	/* uniform bounding box so wordmarks, icon-marks, and 2-line lockups
	   all occupy the same area regardless of their native proportions.
	   Fixed dark chip so white-on-transparent AND colour logos read in any theme. */
	width: 100%;
	max-width: 188px;
	height: 64px;
	box-sizing: border-box;
	padding: 11px 15px;
	object-fit: contain;
	object-position: left center;
	background: #0d1018;
	border: 1px solid var(--color-rule);
	border-radius: 12px;
}

.intg-card__name {
	font-weight: 600;
}

.intg-card__cat {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

.intg-cat {
	margin-top: var(--space-2xl);
}

.intg-cat__label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-lg);
}

.intg-logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--space-md);
}

.intg-logos__cell {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
}

.intg-logos__cell img {
	height: 36px;
	width: 36px;
	object-fit: contain;
	flex-shrink: 0;
	background: #0d1018; /* dark chip: white + colour logos both read in light and dark mode */
	border: 1px solid var(--color-rule);
	border-radius: 8px;
	padding: 5px;
}

.intg-logos__cell span {
	font-size: var(--text-sm);
	color: var(--color-ink-2);
}

/* Team grid */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-lg);
}

.member {
	text-align: center;
}

.member__photo,
.member__fallback {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--space-md);
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
}

.member__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--color-accent);
}

.member__name {
	font-weight: 600;
}

.member__role {
	margin-top: var(--space-3xs);
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	line-height: 1.4;
}

/* clickable member card (has a bio) */
.member--bio {
	cursor: pointer;
	border-radius: var(--radius-card);
	padding: var(--space-md) var(--space-sm) var(--space-sm);
	transition:
		background var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}
.member--bio:hover,
.member--bio:focus-visible {
	background: var(--color-paper-2);
	transform: translateY(-3px);
	outline: none;
}
.member--bio:focus-visible {
	box-shadow: 0 0 0 2px var(--color-focus);
}
.member__readbio {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--color-accent);
	opacity: 0.85;
	transition: opacity var(--dur-short) var(--ease-out);
}
.member__readbio-arr {
	transition: transform var(--dur-short) var(--ease-out);
}
.member--bio:hover .member__readbio,
.member--bio:focus-visible .member__readbio {
	opacity: 1;
}
.member--bio:hover .member__readbio-arr {
	transform: translateX(3px);
}

/* ---------- Member bio modal ---------- */
.mbio {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 1000);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
}
.mbio[hidden] {
	display: none;
}
.mbio__overlay {
	position: absolute;
	inset: 0;
	background: oklch(0% 0 0 / 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.22s var(--ease-out);
}
.mbio.is-open .mbio__overlay {
	opacity: 1;
}
.mbio__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-2xl) var(--space-xl) var(--space-xl);
	box-shadow: 0 40px 100px oklch(0% 0 0 / 0.55);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition:
		opacity 0.22s var(--ease-out),
		transform 0.22s var(--ease-out);
}
.mbio.is-open .mbio__panel {
	opacity: 1;
	transform: none;
}
.mbio__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--color-paper-3);
	color: var(--color-ink-2);
	cursor: pointer;
	transition:
		background var(--dur-short) var(--ease-out),
		color var(--dur-short) var(--ease-out);
}
.mbio__close:hover {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}
.mbio__head {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-rule-soft);
}
.mbio__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
}
.mbio__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	color: var(--color-ink);
}
.mbio__role {
	margin-top: 2px;
	font-size: var(--text-sm);
	color: var(--color-ink-2);
}
.mbio__li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: var(--space-xs);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}
.mbio__li:hover {
	text-decoration: underline;
}
.mbio__body {
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-ink-2);
}
.mbio__body p {
	margin: 0 0 0.9em;
}
.mbio__body p:last-child {
	margin-bottom: 0;
}
.mbio__body strong {
	color: var(--color-ink);
}

@media (max-width: 40rem) {
	.mbio {
		padding: 0;
		align-items: flex-end;
	}
	.mbio__panel {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		padding: var(--space-xl) var(--space-lg) var(--space-lg);
	}
	.mbio__head {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbio__overlay,
	.mbio__panel {
		transition: none;
	}
}

/* Contact */
.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.contact-method__label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

.contact-method__value {
	margin-top: var(--space-3xs);
	font-size: var(--text-md);
	color: var(--color-ink);
}

.contact-method__value a {
	color: var(--color-accent);
}

.form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	padding: var(--space-xl);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.field--full {
	grid-column: 1 / -1;
}

.field label {
	font-size: var(--text-sm);
	color: var(--color-ink-2);
}

.field input,
.field textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	padding: 0.7rem 0.9rem;
	transition: border-color var(--dur-short) var(--ease-out);
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

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

@media (max-width: 60rem) {
	.compare,
	.contact-grid,
	.form {
		grid-template-columns: 1fr;
	}
}

/* ---------- Lightbox (click product screenshots to view full-size) ---------- */
.shot img {
	cursor: zoom-in;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 4rem);
	background: oklch(8% 0.02 268 / 0.86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: zoom-out;
}

.lightbox.open {
	display: flex;
}

.lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-card);
	border: 1px solid var(--color-rule);
	box-shadow: 0 30px 90px oklch(0% 0 0 / 0.6);
}

.lightbox__hint {
	position: fixed;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

/* ---------- Hero animated search bar ---------- */
.hero-search {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: min(100%, 640px);
	margin: var(--space-xl) auto 0;
	padding: 0.8rem 0.8rem 0.8rem 1.15rem;
	text-align: left;
	background: color-mix(in oklch, var(--color-paper-2) 80%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	box-shadow: 0 14px 50px oklch(48% 0.27 300 / 0.14);
}

.hero-search__spark {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-accent);
}

.hero-search__q {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	font-size: var(--text-base);
	color: var(--color-ink-2);
	white-space: nowrap;
	overflow: hidden;
}

.hero-search__caret {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	margin-left: 2px;
	background: var(--color-accent);
	animation: hero-caret 1s steps(1) infinite;
}

@keyframes hero-caret {
	50% {
		opacity: 0;
	}
}

.hero-search__btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	box-shadow: 0 4px 14px oklch(48% 0.27 300 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.hero-search__caret {
		animation: none;
	}
}

/* ---------- Atmospheric depth: ambient glows + film grain ---------- */
/* faint violet light pooling beyond the hero, fixed so it parallaxes subtly */
body {
	background:
		radial-gradient(80vw 40vh at 50% -8%, var(--page-glow-1), transparent 60%),
		radial-gradient(58vw 48vh at 14% 22%, var(--page-glow-2), transparent 60%),
		radial-gradient(52vw 46vh at 92% 82%, var(--page-glow-2), transparent 62%),
		var(--color-paper);
	background-attachment: fixed;
}

/* near-invisible film grain over the whole page (kills flat banding) */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
	body {
		background-attachment: scroll;
	}
}

/* ---------- SmartRank animated ranking panel ---------- */
.srank {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.srank__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
	margin-bottom: var(--space-2xs);
}

.srank__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.srank__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.srow {
	display: grid;
	grid-template-columns: 1.8rem 36px 1fr auto;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-rule-soft);
	/* rise up from the bottom, staggered */
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out);
	transition-delay: calc(var(--i) * 0.12s);
}

.srow:last-child {
	border-bottom: 0;
}

.srank.is-in .srow {
	opacity: 1;
	transform: none;
}

.srow__rank {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-ink-3);
	font-variant-numeric: tabular-nums;
}

.srow__av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
}

.srow__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.srow__name {
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.srow__track {
	height: 6px;
	background: var(--color-paper-3);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.srow__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	transition: width 0.9s var(--ease-out);
	transition-delay: calc(var(--i) * 0.12s + 0.12s);
}

.srank.is-in .srow__fill {
	width: var(--w);
}

.srow__score {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- Golden Record: self-enriching profile card (VC/PE) ---------- */
.grec {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.grec__head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-rule);
	margin-bottom: var(--space-2xs);
}

.grec__av {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
}

.grec__name {
	font-weight: 600;
	color: var(--color-ink);
}

.grec__role {
	font-size: var(--text-sm);
	color: var(--color-ink-2);
}

.grec__badge {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	color: var(--color-accent);
	padding: 0.32rem 0.6rem;
	border-radius: var(--radius-pill);
	background: color-mix(in oklch, var(--color-accent) 14%, transparent);
}

.grec__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	animation: grec-pulse 1.1s var(--ease-out) infinite;
}

@keyframes grec-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 55%, transparent); }
	70% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 0%, transparent); }
}

.grec--done .grec__dot {
	animation: none;
	background: oklch(72% 0.17 150);
}

.grec__field {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-sm);
	align-items: center;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--color-rule-soft);
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out);
	transition-delay: calc(var(--i) * 0.14s);
}

.grec__field:last-child {
	border-bottom: 0;
}

.grec.is-in .grec__field {
	opacity: 1;
	transform: none;
}

.grec__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.grec__k {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

.grec__v {
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.grec__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.grec__chips i {
	font-style: normal;
	font-size: var(--text-xs);
	padding: 2px 9px;
	border-radius: var(--radius-pill);
	background: var(--color-paper-3);
	color: var(--color-ink-2);
}

.grec__src {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---------- GenAI agentic search (animated, step 1) ---------- */
.gsearch {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.gsearch__bar {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.75rem 0.85rem;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
}

.gsearch__spark {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--color-accent);
}

.gsearch__q {
	flex: 1;
	min-width: 0;
	display: block;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-ink);
	white-space: normal; /* let the long query wrap so the whole thing is readable */
}

.gsearch__caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 1px;
	background: var(--color-accent);
	animation: hero-caret 1s steps(1) infinite;
}

.gsearch__go {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

.gsearch__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-top: var(--space-md);
}

.gstep {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-ink-2);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.3s var(--ease-out),
		transform 0.3s var(--ease-out);
}

.gstep.show {
	opacity: 1;
	transform: none;
}

.gstep__ic {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--color-rule);
	border-top-color: var(--color-accent);
	animation: gstep-spin 0.7s linear infinite;
	position: relative;
}

@keyframes gstep-spin {
	to {
		transform: rotate(360deg);
	}
}

.gstep.done .gstep__ic {
	border-color: oklch(72% 0.17 150);
	background: oklch(72% 0.17 150);
	animation: none;
}

.gstep.done .gstep__ic::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid oklch(20% 0.04 150);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gsearch__results {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.gcard {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-sm);
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.45s var(--ease-out),
		transform 0.45s var(--ease-out);
}

.gcard.in {
	opacity: 1;
	transform: none;
}

.gcard__av {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--color-rule);
}

.gcard__main {
	min-width: 0;
}

.gcard__name {
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.gcard__role {
	font-size: var(--text-xs);
	color: var(--color-ink-2);
	margin-top: 1px;
}

.gcard__why {
	margin-top: 6px;
	font-size: var(--text-xs);
	line-height: 1.45;
	color: var(--color-ink-3);
}

.gcard__why em {
	font-style: normal;
	color: var(--color-accent);
}

/* GenAI search: AI summary line + "more candidates" footer */
.gsearch__summary {
	margin-top: var(--space-md);
	padding-left: var(--space-sm);
	border-left: 2px solid var(--color-accent);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-ink-2);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.4s var(--ease-out),
		transform 0.4s var(--ease-out);
}

.gsearch__summary.show {
	opacity: 1;
	transform: none;
}

.gsearch__summary em {
	font-style: normal;
	font-weight: 600;
	color: var(--color-ink);
}

.gsearch__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-rule-soft);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-accent);
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
}

.gsearch__more.show {
	opacity: 1;
}

/* ---------- Talent map: live executive-movement graph (step 3) ---------- */
.tmap {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.tmap__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
}

.tmap__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-2);
}

.tmap__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: oklch(72% 0.17 150);
}

.tmap__livedot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: oklch(72% 0.17 150);
	animation: grec-pulse 1.4s var(--ease-out) infinite;
}

.tmap__graph {
	position: relative;
	width: 100%;
	aspect-ratio: 7 / 5;
	margin-top: var(--space-sm);
}

.tmap__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tline {
	stroke: var(--color-accent);
	stroke-width: 0.6;
	stroke-dasharray: 140;
	stroke-dashoffset: 140;
	opacity: 0.7;
	transition: stroke-dashoffset 1.1s var(--ease-out);
}

.tline--soft {
	stroke: var(--color-rule);
	opacity: 0.8;
}

.tmap.is-in .tline {
	stroke-dashoffset: 0;
}

.tnode {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--color-ink-2);
	white-space: nowrap;
	opacity: 0;
	scale: 0.8;
	transition:
		opacity 0.4s var(--ease-out),
		scale 0.4s var(--ease-out);
}

.tmap.is-in .tnode {
	opacity: 1;
	scale: 1;
}

.tnode--hot {
	border-color: color-mix(in oklch, var(--color-accent) 60%, var(--color-rule));
	background: color-mix(in oklch, var(--color-accent) 16%, var(--color-paper-3));
	color: var(--color-ink);
}

.tnode--ping::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-accent);
	opacity: 0;
	animation: tnode-ping 2.6s var(--ease-out) infinite;
}

@keyframes tnode-ping {
	0% { opacity: 0.5; transform: scale(0.9); }
	70% { opacity: 0; transform: scale(1.25); }
	100% { opacity: 0; transform: scale(1.25); }
}

.tmap__mover {
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	border: 2px solid var(--color-accent);
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 22%, transparent), 0 6px 16px oklch(0% 0 0 / 0.5);
	opacity: 0;
	z-index: 3;
	transition:
		left 1.3s var(--ease-in-out),
		top 1.3s var(--ease-in-out),
		opacity 0.4s var(--ease-out);
}

.tmap__label {
	position: absolute;
	transform: translate(8px, -130%);
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius-input);
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	font-size: var(--text-xs);
	color: var(--color-ink-2);
	white-space: nowrap;
	opacity: 0;
	z-index: 4;
	transition: opacity 0.4s var(--ease-out);
	box-shadow: 0 6px 18px oklch(0% 0 0 / 0.4);
}

.tmap__label strong {
	display: block;
	color: var(--color-ink);
	font-weight: 600;
}

.tmap__label.show {
	opacity: 1;
}

/* ---------- AI-compose outreach (step 3) ---------- */
.compose {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.compose__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-rule);
}

.compose__title {
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.compose__close {
	color: var(--color-ink-3);
	font-size: var(--text-sm);
}

.compose__field {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.6rem var(--space-md);
	border-bottom: 1px solid var(--color-rule-soft);
	font-size: var(--text-sm);
}

.compose__k {
	width: 56px;
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}

.compose__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 3px 10px 3px 3px;
	border-radius: var(--radius-pill);
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	color: var(--color-ink);
	font-size: var(--text-xs);
}

.compose__chip img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

.compose__subj {
	color: var(--color-ink);
	font-weight: 500;
}

.compose__toolbar {
	display: flex;
	justify-content: flex-end;
	padding: var(--space-2xs) var(--space-md);
	border-bottom: 1px solid var(--color-rule-soft);
}

.compose__ai {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4rem 0.8rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: var(--text-xs);
	font-weight: 600;
	transition: box-shadow var(--dur-mid) var(--ease-out);
}

.compose__ai.active {
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 26%, transparent);
}

.compose__spark {
	width: 13px;
	height: 13px;
}

.compose__body {
	padding: var(--space-md);
	min-height: 168px;
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-ink);
	white-space: pre-wrap;
}

.compose__caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 1px;
	vertical-align: text-bottom;
	background: var(--color-accent);
	animation: hero-caret 1s steps(1) infinite;
}

.compose__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-top: 1px solid var(--color-rule);
}

.compose__chars {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.compose__send {
	padding: 0.45rem 1.1rem;
	border-radius: var(--radius-input);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* AI-compose: send state + live tracking chips */
.compose__send.sent {
	background: oklch(72% 0.17 150);
}

.compose__track {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0 var(--space-md) var(--space-md);
}

.ctrack {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	color: var(--color-ink-2);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.35s var(--ease-out),
		transform 0.35s var(--ease-out);
}

.ctrack::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ctrack.show {
	opacity: 1;
	transform: none;
}

.ctrack--sent {
	color: oklch(72% 0.17 150);
}

.ctrack--open,
.ctrack--reply {
	color: var(--color-accent);
}

/* force a 4-up card row (e.g. "One unified platform"); collapses on smaller screens */
.cardgrid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 64rem) {
	.cardgrid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.cardgrid--4 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Company growth chart: market mapping (flow step) ---------- */
.cgrowth {
	align-self: stretch;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-lg);
	box-shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 22px 50px oklch(0% 0 0 / 0.32);
}

.cgrowth__head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-rule);
}

.cgrowth__logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 9px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cgrowth__logo img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.cgrowth__co {
	font-weight: 600;
	color: var(--color-ink);
}

.cgrowth__sub {
	font-size: var(--text-xs);
	color: var(--color-ink-2);
}

.cgrowth__metric {
	margin-left: auto;
	text-align: right;
}

.cgrowth__count {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-md);
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cgrowth__mlabel {
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.cgrowth__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: var(--space-md);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	color: var(--color-ink-3);
}

.cgrowth__chart {
	position: relative;
	height: 168px;
	margin-top: var(--space-sm);
}

.cgrowth__chart svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cgrowth__area {
	fill: oklch(58% 0.25 292 / 0.16);
}

.cgrowth__line {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* reveal the solid line + area with a left-to-right sweep (no dashed draw) */
.cgrowth__chart svg {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.4s var(--ease-out);
}

.cgrowth.is-in .cgrowth__chart svg {
	clip-path: inset(0 0 0 0);
}

.cgrowth__dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 8px;
	font-weight: 700;
	color: var(--color-accent-ink);
	background: var(--color-accent);
	box-shadow: 0 0 8px oklch(58% 0.25 292 / 0.7);
	opacity: 0;
	scale: 0.5;
	transition:
		opacity 0.4s var(--ease-out),
		scale 0.4s var(--ease-out);
}

.cgrowth.is-in .cgrowth__dot {
	opacity: 1;
	scale: 1;
	transition-delay: calc(1s + var(--i) * 0.2s);
}

.cgrowth__axis {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-2xs);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--color-ink-3);
}

/* Company analytics: stat chips, floating callout, seniority mix */
.cgrowth__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-md);
}

.cgchip {
	font-size: var(--text-xs);
	color: var(--color-ink-2);
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.4s var(--ease-out),
		transform 0.4s var(--ease-out);
	transition-delay: calc(var(--i) * 0.08s);
}

.cgchip b {
	color: var(--color-ink);
	font-weight: 600;
}

.cgrowth.is-in .cgchip {
	opacity: 1;
	transform: none;
}

.cgrowth__pop {
	position: absolute;
	left: 4%;
	top: 4%;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 7px 10px 7px 7px;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	box-shadow: 0 10px 26px oklch(0% 0 0 / 0.5);
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transition:
		opacity 0.45s var(--ease-out),
		transform 0.45s var(--ease-out);
	transition-delay: 1.4s;
}

.cgrowth.is-in .cgrowth__pop {
	opacity: 1;
	transform: none;
}

.cgrowth__pop img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.cgrowth__popname {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-ink);
}

.cgrowth__poprole {
	display: block;
	font-size: 0.7rem;
	color: var(--color-ink-3);
}

.cgrowth__senior {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-rule-soft);
}

.cgsen-head {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-xs);
}

.cgsen-bar {
	display: flex;
	gap: 2px;
	height: 12px;
	border-radius: var(--radius-pill);
	overflow: visible;
	background: var(--color-paper-3);
	border-radius: var(--radius-pill);
}

.cgsen-seg {
	position: relative;
	height: 100%;
	width: 0;
	cursor: default;
	transition:
		width 0.9s var(--ease-out),
		filter var(--dur-short) var(--ease-out);
	transition-delay: 0.5s, 0s;
}

.cgsen-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.cgsen-seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

.cgsen-seg:hover {
	filter: brightness(1.15);
}

/* hover tooltip */
.cgsen-seg::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 6px 10px;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	font-size: var(--text-xs);
	color: var(--color-ink);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 10px 26px oklch(0% 0 0 / 0.5);
	transition:
		opacity var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
	z-index: 6;
}

.cgsen-seg::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--color-paper);
	border-right: 1px solid var(--color-rule);
	border-bottom: 1px solid var(--color-rule);
	transform: translateX(-50%) rotate(45deg) translateY(4px);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
	z-index: 6;
}

.cgsen-seg:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.cgsen-seg:hover::before {
	opacity: 1;
	transform: translateX(-50%) rotate(45deg) translateY(0);
}

.cgrowth.is-in .cgsen-seg {
	width: var(--w);
}

.cgsen-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-2xs);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.cgsen-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.cgsen-legend i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

/* ---------- Company-card cycling + point-in-time highlight ---------- */
.cgrowth__view {
	opacity: 1;
	transition: opacity 0.4s var(--ease-out);
}
.cgrowth__view:empty {
	min-height: 520px;
}

/* Coupa wordmark logo (no asset) */
.cgrowth__logo--wm {
	width: auto;
	padding: 0 9px;
}
.cgwm {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.02em;
	color: #e5472e;
	line-height: 1;
}

/* tabs to switch / pause the cycle */
.cgrowth__tabs {
	display: flex;
	gap: var(--space-2xs);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-rule-soft);
}
.cgrowth__tab {
	flex: 1;
	font: inherit;
	font-size: var(--text-xs);
	color: var(--color-ink-3);
	background: var(--color-paper-3);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	padding: 7px 10px;
	cursor: pointer;
	transition:
		color var(--dur-short) var(--ease-out),
		border-color var(--dur-short) var(--ease-out),
		background var(--dur-short) var(--ease-out);
}
.cgrowth__tab:hover {
	color: var(--color-ink);
	border-color: var(--color-rule-strong, var(--color-accent));
}
.cgrowth__tab.is-active {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background: color-mix(in oklch, var(--color-accent) 12%, transparent);
}

/* point-in-time chip on the stat row */
.cgchip--pit {
	color: var(--color-accent);
	border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
	background: color-mix(in oklch, var(--color-accent) 10%, transparent);
}
.cgchip--pit b {
	color: var(--color-accent);
}

/* shaded band over the chart spanning the featured exec's tenure */
.cgrowth__band {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		color-mix(in oklch, var(--color-accent) 4%, transparent),
		color-mix(in oklch, var(--color-accent) 17%, transparent)
	);
	border-left: 1px dashed color-mix(in oklch, var(--color-accent) 60%, transparent);
	opacity: 0;
	transition: opacity 0.6s var(--ease-out) 1s;
	pointer-events: none;
}
.cgrowth.is-in .cgrowth__band {
	opacity: 1;
}

/* "joined" marker + label at the start of the tenure band */
.cgrowth__joined {
	position: absolute;
	top: -2px;
	bottom: 0;
	z-index: 4;
	transform: translateX(-50%);
	opacity: 0;
	transition:
		opacity 0.5s var(--ease-out) 1.15s,
		transform 0.5s var(--ease-out) 1.15s;
}
.cgrowth.is-in .cgrowth__joined {
	opacity: 1;
}
.cgrowth__joinedlbl {
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.02em;
	color: var(--color-accent);
	background: var(--color-paper);
	border: 1px solid color-mix(in oklch, var(--color-accent) 35%, var(--color-rule));
	border-radius: var(--radius-pill);
	padding: 2px 7px;
}

/* point-in-time "then -> now" callout, lower-left of the chart */
.cgrowth__pit {
	position: absolute;
	left: 4%;
	bottom: 6%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-width: 60%;
	padding: 8px 11px;
	background: var(--color-paper);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	box-shadow: 0 10px 26px oklch(0% 0 0 / 0.45);
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	transition:
		opacity 0.45s var(--ease-out) 1.5s,
		transform 0.45s var(--ease-out) 1.5s;
}
.cgrowth.is-in .cgrowth__pit {
	opacity: 1;
	transform: none;
}
.cgrowth__pitlbl {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.cgrowth__pitrow {
	font-size: var(--text-xs);
	color: var(--color-ink);
}
.cgrowth__pitrow b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cgrowth__pitrow em {
	font-style: normal;
	color: var(--color-accent);
	font-weight: 600;
}
.cgrowth__pitrow--sub {
	color: var(--color-ink-3);
	font-size: 0.7rem;
}

/* float the person popover to the top-RIGHT so it clears the point-in-time card */
.cgrowth__pop {
	left: auto;
	right: 4%;
}

/* On phones the card is too narrow for both floating callouts — keep the
   point-in-time story (the differentiator), drop the person popover, and let
   the callout span the chart width. */
@media (max-width: 40rem) {
	.cgrowth {
		padding: var(--space-md);
	}
	.cgrowth__pop {
		display: none;
	}
	.cgrowth__chart {
		height: 150px;
	}
	.cgrowth__pit {
		left: 3%;
		right: 3%;
		bottom: 4%;
		max-width: none;
	}
	.cgrowth__pitrow {
		font-size: 0.72rem;
	}
	.cgrowth__joinedlbl {
		font-size: 0.56rem;
		padding: 1px 5px;
	}
	.cgrowth__desc {
		font-size: var(--text-sm);
	}
	.cgsen-legend {
		gap: var(--space-sm);
		font-size: 0.68rem;
	}
}

/* ---------- Candidate credibility badges ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	background: color-mix(in oklch, var(--color-accent) 13%, var(--color-paper-3));
	border: 1px solid color-mix(in oklch, var(--color-accent) 32%, var(--color-rule));
	color: var(--badge-ink);
}

.srow__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}

.gcard__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 7px;
}

/* Company pane description (clamped) */
.cgrowth__desc {
	margin-top: var(--space-md);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Legal documents (Privacy, Terms) ---------- */
.legal {
	max-width: 760px;
	margin-inline: auto;
}

.legal__updated {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-2xl);
}

.legal h2 {
	font-size: var(--text-xl);
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-sm);
}

.legal h3 {
	font-size: var(--text-md);
	color: var(--color-ink);
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xs);
}

.legal p {
	color: var(--color-ink-2);
	line-height: 1.7;
	margin-bottom: var(--space-md);
}

.legal ul {
	color: var(--color-ink-2);
	line-height: 1.7;
	margin: 0 0 var(--space-md);
	padding-left: 1.25em;
}

.legal li {
	margin-bottom: var(--space-2xs);
}

.legal a {
	color: var(--color-accent);
}

.legal strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* ============ BLOG ============ */
.section--alt {
	background: var(--color-paper-2);
	border-top: 1px solid var(--color-rule-soft);
	border-bottom: 1px solid var(--color-rule-soft);
}

.bloggrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-lg);
}

.bcard {
	display: flex;
	flex-direction: column;
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		border-color var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}

.bcard:hover {
	border-color: color-mix(in oklch, var(--color-accent) 55%, var(--color-rule));
	transform: translateY(-4px);
}

.bcard__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-rule-soft);
}

.bcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-mid) var(--ease-out);
}

.bcard:hover .bcard__media img {
	transform: scale(1.04);
}

.bcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-lg);
	flex: 1;
}

.bcard__kicker {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.bcard__title {
	font-size: var(--text-md);
	line-height: 1.25;
	text-wrap: balance;
}

.bcard__excerpt {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bcard__more {
	margin-top: auto;
	padding-top: var(--space-sm);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-accent);
}

.bcard__more .arrow {
	display: inline-block;
	transition: transform var(--dur-short) var(--ease-out);
}

.bcard:hover .bcard__more .arrow {
	transform: translateX(4px);
}

/* ============ ARTICLE ============ */
.article__hero {
	padding-bottom: var(--space-lg);
}

.article__title {
	max-width: 18ch;
}

.article__back {
	color: var(--color-ink-3);
	text-decoration: none;
}

.article__back:hover {
	color: var(--color-accent);
}

.article__byline {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-top: var(--space-sm);
}

.article__top {
	padding-top: var(--space-lg);
}

.article__lead {
	max-width: 900px;
	margin: 0 auto var(--space-2xl);
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid var(--color-rule);
}

.article__lead img {
	width: 100%;
	display: block;
}

.article__body {
	max-width: 720px;
}

/* ============ HUBSPOT MEETINGS EMBED ============ */
.meetings-iframe-container {
	min-height: 720px;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-paper-2);
}

.meetings-iframe-container iframe {
	width: 100%;
	min-height: 720px;
	border: 0;
	display: block;
}

/* ============ THEME TOGGLE ============ */
.nav__theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink-2);
	cursor: pointer;
	transition:
		color var(--dur-short) var(--ease-out),
		border-color var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}

.nav__theme:hover {
	color: var(--color-accent);
	border-color: color-mix(in oklch, var(--color-accent) 50%, var(--color-rule));
	transform: rotate(-18deg);
}

.nav__theme svg {
	transition: transform var(--dur-mid) var(--ease-out);
}

:root[data-theme="light"] .nav__theme svg {
	transform: rotate(180deg);
}

/* Light mode: partner logos are white PNGs — invert them to dark so they read on white */
:root[data-theme="light"] .marquee__item img {
	filter: invert(1) brightness(0.28);
	opacity: 0.72;
}

:root[data-theme="light"] .marquee__item img:hover {
	opacity: 1;
}



/* ============ ANIMATED GRADIENT BORDER (reusable beam) ============ */
/* same recipe as the Book-a-demo button: a 1px gradient ring with a
   conic highlight sweeping around it. Drop a
   <span class="beam"><span class="beam__spin"></span></span> into any
   position:relative; overflow:hidden element. */
.beam {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* static base gradient ring */
.beam::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, oklch(70% 0.12 300 / 0.55), oklch(58% 0.2 297 / 0.25));
}

/* sweeping conic highlight */
.beam__spin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220%;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 290deg,
		oklch(92% 0.06 300 / 0.9) 340deg,
		transparent 360deg
	);
	animation: btn-arc-spin 4.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.beam__spin { animation: none; }
}

/* Light mode: the pale ring/highlight wash out on white — darken + saturate */
:root[data-theme="light"] .beam::before {
	background: linear-gradient(135deg, oklch(55% 0.24 295 / 0.7), oklch(50% 0.26 297 / 0.35));
}

:root[data-theme="light"] .beam__spin {
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 290deg,
		oklch(52% 0.27 296 / 0.95) 340deg,
		transparent 360deg
	);
}

.hero__lede strong {
	color: var(--color-accent);
	font-weight: 600;
}

/* ============ HOME HERO · left-aligned editorial ============ */
.hero--home {
	padding-block: var(--space-2xl) var(--space-3xl);
}

/* glow relocated off-center, behind the product panel — not an even blob */
.hero--home::before {
	display: none;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(52vw 46vh at 86% 26%, var(--color-glow), transparent 60%);
	filter: blur(22px);
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-2xl);
	align-items: center;
}

/* full-bleed dot-field embedded behind the hero content (no panel/box) */
.hero__dots {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
/* readability scrim: keeps the headline/lede/CTA legible over the dot field by
   fading the paper in from the left and up from the bottom */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(100deg, var(--color-paper) 2%, color-mix(in oklch, var(--color-paper) 72%, transparent) 30%, transparent 58%),
		linear-gradient(to top, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 55%, transparent) 14%, transparent 34%);
}
/* floating data-point labels among the dots */
.hero__labels {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--color-ink);
	/* opaque pill */
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
	box-shadow: 0 6px 18px oklch(0% 0 0 / 0.35);
	/* JS positions left/top at the tagged dot; this centres the pill just above it */
	transform: translate(-50%, -150%);
	opacity: 0; /* JS drives opacity per-frame from the dot's front-facing depth */
	transition:
		border-color 0.45s var(--ease-out),
		box-shadow 0.45s var(--ease-out),
		transform 0.45s var(--ease-out);
}
.hero__chip-av {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	object-fit: cover;
	margin-left: -4px;
	background: var(--color-paper-3);
	box-shadow: 0 0 0 1px var(--color-rule);
	transition: box-shadow 0.45s var(--ease-out);
}
/* the dot currently under the purple focus ring — its pill lights up and follows */
.hero__chip.is-active {
	opacity: 1;
	font-weight: 600;
	color: var(--color-ink);
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 40%, transparent), 0 10px 26px oklch(0% 0 0 / 0.45);
	transform: translate(-50%, -160%);
}
.hero__chip.is-active .hero__chip-av {
	box-shadow: 0 0 0 2px var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
	.hero__chip { transition: none; }
}
@media (max-width: 60rem) {
	.hero__labels { display: none; } /* avoid clutter over stacked mobile hero */
	/* stacked layout: text spans full width, so veil the dots top-down (not left) */
	.hero__dots { opacity: 0.6; }
	.hero__scrim {
		background: linear-gradient(
			to bottom,
			var(--color-paper) 0%,
			color-mix(in oklch, var(--color-paper) 72%, transparent) 42%,
			color-mix(in oklch, var(--color-paper) 58%, transparent) 70%,
			color-mix(in oklch, var(--color-paper) 82%, transparent) 100%
		);
	}
}
.hero__grid--solo {
	grid-template-columns: 1fr;
}
.hero--home .hero__lead {
	max-width: 41rem;
}

/* keep both columns from resizing to the typing query string */
.hero__lead,
.hero__panel {
	min-width: 0;
}

.hpanel {
	overflow: hidden;
}

/* ---------- Hero dot-field (abstract "find the precise candidate") ---------- */
.dotfield {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 64% 30%, color-mix(in oklch, var(--color-accent) 16%, transparent), transparent 65%),
		radial-gradient(140% 120% at 50% 120%, oklch(0% 0 0 / 0.28), transparent 55%),
		linear-gradient(160deg, color-mix(in oklch, var(--color-paper-2) 92%, var(--color-accent)), var(--color-paper));
	border: 1px solid var(--color-rule);
	box-shadow:
		inset 0 1px 0 oklch(100% 0 0 / 0.05),
		0 30px 80px oklch(0% 0 0 / 0.45);
}
/* faint vignette to focus the eye centrally */
.dotfield::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 120% at 50% 50%, transparent 58%, oklch(0% 0 0 / 0.22));
}
.dotfield__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
}
.dotfield::after { z-index: 2; }
.dotfield__tag { z-index: 3; }
.dotfield__tag {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 5px 10px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.03em;
	color: var(--color-ink);
	background: color-mix(in oklch, var(--color-paper) 88%, transparent);
	border: 1px solid color-mix(in oklch, var(--color-accent) 40%, var(--color-rule));
	border-radius: var(--radius-pill);
	box-shadow: 0 8px 22px oklch(0% 0 0 / 0.4);
	transform: translate(-50%, -210%);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.3s var(--ease-out);
	will-change: left, top, opacity;
}
.dotfield__tagdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 8px var(--color-accent);
}
@media (max-width: 60rem) {
	.dotfield {
		aspect-ratio: 16 / 10;
		max-height: 360px;
	}
}

.hero__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	margin-bottom: var(--space-md);
}

.hero--home .hero__title {
	font-size: clamp(2.5rem, 4.3vw, 3.95rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	max-width: 13ch;
	text-wrap: balance;
}

.hero--home .hero__lede {
	margin-top: var(--space-lg);
	max-width: 44ch;
}

.hero--home .hero__cta {
	margin-top: var(--space-xl);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.hero__textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	color: var(--color-ink-2);
	transition: color var(--dur-short) var(--ease-out);
}

.hero__textlink:hover {
	color: var(--color-accent);
}

.hero__textlink .arrow {
	display: inline-block;
	transition: transform var(--dur-short) var(--ease-out);
}

.hero__textlink:hover .arrow {
	transform: translateX(4px);
}

/* product panel — live search + ranked results */
.hpanel {
	position: relative;
	padding: var(--space-md);
	background: color-mix(in oklch, var(--color-paper-2) 94%, transparent);
	border: 1px solid var(--color-rule);
	border-radius: 16px;
	box-shadow: 0 30px 80px oklch(0% 0 0 / 0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero-search--panel {
	width: 100%;
	margin: 0 0 var(--space-md);
	align-items: flex-start;
	border-radius: 14px;
	padding: 0.9rem 1rem;
}

.hero-search--panel .hero-search__spark {
	margin-top: 3px;
}

.hero-search--panel .hero-search__q {
	display: block;
	font-size: var(--text-sm);
	line-height: 1.45;
	white-space: normal;
	overflow: visible;
	/* reserve two lines so the panel height never jumps as the query types */
	min-height: 2.9em;
}

.hero-search--panel .hero-search__btn {
	align-self: flex-start;
}

/* caret sits inline on the wrapped text line, aligned to the letters */
.hero-search--panel .hero-search__caret {
	height: 1.05em;
	margin-left: 1px;
	vertical-align: -0.16em;
}

.hpanel__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hprow {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.6rem 0.4rem;
}

.hprow + .hprow {
	border-top: 1px solid var(--color-rule-soft);
}

.hprow__rank {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.hprow__av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-paper-3);
}

.hprow__id {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.hprow__top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.hprow__name {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hprow__bar {
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-paper-3);
	overflow: hidden;
}

.hprow__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	transition: width 0.7s var(--ease-out);
}

/* rows rise up from the bottom when the search "runs" */
.hprow {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out);
}

.hprow.is-in {
	opacity: 1;
	transform: none;
}

.hprow.is-in .hprow__bar i {
	width: var(--w);
}

/* send button press */
.hero-search__btn {
	transition:
		transform var(--dur-short) var(--ease-out),
		box-shadow var(--dur-short) var(--ease-out);
}

.hero-search__btn.is-press {
	transform: scale(0.86);
}

@media (prefers-reduced-motion: reduce) {
	.hprow {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hprow__bar i {
		width: var(--w);
		transition: none;
	}
}

.hprow__score {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 60rem) {
	.hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
	.hero--home .hero__title {
		max-width: 18ch;
	}
}

.nowrap {
	white-space: nowrap;
}

/* hero CTAs as a centered row below the grid */
.hero__cta--center {
	margin-top: var(--space-2xl);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

/* ============ PRICING ============ */
.billing-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 0 auto var(--space-2xl);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	background: var(--color-paper-2);
}

.billing-toggle {
	display: flex;
	width: fit-content;
}

.billing-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.billing-toggle__btn.is-active {
	background: var(--color-accent);
	color: var(--color-accent-ink);
}

.billing-toggle__save {
	font-size: 0.7rem;
	color: inherit;
	opacity: 0.85;
}

.ptier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	align-items: start;
}

.ptier {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-xl) var(--space-lg);
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
}

.ptier--featured {
	background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper-2));
	box-shadow: 0 30px 80px oklch(0% 0 0 / 0.35);
}

.ptier__tag {
	position: absolute;
	top: calc(-1 * var(--space-sm));
	left: var(--space-lg);
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 3;
	box-shadow: 0 4px 14px oklch(0% 0 0 / 0.25);
}

.ptier__name {
	font-size: var(--text-lg);
}

.ptier__for {
	margin-top: var(--space-2xs);
	min-height: 2.8em;
	color: var(--color-ink-2);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.ptier__price {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin-top: var(--space-md);
}

.ptier__amt {
	font-family: var(--font-mono);
	font-size: var(--text-2xl);
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--color-ink);
}

.ptier__per {
	font-size: var(--text-sm);
	color: var(--color-ink-3);
}

.ptier__bill {
	margin-top: 4px;
	font-size: var(--text-xs);
	color: var(--color-ink-3);
}

.ptier__cta {
	margin-top: var(--space-lg);
	justify-content: center;
	width: 100%;
}

.ptier__feats {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: var(--space-lg) 0 0;
	border-top: 1px solid var(--color-rule);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.ptier__feats li {
	position: relative;
	padding-left: 1.6em;
	font-size: var(--text-sm);
	line-height: 1.45;
	color: var(--color-ink-2);
}

.ptier__feats li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.45em;
	width: 0.5em;
	height: 0.28em;
	border-left: 2px solid var(--color-check);
	border-bottom: 2px solid var(--color-check);
	transform: rotate(-45deg);
}

.ptier__feats-head::before {
	display: none;
}

.ptier__feats li strong {
	color: var(--color-ink);
}

.ptier__feats-head {
	padding-left: 0 !important;
	font-family: var(--font-mono);
	font-size: var(--text-xs) !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-3) !important;
}

.ptier__feats-head::before {
	display: none;
}

.pricing__note {
	margin-top: var(--space-xl);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-ink-3);
}

@media (max-width: 60rem) {
	.ptier-grid {
		grid-template-columns: 1fr;
		max-width: 28rem;
		margin-inline: auto;
	}
}

/* ============ AUTH (signup / verify) ============ */
.auth { padding-block: var(--space-3xl); }
.auth__wrap { max-width: 460px; margin-inline: auto; }

.auth__card {
	background: var(--color-paper-2);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-card);
	padding: var(--space-2xl) var(--space-xl);
	box-shadow: 0 30px 80px oklch(0% 0 0 / 0.35);
}

.auth__card--center { text-align: center; }

.auth__title { font-size: var(--text-xl); margin-top: var(--space-2xs); }

.auth__sub { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.6; }

.auth__form { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }

.auth__form .btn { width: 100%; justify-content: center; margin-top: var(--space-2xs); }

.auth__error { margin: 0; font-size: var(--text-sm); color: oklch(64% 0.2 25); }

.auth__hint { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-3); }

.auth__hint a,
.auth__alt a,
.auth__legal a { color: var(--color-accent); }

.auth__alt { margin-top: var(--space-lg); text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }

.auth__legal { margin-top: var(--space-sm); text-align: center; font-size: var(--text-xs); color: var(--color-ink-3); }

.auth__check {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--space-md);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in oklch, var(--color-accent) 18%, transparent);
	color: var(--color-accent);
}

.auth__card--center .btn { margin-top: var(--space-lg); width: 100%; justify-content: center; }

.auth__spinner {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-md);
	border-radius: 50%;
	border: 3px solid var(--color-rule);
	border-top-color: var(--color-accent);
	animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.auth__spinner { animation: none; }
}

/* ============ AUTH SPLIT-SCREEN (signup) ============ */
.asplit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}

.asplit__panel {
	display: flex;
	flex-direction: column;
	padding: clamp(var(--space-md), 3vw, var(--space-xl));
}

.asplit__panel--form { gap: var(--space-lg); }

.asplit__brand { font-size: var(--text-md); }

.asplit__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

.asplit__body--center { text-align: center; }

/* the [hidden] attribute must beat the flex display above */
.asplit__body[hidden],
.auth__card[hidden] { display: none !important; }

.asplit__title { font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: var(--space-2xs); }

.asplit__sub { margin-top: var(--space-sm); color: var(--color-ink-2); line-height: 1.6; }

/* client carousel below the form */
.asplit__clients { width: 100%; max-width: 420px; margin-inline: auto; }

.aclients { overflow: hidden; margin-top: var(--space-md); }

.aclients__track {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	width: max-content;
	animation: marquee-scroll 40s linear infinite;
}

.aclients__track img { height: 40px; width: auto; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
	.aclients__track { animation: none; }
}

:root[data-theme="light"] .aclients__track img { filter: invert(1) brightness(0.3); opacity: 0.6; }

/* right visual panel */
.asplit__panel--visual {
	position: relative;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper));
	border-left: 1px solid var(--color-rule);
}

.asplit__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60vh 60vh at 70% 28%, var(--color-glow), transparent 60%);
	filter: blur(20px);
}

.asplit__visual-inner { position: relative; z-index: 1; width: 100%; max-width: 440px; }

.asplit__headline {
	font-size: clamp(1.95rem, 2.4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 16ch;
}

.asplit__vsub {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xl);
	color: var(--color-ink-2);
	line-height: 1.6;
	max-width: 42ch;
}

.asplit__panel--visual .hpanel { box-shadow: 0 30px 80px oklch(0% 0 0 / 0.45); }

@media (max-width: 60rem) {
	.asplit { grid-template-columns: 1fr; }
	.asplit__panel--visual { display: none; }
	.asplit__panel--form { min-height: 100vh; }
}

/* standalone verify page */
.averify {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--space-xl);
}

.averify__wrap { width: 100%; max-width: 440px; }

/* compact the signup form so brand + form + carousel fit one screen */
.asplit__panel--form { gap: var(--space-md); }
.asplit__body .auth__form { margin-top: var(--space-sm); gap: var(--space-xs); }
.asplit__body .field label { margin-bottom: 4px; }
.asplit__body .field input { padding: 0.6rem 0.85rem; }
.asplit__body .auth__alt { margin-top: var(--space-md); }
.asplit__body .auth__legal { margin-top: var(--space-2xs); }

/* final fit pass for the signup left column */
.asplit__panel { padding: clamp(var(--space-md), 3vw, var(--space-lg)); }
.asplit__body .auth__form { gap: var(--space-2xs); }
.aclients { margin-top: var(--space-sm); }
.aclients__track img { height: 36px; }

/* ============ AUTH · centered (HubSpot-style signup) ============ */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }

.auth2__top { padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)); }

.auth2 {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.auth2__col { width: 100%; max-width: 380px; text-align: center; }

.auth2__title { font-size: var(--text-xl); letter-spacing: -0.02em; }

.auth2__sub { margin-top: var(--space-2xs); color: var(--color-ink-2); }

.auth2__social { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xs); }

.ssobtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-input);
	background: var(--color-paper-2);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.ssobtn:hover {
	border-color: color-mix(in oklch, var(--color-accent) 45%, var(--color-rule));
	background: var(--color-paper-3);
}

.ssobtn__icon { flex-shrink: 0; }

.auth2__or {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: var(--space-lg) 0;
	color: var(--color-ink-3);
	font-size: var(--text-sm);
}

.auth2__or::before,
.auth2__or::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }

.auth2__form { display: flex; flex-direction: column; gap: var(--space-sm); text-align: left; }

.auth2__form .btn { width: 100%; justify-content: center; }

.auth2__fine { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.55; }

.auth2__fine a { color: var(--color-accent); }

.auth2__alt { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

.auth2__alt a { color: var(--color-accent); }

.auth2__proof { padding-bottom: var(--space-lg); }

.auth2__proof .logos__label { text-align: center; margin-bottom: var(--space-sm); }