/*
Theme Name: Counterhand
Theme URI: https://counterhand.balan.at/
Author: Miroslav Balan
Description: Product site for Counterhand MCP for WooCommerce. A single-purpose theme — the landing page, the connect flow, and the licence checkout.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: counterhand
*/

/*
 * Visual direction: an operator's console, not a brochure.
 *
 * The product is a developer tool whose entire surface is tool names, scopes
 * and JSON-RPC, so monospace carries the display type rather than being
 * quarantined into code blocks. Dark is the primary theme because that is where
 * the audience works; the light theme is designed, not inverted.
 *
 * The accent is a cold signal-green used once per section — it reads as a
 * terminal cursor, and it deliberately avoids the warm-cream-and-serif look
 * that every other AI-adjacent product page currently wears.
 */

/*
 * Self-hosted so no request leaves the visitor's browser for a font CDN —
 * WordPress.org forbids remote assets and GDPR makes them a liability. Latin
 * subsets only; the whole set is under 120 KB.
 */
@font-face {
	font-family: "Inter Tight";
	src: url("assets/fonts/InterTight-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("assets/fonts/InterTight-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--void: #151a23;
	--panel: #1d232e;
	--sunk: #121720;
	--wire: #2c3542;
	--wire-lit: #3d4757;

	--fg: #e8ecf1;
	--fg-2: #b7c0cc;
	--fg-mute: #7d8695;

	--signal: #4ade9a;
	--signal-dim: #1d6b48;
	--cyan: #5ec8e8;
	--violet: #a78bfa;
	--warn: #e0a355;
	--danger: #e4695a;

	--bg: var(--void);
	--surface: var(--panel);
	--surface-sunk: var(--sunk);
	--line: var(--wire);
	--line-lit: var(--wire-lit);
	--accent: var(--signal);
	--warn-wash: rgba(224, 163, 85, .12);
	--warn-line: rgba(224, 163, 85, .35);

	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--measure: 58ch;
	--gap: clamp(16px, 2.5vw, 28px);
	--pad: clamp(20px, 4vw, 40px);

	--s--1: clamp(.75rem, .73rem + .1vw, .81rem);
	--s-0: clamp(.94rem, .91rem + .14vw, 1rem);
	--s-1: clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
	--s-2: clamp(1.4rem, 1.24rem + .78vw, 1.95rem);
	--s-3: clamp(1.55rem, 1.32rem + 1.05vw, 2.2rem);
	--s-4: clamp(2.35rem, 1.7rem + 2.7vw, 3.9rem);
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f7f8fa;
		--surface: #ffffff;
		--surface-sunk: #eef1f5;
		--line: #dde2e9;
		--line-lit: #c3ccd8;
		--fg: #10141a;
		--fg-2: #39424f;
		--fg-mute: #616b7a;
		/* The dark theme's mint is 1.9:1 on white — unusable as text there. */
		--accent: #0f7a4d;
		--warn: #8a5a12;
		--warn-wash: rgba(138, 90, 18, .09);
		--warn-line: rgba(138, 90, 18, .28);
	}
}

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

body {
	margin: 0;
	position: relative;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: var(--s-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/*
 * Two soft pools of colour behind everything — the page had no depth at all,
 * and a single flat fill under twelve bordered boxes is what made it read as
 * a spreadsheet.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(58rem 32rem at 78% -6%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
		radial-gradient(46rem 28rem at 8% 12%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 60%);
}

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

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -.028em;
	text-wrap: balance;
	margin: 0;
}

p { margin: 0; max-width: var(--measure); }
a { color: inherit; }

:where(a, button, summary, input):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: var(--s--1);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}
.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentcolor;
	opacity: .55;
}
#ask .eyebrow, #licence .eyebrow { color: var(--cyan); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Header --------------------------------------------------------------- */

.site-head {
	display: flex; align-items: center; gap: 14px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.brand {
	font-family: var(--mono);
	font-size: var(--s-1);
	font-weight: 600;
	letter-spacing: -.03em;
	text-decoration: none;
}
/* A cursor block, because the product is a thing you operate. */
.brand::before {
	content: "▍";
	color: var(--accent);
	margin-right: 2px;
}
.site-head__spacer { flex: 1 1 auto; }
.site-head__meta {
	font-family: var(--mono);
	font-size: var(--s--1);
	color: var(--fg-mute);
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: clamp(44px, 8vh, 88px) 0 clamp(40px, 6vh, 72px); }
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

h1 {
	font-size: var(--s-4);
	line-height: 1.14;
	padding-bottom: .06em;
	margin: 14px 0 0;
	max-width: 17ch;
}

.hero__lede {
	margin-top: 18px;
	font-size: var(--s-1);
	line-height: 1.55;
	color: var(--fg-2);
	max-width: 46ch;
}

.hero__foot {
	margin-top: 18px;
	font-size: var(--s--1);
	color: var(--fg-mute);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 22px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: var(--accent);
	color: #06231a;
	font: 600 var(--s-0)/1 var(--sans);
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn__meta { font-weight: 500; opacity: .72; }

.btn--ghost {
	background: transparent;
	color: var(--fg);
	border-color: var(--line-lit);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* --- Chat demo ------------------------------------------------------------ */

/*
 * The hero's job is to show what using this feels like, so it is a worked
 * conversation ending on the moment that sells the product: a price change
 * stopping to ask.
 */
.chat {
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(12px);
	border: 1px solid var(--line-lit);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.7);
	overflow: hidden;
}
.chat__bar {
	padding: 11px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-sunk);
}
.chat__store { font-size: var(--s--1); color: var(--fg-mute); }

.chat__body { padding: 18px; display: grid; gap: 12px; }

.msg { max-width: 88%; }
.msg p { margin: 0; font-size: var(--s-0); line-height: 1.55; max-width: none; }

.msg--you {
	justify-self: end;
	background: var(--accent);
	color: #06231a;
	padding: 10px 15px;
	border-radius: 14px 14px 4px 14px;
	font-weight: 500;
}

.msg--bot {
	justify-self: start;
	background: var(--surface-sunk);
	border: 1px solid var(--line);
	color: var(--fg-2);
	padding: 12px 15px;
	border-radius: 14px 14px 14px 4px;
}
.msg--bot strong { color: var(--fg); font-weight: 600; }
.fig {
	font-variant-numeric: tabular-nums;
	color: var(--fg);
	font-weight: 600;
}

/* What the assistant did, the way the in-admin chat shows it. */
.msg__tool {
	display: flex; align-items: center; gap: 7px;
	margin: 0 0 7px !important;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--line);
	font-size: var(--s--1) !important;
	color: var(--fg-mute);
}
.msg__tick { color: var(--accent); font-weight: 700; }

/* --- Sections ------------------------------------------------------------- */

section { padding: clamp(52px, 8vh, 96px) 0; border-top: 1px solid var(--line); }
.sec-head { margin-bottom: clamp(26px, 4vh, 42px); }
.sec-head h2 {
	font-size: var(--s-3);
	line-height: 1.22;
	margin: 12px 0 0;
	max-width: 24ch;
	padding-bottom: .08em;
}
.sec-head p { margin-top: 14px; color: var(--fg-2); }

/* --- Two ways ------------------------------------------------------------- */

.ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}
.way {
	position: relative;
	padding: 26px 28px 28px;
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	border: 1px solid var(--line);
	border-top: 2px solid var(--accent);
	border-radius: 13px;
}
/* The second route is the one people arrive expecting; the hue separates them. */
.way--alt { border-top-color: var(--cyan); }

.way__n {
	font-family: var(--mono);
	font-size: var(--s--1);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 8px;
}
.way--alt .way__n { color: var(--cyan); }

.way h3 { font-size: var(--s-1); margin-bottom: 10px; }
.way__body { color: var(--fg-2); max-width: 42ch; }

.way__meta {
	margin: 20px 0 9px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
	padding: 4px 11px;
	border: 1px solid var(--line-lit);
	border-radius: 999px;
	font-size: var(--s--1);
	color: var(--fg-2);
}

.way__note {
	margin-top: 14px;
	font-size: var(--s--1);
	color: var(--fg-mute);
	max-width: 40ch;
}

/* --- Example questions ---------------------------------------------------- */

.asks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 14px;
}
.ask {
	position: relative;
	padding: 20px 22px 20px 40px;
	background: color-mix(in srgb, var(--surface) 72%, transparent);
	border: 1px solid var(--line);
	border-radius: 12px;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.ask:hover {
	border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
	background: color-mix(in srgb, var(--surface) 95%, transparent);
	transform: translateY(-2px);
}
/* A prompt caret: these are things you type, not features you read. */
.ask::before {
	content: "›";
	position: absolute;
	left: 20px;
	top: 18px;
	color: var(--accent);
	font-size: 1.15em;
	line-height: 1.35;
}
.ask__q {
	margin: 0;
	font-size: var(--s-0);
	font-weight: 600;
	color: var(--fg);
	max-width: none;
}
.ask__a {
	margin: 7px 0 0;
	font-size: var(--s--1);
	color: var(--fg-mute);
	max-width: none;
}

/* --- Safety --------------------------------------------------------------- */

.safety {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(30px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 900px) { .safety { grid-template-columns: 1fr; } }

.step {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__n {
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--accent);
	color: var(--accent);
	font-size: var(--s--1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--s-1); margin-bottom: 6px; }
.step p { color: var(--fg-2); }

/* --- Consent card --------------------------------------------------------- */

.consent {
	position: sticky;
	top: 28px;
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	backdrop-filter: blur(12px);
	border: 1px solid var(--line-lit);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.7);
	overflow: hidden;
}
@media (max-width: 900px) { .consent { position: static; } }

.consent__head {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 15px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-sunk);
	font-size: var(--s--1);
	color: var(--fg-mute);
}
.consent__lock { color: var(--accent); display: inline-flex; }
.consent__body { padding: 18px; }
.consent__title { margin: 0; font-size: var(--s-1); font-weight: 600; color: var(--fg); }
.consent__sub { margin: 3px 0 15px; font-size: var(--s--1); color: var(--fg-mute); }

.consent__group {
	margin: 14px 0 7px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-mute);
}
.consent__group:first-of-type { margin-top: 0; }

.perm {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 12px;
	margin-bottom: 7px;
	border: 1px solid var(--line);
	border-radius: 7px;
	font-size: var(--s--1);
	color: var(--fg-2);
}
.perm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.perm__name { font-weight: 600; color: var(--fg); }
.perm__desc { font-size: 11.5px; color: var(--fg-mute); line-height: 1.45; }
.perm__box {
	width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px;
	display: grid; place-items: center;
	border: 1px solid var(--line-lit);
	border-radius: 4px;
	font-size: 11px;
	color: transparent;
}
.perm--on .perm__box {
	background: var(--accent);
	border-color: var(--accent);
	color: #06231a;
}
.perm--write { border-left: 2px solid var(--warn); }
.perm__tag {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--warn-wash);
	color: var(--warn);
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
}

.consent__actions { display: flex; gap: 8px; margin-top: 14px; }
.consent__btn {
	padding: 8px 15px;
	border-radius: 6px;
	border: 1px solid var(--line-lit);
	font-size: var(--s--1);
	color: var(--fg-mute);
}
.consent__btn--go {
	background: var(--accent);
	border-color: var(--accent);
	color: #06231a;
	font-weight: 600;
}

/* --- Areas ---------------------------------------------------------------- */

.groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
	gap: 10px;
}
.group {
	position: relative;
	background: color-mix(in srgb, var(--surface) 72%, transparent);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 16px 17px;
	transition: border-color .18s ease, background-color .18s ease;
}
.group:hover {
	border-color: color-mix(in srgb, var(--cyan) 45%, var(--line));
	background: color-mix(in srgb, var(--surface) 95%, transparent);
}
.group__name { font-weight: 600; font-size: var(--s-0); color: var(--fg); }
.group__eg {
	font-size: var(--s--1);
	color: var(--fg-mute);
	margin-top: 3px;
}

/* --- Buy ------------------------------------------------------------------ */

.buy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(26px, 5vw, 60px);
	align-items: center;
	padding: clamp(24px, 4vw, 38px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -24px rgba(0,0,0,.6);
}
@media (max-width: 780px) { .buy { grid-template-columns: 1fr; } }

.buy__side { text-align: left; }

.price {
	font-family: var(--display);
	font-size: var(--s-4);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.price span { font-size: var(--s-0); font-weight: 400; letter-spacing: 0; color: var(--fg-mute); }

.buy__note { margin-top: 12px; font-size: var(--s--1); color: var(--fg-mute); }

.includes { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.includes li {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: var(--s-0); color: var(--fg-2);
}
.includes li::before {
	content: "✓";
	color: var(--accent);
	font-weight: 700;
	flex: 0 0 auto;
}

/* --- Footer --------------------------------------------------------------- */

.site-foot {
	border-top: 1px solid var(--line);
	padding: 28px 0 44px;
	color: var(--fg-mute);
	font-size: var(--s--1);
}
.site-foot p { max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.btn:hover { transform: none; }
}