/*
 * Agent Circuits — landing page (index.html).
 *
 * Page-specific composition only. Chrome (nav, buttons, sections, display
 * type, reveal-up, footer) comes from site.css; the hero mock is built from
 * kit/chat-kit.css. This file adds: the hero layout, the mock's frame sizing +
 * responsive pane-collapse, a handful of mock-local classes the kit doesn't
 * ship (mkt-*), and the five editorial sections. Tokens only; both themes.
 */

/* ============================================================ Utilities === */

/* Visually-hidden but available to assistive tech. Not in site.css, and the
   deck's styles.css (which defines it) isn't loaded here. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================ FOUC guard === */
/*
 * The hero mock plays a GSAP loop (landing.js). Its animated parts start
 * hidden — but only once we know JS is running (the inline head script adds
 * `.js`), so a no-JS / pre-hydration render still shows the full, honest
 * still. Reduced-motion users get the same still: landing.js seeks the
 * timeline to its settled beat, which writes inline opacity that wins here.
 */
.js .mkt-anim {
	opacity: 0;
}
.js .mkt-stat__bar {
	transform: scaleX(0);
}

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

.hero {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 4rem);
	padding-top: clamp(5.25rem, 10vh, 7rem);
	padding-bottom: clamp(2.5rem, 5vh, 4rem);
	text-align: center;
}
.hero__intro {
	max-width: 54rem;
	margin-inline: auto;
}
.hero .display-1 {
	margin-bottom: 1.25rem;
	text-wrap: balance;
}
.hero .lede {
	margin-inline: auto;
	text-wrap: pretty;
}
.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* ---- Hero shot (the mock) ------------------------------------------------ */
.hero__shot {
	margin-top: clamp(2rem, 4.5vh, 3.25rem);
	display: flex;
	justify-content: center;
	/* Reserve the row so the GSAP loop never shifts page layout. */
	container-type: inline-size;
}

.mkt-mock {
	/* The kit frame; we only set size + a slightly softer marketing radius.
	   Height is tuned to contain the whole settled conversation un-clipped —
	   it extends gently below the page fold, which is the intended crop. */
	width: 100%;
	max-width: 64rem;
	height: 45rem;
	border-radius: 14px;
	/* A touch more lift than the kit default — this is the page centrepiece. */
	box-shadow:
		var(--mkt-shadow-md),
		0 24px 48px -24px oklch(0 0 0 / 0.18);
	text-align: left;
}
.dark .mkt-mock {
	box-shadow:
		var(--mkt-shadow-md),
		0 24px 48px -24px oklch(0 0 0 / 0.6);
}

/* Responsive pane-collapse: drop the surface, then the sidebar, so the mock
   never forces the page to scroll sideways and its type never shrinks below
   the kit's 11px floor. Below the tablet width it degrades to chat-only. */
@media (max-width: 1080px) {
	.mkt-mock.ck-app--full {
		grid-template-columns: 13.5rem minmax(0, 1fr);
		grid-template-areas:
			'topbar topbar'
			'sidebar chat';
	}
	.mkt-mock .ck-surface {
		display: none;
	}
}
@media (max-width: 720px) {
	.mkt-mock.ck-app--full {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'topbar'
			'chat';
		height: 40rem;
	}
	.mkt-mock .ck-sidebar {
		display: none;
	}
}

/* ---- Mock chat column: pin an idle composer under a scrolling thread ----- */
.mkt-chat {
	padding: 0;
	gap: 0;
	overflow: hidden;
}
.mkt-thread {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1rem 1.1rem 0.4rem;
}
.mkt-composer {
	flex-shrink: 0;
	min-height: 0;
	gap: 0.4rem;
	margin: 0.3rem 0.9rem 0.85rem;
	padding: 0.55rem 0.85rem;
}

/* Composer input stack: placeholder and the typed line share one cell so the
   typing beat can cross-fade between them without reflow. */
.mkt-placeholder {
	color: var(--muted-foreground);
}

/* Slightly tighter tool group inside the mock so the expanded run and the
   answer table both sit above the composer without an internal scrollbar. */
.mkt-mock .ck-tool-group-head {
	padding: 0.45rem 0.6rem;
}
.mkt-mock .ck-tool-group-body {
	padding: 0.5rem;
	row-gap: 0.35rem;
	/* Constrain the single grid track to the group width so rows can't grow to
	   their (unwrapped) content width at 390px. */
	grid-template-columns: minmax(0, 1fr);
}
.mkt-mock .ck-tool-head {
	padding: 0.4rem 0.5rem;
}
/* At narrow widths (390px) the sub-agent row's args used to hard-clip mid-word.
   Constrain the whole chain — row → name → args — so the args shrinks and
   truncates with an ellipsis (the parens stay glued) instead of the row
   overflowing the mock, matching how .ck-tool-args behaves in the kit. */
.mkt-mock .ck-tool-group-body > .ck-tool {
	min-width: 0;
}
.mkt-mock .ck-tool-name {
	min-width: 0;
}
.mkt-mock .ck-tool-args {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Tool group head title (kit ships the wrench + count, not the label) - */
.mkt-group-title {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
	color: var(--foreground);
}
.ck-tool-group-count__dot {
	opacity: 0.6;
}

/* ---- Status stack: spinner and its resolved check occupy one slot -------- */
.mkt-status-stack {
	position: relative;
	display: inline-flex;
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}
.mkt-status-stack > * {
	position: absolute;
	inset: 0;
}

/* ---- Sub-agent tool card: a quiet identity-hue left accent --------------- */
.mkt-tool--sub {
	border-left: 2px solid color-mix(in oklch, var(--ck-hue) 60%, transparent);
}
.mkt-hue-name {
	color: var(--ck-hue);
}
.mkt-tool--sub .ck-tool-args {
	color: color-mix(in oklch, var(--ck-hue) 80%, var(--foreground));
}
.mkt-tool--sub .ck-spinner {
	color: var(--ck-hue);
}

/* ---- Assistant reply: heading + table ------------------------------------ */
.mkt-reply-h {
	margin: 0.1rem 0 0.4rem;
	font-size: var(--mkt-text-lg);
	font-weight: var(--mkt-weight-semibold);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}
.mkt-reply-p {
	margin: 0 0 0.7rem;
	color: var(--foreground);
	line-height: 1.55;
}
.mkt-table-wrap {
	overflow-x: auto;
}
.mkt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-xs);
}
.mkt-table th,
.mkt-table td {
	padding: 0.4rem 0.7rem 0.4rem 0;
	text-align: left;
	border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
	white-space: nowrap;
}
.mkt-table th {
	font-weight: var(--mkt-weight-semibold);
	color: var(--muted-foreground);
}
.mkt-table td {
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.mkt-table tbody tr:last-child td {
	border-bottom: 0;
}
.mkt-table td:first-child {
	font-weight: var(--mkt-weight-medium);
}
.mkt-table__hi {
	font-weight: var(--mkt-weight-semibold);
	color: var(--mkt-status-attention);
}

/* ---- Surface pane stat rows ---------------------------------------------- */
.mkt-surface-title {
	margin-bottom: 0.7rem;
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-semibold);
	color: var(--foreground);
}
.mkt-stat {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.2rem 0.5rem;
	margin-bottom: 0.65rem;
}
.mkt-stat:last-child {
	margin-bottom: 0;
}
.mkt-stat__label {
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}
.mkt-stat__val {
	font-size: 0.6875rem;
	font-weight: var(--mkt-weight-semibold);
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
}
.mkt-stat__track {
	grid-column: 1 / -1;
	height: 0.3rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--muted-foreground) 20%, transparent);
	overflow: hidden;
}
.mkt-stat__bar {
	display: block;
	width: var(--v, 0%);
	height: 100%;
	border-radius: 999px;
	background: var(--mkt-status-running);
	transform-origin: left center;
}

/* ============================================================== Epigram ==== */

.epigram {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(4rem, 10vh, 7rem);
	display: grid;
	gap: 1.5rem;
}
.epigram__quote {
	max-width: 22ch;
}
.epigram__body {
	max-width: 46ch;
	font-size: var(--mkt-text-lg);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
}

/* =========================================================== Statements ==== */

.statements {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
}
.statement__title {
	margin-bottom: 0.5rem;
	font-size: var(--mkt-text-2xl);
	font-weight: var(--mkt-weight-semibold);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}
.statement__body {
	max-width: 42ch;
	font-size: var(--mkt-text-lg);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
}

/* ========================================================= Capabilities ==== */

.capabilities-section {
	padding-top: clamp(2rem, 5vh, 3rem);
}
.capabilities-section .kicker {
	margin-bottom: 1.5rem;
}
.capabilities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.cap-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		'icon title'
		'icon body';
	column-gap: 0.85rem;
	row-gap: 0.2rem;
	align-content: start;
	padding: 1.35rem 1.4rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	transition:
		border-color var(--motion-fast) var(--ease-out-soft),
		transform var(--motion-fast) var(--ease-out-soft),
		box-shadow var(--motion-fast) var(--ease-out-soft);
}
.cap-card:hover {
	border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
	transform: translateY(-2px);
	box-shadow: var(--mkt-shadow-sm);
}
.cap-card__icon {
	grid-area: icon;
	--ck-i: 1.25rem;
	margin-top: 0.15rem;
	color: var(--mkt-status-running);
}
.cap-card__title {
	grid-area: title;
	font-size: var(--mkt-text-lg);
	font-weight: var(--mkt-weight-semibold);
	color: var(--foreground);
}
.cap-card__body {
	grid-area: body;
	font-size: var(--text-sm);
	line-height: var(--mkt-line-normal);
	color: var(--muted-foreground);
}

/* =========================================================== Enterprise ==== */

.enterprise-section .kicker {
	margin-bottom: 0.75rem;
}
.enterprise-section__title {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: var(--mkt-weight-semibold);
	letter-spacing: var(--mkt-tracking-tight);
	line-height: var(--mkt-line-snug);
	margin-bottom: 2rem;
	max-width: 32ch;
}
.enterprise {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2.5rem;
	border-top: 1px solid var(--border);
	padding-top: 2rem;
}
.enterprise__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.enterprise__icon {
	--ck-i: 1.15rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--muted-foreground);
}
.enterprise__text {
	font-size: var(--mkt-text-lg);
	line-height: var(--mkt-line-normal);
	color: var(--foreground);
}

/* ============================================================== Teaser ===== */

.teaser {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}
.teaser__quote {
	max-width: 20ch;
}
.teaser__body {
	max-width: 54ch;
	font-size: var(--mkt-text-lg);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
}
.teaser__cta {
	margin-top: 0.5rem;
}

/* ============================================================ Responsive ==== */

@media (max-width: 860px) {
	.statements {
		grid-template-columns: minmax(0, 1fr);
	}
	.capabilities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.enterprise {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 560px) {
	.capabilities {
		grid-template-columns: minmax(0, 1fr);
	}
	.hero__ctas .btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* Reduced motion: the reveal-up handling in site.css already shows everything;
   nothing here animates on its own (the mock is GSAP-driven and seeked to its
   settled beat by landing.js). */