/* Meikero — AI client marks ("Works with" strip). Monochrome; Claude keeps its brand colour. */

.clients {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: var(--space-4) 0 0;
	font-size: 0.92rem;
}
.clients__label {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-right: 4px;
}
.client {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	line-height: 1;
	white-space: nowrap;
}
.client__name { font-weight: 600; }
.client__note {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--ink-3);
	padding-left: 8px;
	border-left: 1px solid var(--line);
}
.client.is-soon { color: var(--ink-3); border-style: dashed; background: transparent; }
.client.is-soon .cmark { opacity: .55; }
.client.is-soon .client__name { font-weight: 500; }

.cmark { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.cmark--claude path { fill: #D97757; }

/* Compact: marks + names only, no label/notes (footer, cards). */
.clients--compact { gap: 8px 12px; margin-top: 0; }
.clients--compact .client { padding: 4px 8px 4px 6px; font-size: 0.85rem; }
.clients--compact .cmark { width: 16px; height: 16px; }

/* Dark surfaces: hero, dark sections, footer. */
.hero-x .clients, .section--dark .clients, .site-footer .clients { color: var(--paper); }
.hero-x .clients__label, .section--dark .clients__label, .site-footer .clients__label,
.hero-x .client.is-soon, .section--dark .client.is-soon, .site-footer .client.is-soon,
.hero-x .client__note, .section--dark .client__note, .site-footer .client__note { color: rgba(255,255,255,.62); }
.hero-x .client, .section--dark .client, .site-footer .client {
	border-color: var(--night-line);
	background: rgba(255,255,255,.04);
	color: var(--paper);
}
.hero-x .client__note, .section--dark .client__note, .site-footer .client__note { border-color: var(--night-line); }
.hero-x .client.is-soon, .section--dark .client.is-soon, .site-footer .client.is-soon { background: transparent; }

/* Home hero: one full-width row between the headline block and the demo. */
.hs-works { margin: calc(-1 * clamp(8px, 1.5vw, 20px)) 0 clamp(28px, 3vw, 40px); }
.hs-works .client { font-size: 0.88rem; }

/* Home demo: the current-client badge shows the Claude mark instead of a plain square. */
.agent .cmark { width: 12px; height: 12px; vertical-align: -1px; }

/* Inline mark beside a heading or step title. */
h2 .cmark, h3 .cmark { width: 0.9em; height: 0.9em; margin-right: 0.3em; vertical-align: -0.1em; }