/**
 * Nexus — components.
 *
 * main.css holds the tokens and the shell; this file holds everything with a
 * shape. Nothing here introduces a new colour, a new type size or a new
 * spacing value — they all come from the token set, so re-skinning a vertical
 * cannot leave a stray blue behind.
 */

/* ==========================================================================
   Header
   ========================================================================== */

.nx-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid transparent;
	transition: background-color var(--nx-d-ui) var(--nx-ease), border-color var(--nx-d-ui) var(--nx-ease), backdrop-filter var(--nx-d-ui) var(--nx-ease);
}
.nx-header.is-stuck {
	background: rgba( 7, 9, 14, 0.82 );
	backdrop-filter: blur( 18px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 160% );
	border-bottom-color: var(--nx-line);
}

.nx-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-6);
	min-height: var(--nx-header-h);
	min-width: 0;
}

.nx-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-s-3);
	min-width: 0;
	color: var(--nx-white);
	flex: 0 1 auto;
}
.nx-brand:hover { color: var(--nx-white); }

.nx-brand-mark {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--nx-r-md);
	background: linear-gradient( 140deg, var(--nx-accent), var(--nx-accent-deep) );
	box-shadow: 0 6px 18px -8px rgba( var(--nx-accent-rgb), 0.9 );
	color: #fff;
	font-weight: 800;
	font-size: var(--nx-t-md);
	line-height: 1;
}
.nx-brand-mark .nx-icon { width: 1.25rem; height: 1.25rem; }

.nx-brand-text { display: flex; flex-direction: column; min-width: 0; }
.nx-brand-name {
	font-size: var(--nx-t-md);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nx-brand-sub {
	font-family: var(--nx-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nx-slate-500);
	white-space: nowrap;
}

.nx-nav { display: flex; align-items: center; gap: var(--nx-s-1); }
.nx-nav ul { display: flex; align-items: center; gap: var(--nx-s-1); flex-wrap: wrap; }
.nx-nav a {
	display: inline-block;
	padding: var(--nx-s-2) var(--nx-s-3);
	border-radius: var(--nx-r-sm);
	font-size: var(--nx-t-sm);
	font-weight: 600;
	color: var(--nx-slate-300);
	white-space: nowrap;
	transition: color var(--nx-d-micro) var(--nx-ease), background-color var(--nx-d-micro) var(--nx-ease);
}
.nx-nav a:hover { color: var(--nx-white); background: rgba( 255, 255, 255, 0.05 ); }
.nx-nav .current-menu-item > a,
.nx-nav .current_page_item > a {
	color: var(--nx-white);
	background: rgba( var(--nx-accent-rgb), 0.14 );
}

.nx-header-tools { display: flex; align-items: center; gap: var(--nx-s-2); flex: none; }

.nx-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nx-s-2);
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--nx-r-md);
	border: 1px solid var(--nx-line-strong);
	background: rgba( 15, 23, 42, 0.6 );
	color: var(--nx-slate-300);
	cursor: pointer;
	transition: border-color var(--nx-d-micro) var(--nx-ease), color var(--nx-d-micro) var(--nx-ease);
}
.nx-icon-btn:hover { border-color: var(--nx-accent); color: var(--nx-white); }
.nx-icon-btn .nx-icon { width: 1.125rem; height: 1.125rem; }

.nx-search-btn {
	width: auto;
	padding-inline: var(--nx-s-3);
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-400);
}
.nx-kbd {
	font-family: var(--nx-font-mono);
	font-size: 0.6875rem;
	padding: 0.1rem 0.3rem;
	border: 1px solid var(--nx-line-strong);
	border-radius: 0.25rem;
	background: rgba( 2, 6, 23, 0.7 );
	color: var(--nx-slate-400);
}

.nx-nav-toggle { display: none; }

@media ( max-width: 1080px ) {
	.nx-nav-toggle { display: inline-flex; }
	.nx-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--nx-s-4);
		background: rgba( 7, 9, 14, 0.97 );
		backdrop-filter: blur( 18px );
		-webkit-backdrop-filter: blur( 18px );
		border-bottom: 1px solid var(--nx-line);
		display: none;
	}
	.nx-nav.is-open { display: flex; }
	.nx-nav ul { flex-direction: column; align-items: stretch; gap: var(--nx-s-1); }
	.nx-nav a { padding: var(--nx-s-3) var(--nx-s-4); font-size: var(--nx-t-base); }
	.nx-search-btn .nx-kbd { display: none; }
}

/*
 * Below the drawer breakpoint the tool row has to give something up. It gives
 * up labels, not controls: the switcher keeps its swatch, the search keeps its
 * icon, and the call to action keeps its words — losing the primary action on
 * a phone would be the wrong economy.
 */
@media ( max-width: 720px ) {
	.nx-header-bar { gap: var(--nx-s-3); }
	.nx-switcher-current { display: none; }
	.nx-switcher-toggle { max-width: none; padding-inline: var(--nx-s-2); }
	.nx-header-tools { gap: var(--nx-s-1); }
}

@media ( max-width: 560px ) {
	.nx-brand-sub { display: none; }
	.nx-search-btn span:not(.nx-kbd) { display: none; }
	.nx-search-btn { width: 2.375rem; padding-inline: 0; }
	.nx-brand-name { font-size: var(--nx-t-base); }
	.nx-header-cta { font-size: var(--nx-t-xs); }
	.nx-header-tools .nx-btn { padding-inline: var(--nx-s-3); }
}

/* ==========================================================================
   Industry switcher
   ========================================================================== */

.nx-switcher { position: relative; flex: none; }

.nx-switcher-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-s-2);
	padding: var(--nx-s-2) var(--nx-s-3);
	border-radius: var(--nx-r-md);
	border: 1px solid var(--nx-line-strong);
	background: rgba( 15, 23, 42, 0.6 );
	color: var(--nx-slate-200);
	font-size: var(--nx-t-xs);
	font-weight: 600;
	cursor: pointer;
	max-width: 15rem;
	transition: border-color var(--nx-d-micro) var(--nx-ease);
}
.nx-switcher-toggle:hover { border-color: var(--nx-accent); }
.nx-switcher-toggle .nx-icon { width: 0.875rem; height: 0.875rem; color: var(--nx-slate-500); }

.nx-switcher-current {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-switcher-dot {
	width: 0.5rem;
	height: 0.5rem;
	flex: none;
	border-radius: var(--nx-r-pill);
	background: var(--nx-accent);
	box-shadow: 0 0 0 3px rgba( var(--nx-accent-rgb), 0.22 );
}

.nx-switcher-menu {
	position: absolute;
	right: 0;
	top: calc( 100% + var(--nx-s-2) );
	z-index: 50;
	width: min( 22rem, calc( 100vw - var(--nx-s-8) ) );
	padding: var(--nx-s-3);
	background: rgba( 8, 12, 22, 0.97 );
	backdrop-filter: blur( 20px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 20px ) saturate( 180% );
	border: 1px solid var(--nx-line-strong);
	border-radius: var(--nx-r-lg);
	box-shadow: var(--nx-shadow-panel);
}

.nx-switcher-hint {
	padding: 0 var(--nx-s-2) var(--nx-s-2);
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-500);
}

.nx-switcher-menu ul { display: flex; flex-direction: column; gap: 2px; }

.nx-switcher-item {
	display: flex;
	align-items: center;
	gap: var(--nx-s-3);
	padding: var(--nx-s-2) var(--nx-s-3);
	border-radius: var(--nx-r-md);
	color: var(--nx-slate-300);
	transition: background-color var(--nx-d-micro) var(--nx-ease), color var(--nx-d-micro) var(--nx-ease);
}
.nx-switcher-item:hover { background: rgba( 255, 255, 255, 0.05 ); color: var(--nx-white); }
.nx-switcher-item.is-current { background: rgba( var(--nx-accent-rgb), 0.14 ); color: var(--nx-white); }

.nx-switcher-swatch {
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
	border-radius: var(--nx-r-pill);
	background: var( --nx-swatch, var(--nx-accent) );
	box-shadow: 0 0 12px -2px var( --nx-swatch, var(--nx-accent) );
}

.nx-switcher-body { display: flex; flex-direction: column; min-width: 0; }
.nx-switcher-name { font-size: var(--nx-t-sm); font-weight: 600; }
.nx-switcher-meta { font-size: var(--nx-t-xs); color: var(--nx-slate-500); font-family: var(--nx-font-mono); }

/* ==========================================================================
   Hero
   ========================================================================== */

.nx-hero { padding-block: var(--nx-s-24) var(--nx-s-16); position: relative; }
.nx-hero-inner {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	gap: var(--nx-s-16);
	align-items: center;
}
.nx-hero-inner > * { min-width: 0; }

@media ( max-width: 1020px ) {
	.nx-hero-inner { grid-template-columns: minmax( 0, 1fr ); gap: var(--nx-s-12); }
}
@media ( max-width: 720px ) {
	.nx-hero { padding-block: var(--nx-s-16) var(--nx-s-12); }
}

.nx-hero-badges { display: flex; flex-wrap: wrap; gap: var(--nx-s-2); }

.nx-hero h1 { margin-bottom: var(--nx-s-5); }

.nx-hero-actions { display: flex; flex-wrap: wrap; gap: var(--nx-s-3); margin-top: var(--nx-s-8); }

.nx-hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nx-s-6);
	margin-top: var(--nx-s-10);
	padding-top: var(--nx-s-6);
	border-top: 1px solid var(--nx-line);
}
.nx-hero-proof > div { display: flex; flex-direction: column; gap: 0.15rem; }
.nx-hero-proof dt, .nx-hero-proof .nx-proof-label {
	order: 2;
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-500);
}
.nx-hero-proof dd, .nx-hero-proof .nx-proof-value {
	order: 1;
	margin: 0;
	font-size: var(--nx-t-lg);
	font-weight: 800;
	color: var(--nx-white);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Playground
   ========================================================================== */

.nx-playground { padding: var(--nx-s-6); }

.nx-playground-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-4);
	padding-bottom: var(--nx-s-4);
	border-bottom: 1px solid var(--nx-line);
	margin-bottom: var(--nx-s-5);
}

.nx-playground-dots { display: flex; gap: 0.375rem; }
.nx-playground-dots span {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: var(--nx-r-pill);
	background: var(--nx-slate-700);
}
.nx-playground-dots span:first-child { background: rgba( 248, 113, 113, 0.7 ); }
.nx-playground-dots span:nth-child(2) { background: rgba( 251, 191, 36, 0.7 ); }
.nx-playground-dots span:nth-child(3) { background: rgba( 52, 211, 153, 0.7 ); }

.nx-playground-body { display: flex; flex-direction: column; gap: var(--nx-s-4); }

.nx-playground-prompt,
.nx-playground-output {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	line-height: 1.7;
	padding: var(--nx-s-4);
	border-radius: var(--nx-r-md);
	background: rgba( 2, 6, 23, 0.72 );
	border: 1px solid var(--nx-line);
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}
.nx-playground-prompt { color: var(--nx-slate-300); }
.nx-playground-output { color: var(--nx-accent-soft); min-height: 8rem; }

.nx-playground-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--nx-s-2);
	font-size: var(--nx-t-xs);
	line-height: var(--nx-lh-snug);
	color: var(--nx-slate-500);
	padding: var(--nx-s-3);
	border-radius: var(--nx-r-md);
	border: 1px dashed var(--nx-line-strong);
}
.nx-playground-notice .nx-icon { margin-top: 0.15em; color: var(--nx-warn); }

/* ==========================================================================
   Section headings
   ========================================================================== */

.nx-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nx-s-8);
	margin-bottom: var(--nx-s-12);
	flex-wrap: wrap;
}
.nx-section-head > div { max-width: 42rem; display: flex; flex-direction: column; gap: var(--nx-s-3); }

/* ==========================================================================
   Stat band
   ========================================================================== */

.nx-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 1px;
	background: var(--nx-line);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-r-xl);
	overflow: hidden;
}
.nx-stat {
	padding: var(--nx-s-8) var(--nx-s-6);
	background: rgba( 8, 12, 22, 0.75 );
	display: flex;
	flex-direction: column;
	gap: var(--nx-s-2);
}
.nx-stat-value {
	font-size: var(--nx-t-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--nx-white);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.nx-stat-label { font-size: var(--nx-t-sm); color: var(--nx-slate-400); }
.nx-stat-note { font-size: var(--nx-t-xs); color: var(--nx-slate-600); }

/* ==========================================================================
   Agent cards
   ========================================================================== */

.nx-agent {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.nx-agent-figure {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--nx-slate-900);
}
.nx-agent-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--nx-d-reveal) var(--nx-ease);
}
.nx-agent:hover .nx-agent-figure img { transform: scale( 1.04 ); }

.nx-agent-figure::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 8, 12, 22, 0.92 ), rgba( 8, 12, 22, 0.1 ) 55%, transparent );
}

.nx-agent-badge {
	position: absolute;
	top: var(--nx-s-3);
	left: var(--nx-s-3);
	z-index: 1;
}

.nx-agent-body { padding: var(--nx-s-6); display: flex; flex-direction: column; gap: var(--nx-s-3); flex: 1 1 auto; min-width: 0; }
.nx-agent-body > * { min-width: 0; }

/* Without a photograph the card needs its own top edge, or it reads as a
   fragment that lost its header. The accent rule does that work. */
.nx-agent-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-3);
	padding-bottom: var(--nx-s-3);
	border-bottom: 1px solid var(--nx-line);
}
.nx-agent:not(:has(.nx-agent-figure)) {
	border-top: 2px solid rgba( var(--nx-accent-rgb), 0.55 );
}
.nx-agent-name { font-size: var(--nx-t-md); font-weight: 700; }
.nx-agent-en { font-family: var(--nx-font-mono); font-size: var(--nx-t-xs); color: var(--nx-slate-500); }
.nx-agent-summary { font-size: var(--nx-t-sm); color: var(--nx-slate-400); line-height: var(--nx-lh-body); flex: 1 1 auto; }

.nx-agent-metrics {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--nx-s-2);
	padding-top: var(--nx-s-4);
	border-top: 1px solid var(--nx-line);
}
.nx-metric { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nx-metric-value {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-sm);
	font-weight: 600;
	color: var(--nx-accent-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nx-metric-label {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nx-slate-600);
}

.nx-tags { display: flex; flex-wrap: wrap; gap: var(--nx-s-2); }

/* ==========================================================================
   Workflow board
   ========================================================================== */

.nx-flow {
	display: flex;
	gap: var(--nx-s-3);
	padding-bottom: var(--nx-s-3);
}

.nx-flow-node {
	position: relative;
	flex: 0 0 15rem;
	padding: var(--nx-s-4);
	border-radius: var(--nx-r-lg);
	border: 1px solid var(--nx-line);
	background: rgba( 15, 23, 42, 0.7 );
	display: flex;
	flex-direction: column;
	gap: var(--nx-s-2);
}
.nx-flow-node::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc( var(--nx-s-3) * -1 );
	width: var(--nx-s-3);
	height: 1px;
	background: linear-gradient( to right, var(--nx-accent), transparent );
}
.nx-flow-node:last-child::after { display: none; }

.nx-flow-head { display: flex; align-items: center; gap: var(--nx-s-2); }
.nx-flow-head .nx-icon { width: 1rem; height: 1rem; color: var(--nx-accent); }
.nx-flow-type {
	font-family: var(--nx-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-slate-500);
}
.nx-flow-name { font-size: var(--nx-t-sm); font-weight: 700; color: var(--nx-white); }
.nx-flow-desc { font-size: var(--nx-t-xs); color: var(--nx-slate-400); line-height: var(--nx-lh-snug); }

.nx-flow-index {
	position: absolute;
	top: var(--nx-s-3);
	right: var(--nx-s-3);
	font-family: var(--nx-font-mono);
	font-size: 0.6875rem;
	color: var(--nx-slate-700);
}

@media ( max-width: 720px ) {
	.nx-flow { flex-direction: column; }
	.nx-flow-node { flex: 1 1 auto; }
	.nx-flow-node::after {
		top: auto;
		bottom: calc( var(--nx-s-3) * -1 );
		right: auto;
		left: 50%;
		width: 1px;
		height: var(--nx-s-3);
		background: linear-gradient( to bottom, var(--nx-accent), transparent );
	}
}

/* ==========================================================================
   Solutions
   ========================================================================== */

.nx-solution-hero {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 0.9fr );
	gap: var(--nx-s-10);
	align-items: center;
}
.nx-solution-hero > * { min-width: 0; }
@media ( max-width: 960px ) { .nx-solution-hero { grid-template-columns: minmax( 0, 1fr ); } }

.nx-pain {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: var(--nx-s-4);
	padding: var(--nx-s-5);
	border-radius: var(--nx-r-lg);
	border: 1px solid var(--nx-line);
	background: rgba( 15, 23, 42, 0.5 );
}
@media ( max-width: 720px ) { .nx-pain { grid-template-columns: 1fr; } }
.nx-pain-label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: var(--nx-s-2);
}
.nx-pain-problem .nx-pain-label { color: var(--nx-danger); }
.nx-pain-impact .nx-pain-label { color: var(--nx-ok); }
.nx-pain p { font-size: var(--nx-t-sm); color: var(--nx-slate-300); line-height: var(--nx-lh-body); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.nx-plan { display: flex; flex-direction: column; gap: var(--nx-s-5); padding: var(--nx-s-8); }
.nx-plan.is-featured {
	border-color: rgba( var(--nx-accent-rgb), 0.5 );
	box-shadow: var(--nx-shadow-lift);
}

.nx-plan-price { display: flex; align-items: baseline; gap: var(--nx-s-2); }
.nx-plan-amount {
	font-size: var(--nx-t-3xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--nx-white);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.nx-plan-period { font-size: var(--nx-t-sm); color: var(--nx-slate-500); }

.nx-plan-save {
	font-size: var(--nx-t-xs);
	color: var(--nx-ok);
	font-weight: 600;
}

.nx-plan-limits {
	display: grid;
	gap: var(--nx-s-2);
	padding: var(--nx-s-4);
	border-radius: var(--nx-r-md);
	background: rgba( 2, 6, 23, 0.6 );
	border: 1px solid var(--nx-line);
}
.nx-plan-limit { display: flex; justify-content: space-between; gap: var(--nx-s-3); font-size: var(--nx-t-xs); }
.nx-plan-limit dt { color: var(--nx-slate-500); }
.nx-plan-limit dd { margin: 0; color: var(--nx-slate-200); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.nx-plan-features { display: flex; flex-direction: column; gap: var(--nx-s-2); flex: 1 1 auto; }
.nx-plan-features li {
	display: flex;
	gap: var(--nx-s-2);
	font-size: var(--nx-t-sm);
	color: var(--nx-slate-300);
	line-height: var(--nx-lh-snug);
}
.nx-plan-features .nx-icon { color: var(--nx-accent); margin-top: 0.2em; }

.nx-billing-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--nx-r-pill); border: 1px solid var(--nx-line-strong); background: rgba( 15, 23, 42, 0.7 ); }
.nx-billing-toggle [role="tab"] {
	padding: var(--nx-s-2) var(--nx-s-5);
	border: 0;
	border-radius: var(--nx-r-pill);
	background: transparent;
	color: var(--nx-slate-400);
	font-size: var(--nx-t-xs);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--nx-d-micro) var(--nx-ease), color var(--nx-d-micro) var(--nx-ease);
}
.nx-billing-toggle [role="tab"].is-active { background: var(--nx-accent); color: #fff; }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.nx-quote { display: flex; flex-direction: column; gap: var(--nx-s-5); padding: var(--nx-s-6); }
.nx-quote-mark { color: rgba( var(--nx-accent-rgb), 0.6 ); }
.nx-quote-mark .nx-icon { width: 1.75rem; height: 1.75rem; }
.nx-quote blockquote {
	margin: 0;
	font-size: var(--nx-t-base);
	line-height: var(--nx-lh-body);
	color: var(--nx-slate-200);
	flex: 1 1 auto;
}
.nx-quote-who { display: flex; align-items: center; gap: var(--nx-s-3); padding-top: var(--nx-s-4); border-top: 1px solid var(--nx-line); }
.nx-quote-name { font-size: var(--nx-t-sm); font-weight: 700; color: var(--nx-white); }
.nx-quote-role { font-size: var(--nx-t-xs); color: var(--nx-slate-500); }
.nx-quote-result {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	color: var(--nx-ok);
	font-variant-numeric: tabular-nums;
}

.nx-monogram {
	display: grid;
	place-items: center;
	flex: none;
	border-radius: var(--nx-r-pill);
	background: hsl( var( --nx-mono-hue, 210 ) 40% 28% );
	color: hsl( var( --nx-mono-hue, 210 ) 70% 88% );
	font-weight: 700;
	font-size: 1rem;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
}

.nx-stars { display: inline-flex; gap: 0.15rem; }
.nx-star { color: var(--nx-slate-700); }
.nx-star .nx-icon { width: 0.875rem; height: 0.875rem; }
.nx-star.is-on { color: var(--nx-warn); }
.nx-star.is-on .nx-icon { fill: currentColor; }

/* ==========================================================================
   Dialogs
   ========================================================================== */

.nx-dialog {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--nx-s-8) var(--nx-s-4);
	background: rgba( 2, 4, 10, 0.78 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	overflow-y: auto;
}

.nx-dialog-panel {
	width: 100%;
	max-width: 34rem;
	margin-top: 4vh;
	background: rgba( 10, 14, 24, 0.98 );
	border: 1px solid var(--nx-line-strong);
	border-radius: var(--nx-r-xl);
	box-shadow: var(--nx-shadow-panel);
	overflow: hidden;
}
.nx-dialog-panel--wide { max-width: 42rem; }

.nx-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--nx-s-4);
	padding: var(--nx-s-6);
	border-bottom: 1px solid var(--nx-line);
}
.nx-dialog-body { padding: var(--nx-s-6); display: flex; flex-direction: column; gap: var(--nx-s-5); }

@media ( prefers-reduced-motion: no-preference ) {
	.nx-dialog.is-open .nx-dialog-panel {
		animation: nx-dialog-in var(--nx-d-ui) var(--nx-ease) both;
	}
}
@keyframes nx-dialog-in {
	from { opacity: 0; transform: translateY( 1rem ) scale( 0.985 ); }
	to   { opacity: 1; transform: none; }
}

.nx-form-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) ); gap: var(--nx-s-4); }

.nx-form-status {
	font-size: var(--nx-t-sm);
	line-height: var(--nx-lh-snug);
	padding: var(--nx-s-3) var(--nx-s-4);
	border-radius: var(--nx-r-md);
	border: 1px solid var(--nx-line);
	display: none;
	flex-direction: column;
	gap: var(--nx-s-1);
}
.nx-form-status.is-busy,
.nx-form-status.is-ok,
.nx-form-status.is-error { display: flex; }
.nx-form-status.is-busy { color: var(--nx-slate-400); }
.nx-form-status.is-ok { color: var(--nx-ok); border-color: rgba( 52, 211, 153, 0.35 ); background: rgba( 52, 211, 153, 0.08 ); }
.nx-form-status.is-error { color: var(--nx-danger); border-color: rgba( 248, 113, 113, 0.35 ); background: rgba( 248, 113, 113, 0.08 ); }
.nx-form-note { font-size: var(--nx-t-xs); color: var(--nx-slate-400); }

/* The honeypot must be reachable by nothing — not a screen reader, not a tab
   stop, not a pointer — while still being a real field a bot can find. */
.nx-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Command palette
   ========================================================================== */

.nx-palette-panel {
	width: 100%;
	max-width: 38rem;
	margin-top: 8vh;
	background: rgba( 10, 14, 24, 0.98 );
	border: 1px solid var(--nx-line-strong);
	border-radius: var(--nx-r-lg);
	box-shadow: var(--nx-shadow-panel);
	overflow: hidden;
}

.nx-palette-search {
	display: flex;
	align-items: center;
	gap: var(--nx-s-3);
	padding: var(--nx-s-4) var(--nx-s-5);
	border-bottom: 1px solid var(--nx-line);
}
.nx-palette-search .nx-icon { color: var(--nx-slate-500); width: 1.125rem; height: 1.125rem; }
.nx-palette-search input {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	color: var(--nx-white);
	font: inherit;
	font-size: var(--nx-t-base);
	outline: none;
	min-width: 0;
}
.nx-palette-search input::placeholder { color: var(--nx-slate-600); }

.nx-palette-list { max-height: min( 24rem, 50vh ); overflow-y: auto; padding: var(--nx-s-2); }

.nx-palette-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-4);
	padding: var(--nx-s-3) var(--nx-s-4);
	border-radius: var(--nx-r-md);
	color: var(--nx-slate-300);
}
.nx-palette-item.is-active,
.nx-palette-item:hover {
	background: rgba( var(--nx-accent-rgb), 0.16 );
	color: var(--nx-white);
}
.nx-palette-label { font-size: var(--nx-t-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-palette-kind {
	font-family: var(--nx-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-slate-500);
	flex: none;
}
.nx-palette-empty { padding: var(--nx-s-6); text-align: center; font-size: var(--nx-t-sm); color: var(--nx-slate-500); }

.nx-palette-foot {
	display: flex;
	gap: var(--nx-s-4);
	padding: var(--nx-s-3) var(--nx-s-5);
	border-top: 1px solid var(--nx-line);
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-600);
	flex-wrap: wrap;
}

/* ==========================================================================
   API sandbox
   ========================================================================== */

.nx-sandbox { display: grid; grid-template-columns: minmax( 0, 18rem ) minmax( 0, 1fr ); gap: var(--nx-s-6); }
.nx-sandbox > * { min-width: 0; }
@media ( max-width: 900px ) { .nx-sandbox { grid-template-columns: minmax( 0, 1fr ); } }

.nx-endpoint-list { display: flex; flex-direction: column; gap: var(--nx-s-1); max-height: 32rem; overflow-y: auto; }
.nx-endpoint-list > * { min-width: 0; }

.nx-endpoint-btn {
	display: flex;
	align-items: center;
	gap: var(--nx-s-3);
	width: 100%;
	padding: var(--nx-s-3);
	border: 1px solid transparent;
	border-radius: var(--nx-r-md);
	background: transparent;
	color: var(--nx-slate-300);
	cursor: pointer;
	text-align: left;
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	transition: background-color var(--nx-d-micro) var(--nx-ease), border-color var(--nx-d-micro) var(--nx-ease);
}
.nx-endpoint-btn:hover { background: rgba( 255, 255, 255, 0.04 ); }
.nx-endpoint-btn.is-active { border-color: rgba( var(--nx-accent-rgb), 0.5 ); background: rgba( var(--nx-accent-rgb), 0.12 ); color: var(--nx-white); }
.nx-endpoint-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nx-method {
	flex: none;
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.nx-method--get    { background: rgba( 52, 211, 153, 0.16 ); color: #6ee7b7; }
.nx-method--post   { background: rgba( 59, 130, 246, 0.16 ); color: #93c5fd; }
.nx-method--put    { background: rgba( 251, 191, 36, 0.16 ); color: #fcd34d; }
.nx-method--delete { background: rgba( 248, 113, 113, 0.16 ); color: #fca5a5; }

.nx-code {
	position: relative;
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	line-height: 1.7;
	padding: var(--nx-s-4);
	border-radius: var(--nx-r-md);
	background: rgba( 2, 6, 23, 0.85 );
	border: 1px solid var(--nx-line);
	overflow-x: auto;
	color: var(--nx-slate-300);
	margin: 0;
	white-space: pre;
}

.nx-code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-3);
	margin-bottom: var(--nx-s-2);
}
.nx-code-title {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-slate-500);
}

.nx-copy-btn {
	padding: var(--nx-s-1) var(--nx-s-3);
	border-radius: var(--nx-r-sm);
	border: 1px solid var(--nx-line-strong);
	background: transparent;
	color: var(--nx-slate-400);
	font-size: var(--nx-t-xs);
	font-weight: 600;
	cursor: pointer;
	transition: color var(--nx-d-micro) var(--nx-ease), border-color var(--nx-d-micro) var(--nx-ease);
}
.nx-copy-btn:hover { color: var(--nx-white); border-color: var(--nx-accent); }
.nx-copy-btn.is-done { color: var(--nx-ok); border-color: rgba( 52, 211, 153, 0.5 ); }
.nx-copy-btn.is-failed { color: var(--nx-danger); border-color: rgba( 248, 113, 113, 0.5 ); }

/* ==========================================================================
   ROI
   ========================================================================== */

.nx-roi { display: grid; grid-template-columns: minmax( 0, 22rem ) minmax( 0, 1fr ); gap: var(--nx-s-8); align-items: start; }
.nx-roi > * { min-width: 0; }
@media ( max-width: 960px ) { .nx-roi { grid-template-columns: minmax( 0, 1fr ); } }

.nx-roi-controls { display: flex; flex-direction: column; gap: var(--nx-s-6); }

.nx-roi-control { display: flex; flex-direction: column; gap: var(--nx-s-2); }
.nx-roi-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-s-3); }
.nx-roi-value {
	font-family: var(--nx-font-mono);
	font-size: var(--nx-t-md);
	font-weight: 600;
	color: var(--nx-accent-soft);
	font-variant-numeric: tabular-nums;
}

.nx-roi-results { display: grid; grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) ); gap: var(--nx-s-4); }
.nx-roi-result { padding: var(--nx-s-5); border-radius: var(--nx-r-lg); border: 1px solid var(--nx-line); background: rgba( 15, 23, 42, 0.6 ); }
.nx-roi-result-value {
	font-size: var(--nx-t-xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--nx-white);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.nx-roi-result-label { margin-top: var(--nx-s-2); font-size: var(--nx-t-xs); color: var(--nx-slate-500); line-height: var(--nx-lh-snug); }
.nx-roi-result--headline { border-color: rgba( var(--nx-accent-rgb), 0.45 ); background: rgba( var(--nx-accent-rgb), 0.1 ); }
.nx-roi-result--headline .nx-roi-result-value { color: var(--nx-accent-soft); }

.nx-roi-assumptions {
	font-size: var(--nx-t-xs);
	line-height: var(--nx-lh-body);
	color: var(--nx-slate-500);
}
.nx-roi-assumptions li { list-style: disc; margin-left: var(--nx-s-5); }
.nx-roi-assumptions ul { display: flex; flex-direction: column; gap: var(--nx-s-1); margin-top: var(--nx-s-2); }

.nx-roi-bar {
	position: relative;
	height: 0.5rem;
	border-radius: var(--nx-r-pill);
	background: var(--nx-slate-800);
	overflow: hidden;
}
.nx-roi-bar span {
	position: absolute;
	inset: 0 auto 0 0;
	background: linear-gradient( to right, var(--nx-accent-deep), var(--nx-accent) );
	border-radius: var(--nx-r-pill);
	transition: width var(--nx-d-ui) var(--nx-ease);
}

/* ==========================================================================
   Archives, single, breadcrumbs, pagination
   ========================================================================== */

.nx-crumbs { font-size: var(--nx-t-xs); color: var(--nx-slate-500); }
.nx-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--nx-s-2); }
.nx-crumbs li { display: flex; align-items: center; gap: var(--nx-s-2); }
.nx-crumbs li + li::before { content: '/'; color: var(--nx-slate-700); }
.nx-crumbs a { color: var(--nx-slate-400); }
.nx-crumbs a:hover { color: var(--nx-white); }

.nx-page-head { padding-block: var(--nx-s-16) var(--nx-s-10); position: relative; }
.nx-page-head .nx-stack-6 { max-width: 48rem; }

.nx-pagination { margin-top: var(--nx-s-12); }
.nx-pagination ul { display: flex; flex-wrap: wrap; gap: var(--nx-s-2); justify-content: center; }
.nx-pagination a, .nx-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--nx-s-3);
	border-radius: var(--nx-r-md);
	border: 1px solid var(--nx-line);
	font-size: var(--nx-t-sm);
	font-weight: 600;
	color: var(--nx-slate-300);
}
.nx-pagination a:hover { border-color: var(--nx-accent); color: var(--nx-white); }
.nx-pagination .current { background: var(--nx-accent); border-color: var(--nx-accent); color: #fff; }

.nx-article-head { max-width: var(--nx-shell-text); margin-inline: auto; }
.nx-article-body { max-width: var(--nx-shell-text); margin-inline: auto; }
.nx-article-figure { margin: var(--nx-s-10) 0; }
.nx-article-figure img { border-radius: var(--nx-r-xl); width: 100%; }

.nx-meta-row { display: flex; flex-wrap: wrap; gap: var(--nx-s-4); font-size: var(--nx-t-xs); color: var(--nx-slate-500); }

.nx-spec-table { width: 100%; }
.nx-spec-table th { width: 40%; color: var(--nx-slate-400); font-weight: 600; }

.nx-empty {
	padding: var(--nx-s-16) var(--nx-s-8);
	text-align: center;
	border: 1px dashed var(--nx-line-strong);
	border-radius: var(--nx-r-xl);
	display: flex;
	flex-direction: column;
	gap: var(--nx-s-3);
	align-items: center;
}
.nx-empty .nx-icon { width: 2rem; height: 2rem; color: var(--nx-slate-600); }

/* ==========================================================================
   Comments
   ========================================================================== */

.nx-comments { max-width: var(--nx-shell-text); margin-inline: auto; }
.nx-comments ol { display: flex; flex-direction: column; gap: var(--nx-s-6); }
.nx-comments .children { margin-top: var(--nx-s-6); margin-left: var(--nx-s-8); border-left: 1px solid var(--nx-line); padding-left: var(--nx-s-6); }
.nx-comment { display: flex; flex-direction: column; gap: var(--nx-s-3); }
.nx-comment-head { display: flex; align-items: center; gap: var(--nx-s-3); }
.nx-comment-author { font-size: var(--nx-t-sm); font-weight: 700; color: var(--nx-white); }
.nx-comment-date { font-size: var(--nx-t-xs); color: var(--nx-slate-600); }
.nx-comment-body { font-size: var(--nx-t-sm); color: var(--nx-slate-300); line-height: var(--nx-lh-body); }

.comment-form { display: flex; flex-direction: column; gap: var(--nx-s-4); }
.comment-form label { font-size: var(--nx-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nx-slate-400); display: block; margin-bottom: var(--nx-s-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--nx-s-3) var(--nx-s-4);
	background: rgba( 2, 6, 23, 0.8 );
	border: 1px solid var(--nx-slate-700);
	border-radius: var(--nx-r-md);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-t-sm);
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form .submit {
	align-self: flex-start;
	padding: var(--nx-s-3) var(--nx-s-6);
	border-radius: var(--nx-r-md);
	border: 0;
	background: var(--nx-accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--nx-t-sm);
	cursor: pointer;
}
.comment-form .comment-notes, .comment-form .form-submit { margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

.nx-footer {
	margin-top: var(--nx-s-24);
	border-top: 1px solid var(--nx-line);
	background: rgba( 2, 4, 10, 0.6 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
}

.nx-footer-top {
	display: grid;
	grid-template-columns: minmax( 0, 1.3fr ) repeat( auto-fit, minmax( 10rem, 1fr ) );
	gap: var(--nx-s-10);
	padding-block: var(--nx-s-16);
}
@media ( max-width: 780px ) { .nx-footer-top { grid-template-columns: 1fr; gap: var(--nx-s-8); } }

.nx-footer-col { display: flex; flex-direction: column; gap: var(--nx-s-3); min-width: 0; }
.nx-widget-title, .nx-footer-title {
	font-size: var(--nx-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nx-slate-400);
	margin-bottom: var(--nx-s-1);
}
.nx-footer-col ul { display: flex; flex-direction: column; gap: var(--nx-s-2); }
.nx-footer-col a { font-size: var(--nx-t-sm); color: var(--nx-slate-400); }
.nx-footer-col a:hover { color: var(--nx-white); }

.nx-footer-note { font-size: var(--nx-t-xs); color: var(--nx-slate-500); line-height: var(--nx-lh-body); }

.nx-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-s-4);
	padding-block: var(--nx-s-6);
	border-top: 1px solid var(--nx-line);
	font-size: var(--nx-t-xs);
	color: var(--nx-slate-600);
}
.nx-footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--nx-s-4); }
.nx-footer-legal a { color: var(--nx-slate-500); }
.nx-footer-legal a:hover { color: var(--nx-white); }

/* ==========================================================================
   404 and search
   ========================================================================== */

.nx-404 { padding-block: var(--nx-s-32); text-align: center; }
.nx-404-code {
	font-family: var(--nx-font-mono);
	font-size: clamp( var(--nx-t-3xl), 12vw, 9rem );
	font-weight: 700;
	line-height: 1;
	color: rgba( var(--nx-accent-rgb), 0.25 );
	letter-spacing: -0.05em;
}

.nx-searchform { display: flex; gap: var(--nx-s-2); }
.nx-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--nx-s-3) var(--nx-s-4);
	background: rgba( 2, 6, 23, 0.8 );
	border: 1px solid var(--nx-slate-700);
	border-radius: var(--nx-r-md);
	color: var(--nx-text);
	font: inherit;
	font-size: var(--nx-t-sm);
}