/* Marketing site — paper-and-ink editorial, borrowed straight from the app's
   own palette (#f6f6f6 paper, #252525 ink, #81b4ff accent). Serif display
   over sans body; hairline rules; the kbd chip is the signature motif.
   No JavaScript anywhere on this site — the hero demo is pure CSS. */

:root {
	--paper: #f6f6f6;
	--ink: #252525;
	--ink-soft: #55565a;
	--ink-faint: #98999d;
	--line: #dcdcda;
	--accent: #81b4ff;
	--card: #ffffff;
	--serif: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino, Georgia, serif;
	--sans:
		ui-sans-serif, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.page {
	max-width: 660px;
	margin: 0 auto;
	padding: 0 24px 48px;
}

h1,
h2,
h3 {
	font-family: var(--serif);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h2 {
	font-size: 28px;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration-color: var(--ink-faint);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: var(--ink);
}

kbd {
	font-family: var(--sans);
	font-size: 0.82em;
	font-weight: 500;
	background: var(--card);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: 0.1em 0.45em;
	white-space: nowrap;
}

/* --- hero --- */

.hero {
	padding: 88px 0 48px;
	text-align: center;
}

.wordmark {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 56px;
}

.hero-title {
	font-size: clamp(38px, 7vw, 54px);
}

.hero-lede {
	max-width: 460px;
	margin: 0 auto 56px;
	color: var(--ink-soft);
	font-size: 18px;
}

/* --- CSS-only WASD vignette --- */

.demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	margin: 0 auto 64px;
}

.demo-cards {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	min-height: 118px;
}

.demo-card {
	width: 190px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.demo-line {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: #ececea;
}

.demo-line.-title {
	width: 55%;
	background: #dddddb;
}

.demo-line.-short {
	width: 40%;
}

.demo-line.-link {
	height: auto;
	background: none;
	font-family: var(--mono);
	font-size: 11.5px;
	color: #4f83cc;
	animation: link-pulse 6s infinite;
}

/* The second card "opens to the right" on a loop: appears, settles, resets. */
.demo-card.-opens {
	animation: card-open 6s infinite;
	transform-origin: left center;
}

@keyframes card-open {
	0%,
	38% {
		opacity: 0;
		transform: translateX(-14px) scale(0.98);
	}
	48%,
	88% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(-14px) scale(0.98);
	}
}

@keyframes link-pulse {
	0%,
	30%,
	50%,
	100% {
		color: #4f83cc;
	}
	38%,
	44% {
		color: #1b5db8;
	}
}

.demo-keys {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.demo-keys kbd {
	font-size: 12px;
	padding: 0.25em 0.6em;
}

.demo-keys-row {
	display: flex;
	gap: 5px;
}

/* The held key presses down while the card is open */
.demo-keys kbd.-held {
	animation: key-hold 6s infinite;
}

@keyframes key-hold {
	0%,
	30%,
	92%,
	100% {
		background: var(--card);
		border-bottom-width: 2px;
		transform: none;
	}
	36%,
	86% {
		background: var(--accent);
		border-color: var(--accent);
		border-bottom-width: 1px;
		transform: translateY(1px);
	}
}

.demo-caption {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
	.demo-card.-opens,
	.demo-keys kbd.-held,
	.demo-line.-link {
		animation: none;
	}
	.demo-card.-opens {
		opacity: 1;
		transform: none;
	}
}

/* --- waitlist form --- */

.signup {
	max-width: 420px;
	margin: 0 auto;
}

.signup-label {
	display: block;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 12px;
}

.signup-row {
	display: flex;
	gap: 8px;
}

.signup input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 15px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
}

.signup input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
	border-color: transparent;
}

.signup button {
	font: inherit;
	font-size: 15px;
	font-weight: 550;
	padding: 10px 18px;
	border: none;
	border-radius: 8px;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
	white-space: nowrap;
}

.signup button:hover {
	background: #000;
}

.signup-note {
	font-size: 13px;
	color: var(--ink-faint);
	margin: 12px 0 0;
}

/* --- sections --- */

section {
	border-top: 1px solid var(--line);
	padding: 56px 0;
}

.beat-kicker {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 10px;
}

.beat p,
.own p {
	color: var(--ink-soft);
}

.honesty ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
}

.honesty li {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-soft);
}

.honesty li:last-child {
	border-bottom: none;
}

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

.honesty-note {
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink-faint);
	margin: 0;
}

/* --- pricing --- */

.pricing-tiers {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 14px;
	margin-top: 24px;
}

.tier {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px 22px 10px;
}

.tier.-pro {
	border-color: var(--ink);
}

.tier h3 {
	font-size: 18px;
	margin-bottom: 2px;
}

.tier-price {
	font-family: var(--serif);
	font-size: 30px;
	margin: 0 0 12px;
}

.tier-price span {
	font-size: 16px;
	color: var(--ink-faint);
}

.tier-price em {
	font-family: var(--sans);
	font-style: normal;
	font-size: 13px;
	color: var(--ink-faint);
}

.tier p {
	font-size: 14px;
	color: var(--ink-soft);
}

.tier-founding {
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.tier-founding strong {
	color: var(--ink);
}

@media (max-width: 560px) {
	.pricing-tiers {
		grid-template-columns: 1fr;
	}
}

/* --- FAQ --- */

.faq dt {
	font-weight: 600;
	margin-top: 20px;
}

.faq dd {
	margin: 4px 0 0;
	color: var(--ink-soft);
}

/* --- footer --- */

.footer {
	border-top: 1px solid var(--line);
	padding: 48px 0 0;
	text-align: center;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin: 32px 0 16px;
	font-size: 14px;
}

.footer-fine {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-faint);
}

/* --- legal / changelog pages --- */

.prose {
	padding: 64px 0;
}

.prose h1 {
	font-size: 34px;
}

.prose h2 {
	font-size: 20px;
	margin-top: 2em;
}

.prose p,
.prose li {
	color: var(--ink-soft);
	font-size: 15px;
}

.prose .updated {
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
}

.prose-back {
	display: inline-block;
	margin-bottom: 40px;
	font-size: 14px;
}