/*
	Key Spammer marketing site.

	One stylesheet, no framework, no build step. Fonts are the system stack
	rather than a webfont: nothing is fetched from a third party, which keeps
	the site consistent with an application that makes no network requests at
	all, and means there is no cookie or consent surface to explain.

	The palette is Catppuccin Mocha, the same values the application and the
	Store artwork use. The site is deliberately dark only. A light variant
	would not match the product, and a half-hearted one reads worse than a
	committed single look.
*/

:root {
	--base: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;
	--surface: #262637;
	--overlay: #45475f;
	--text: #cdd6f4;
	--subtext: #a6adc8;
	--muted: #8a91ab;
	--blue: #89b4fa;
	--blue-deep: #638dd8;
	--yellow: #f9e2af;
	--green: #a6e3a1;
	--red: #f38ba8;

	--measure: 68ch;
	--radius: 14px;
	--gap: clamp(1rem, 2.5vw, 2rem);
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--base);
	color: var(--text);
	font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
}

h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

h3 {
	font-size: 1.125rem;
	font-weight: 650;
}

p {
	margin: 0 0 1.1em;
	max-width: var(--measure);
}

a {
	color: var(--blue);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: #a8c7ff;
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	max-width: 100%;
	height: auto;
}

code {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.9em;
	background: var(--crust);
	padding: 0.15em 0.4em;
	border-radius: 5px;
	color: var(--yellow);
}

/* --- layout ------------------------------------------------------------- */

.wrap {
	width: min(1120px, 100% - 2.5rem);
	margin-inline: auto;
}

section {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	border-top: 1px solid #ffffff0d;
}

.lede {
	font-size: clamp(1.075rem, 1rem + 0.45vw, 1.3rem);
	color: var(--subtext);
}

/* --- skip link ---------------------------------------------------------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--blue);
	color: var(--crust);
	padding: 0.7em 1.2em;
	font-weight: 650;
	border-radius: 0 0 var(--radius) 0;
	z-index: 10;
}

.skip:focus {
	left: 0;
}

/* --- header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #1e1e2ee6;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #ffffff0f;
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: var(--gap);
	min-height: 66px;
	flex-wrap: wrap;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.brand img {
	width: 30px;
	height: 30px;
	border-radius: 7px;
}

.site-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 2vw, 1.6rem);
	font-size: 0.95rem;
	flex-wrap: wrap;
}

.site-nav a {
	color: var(--subtext);
	text-decoration: none;
}

.site-nav a:hover {
	color: var(--text);
}

.lang {
	display: inline-flex;
	border: 1px solid var(--overlay);
	border-radius: 999px;
	overflow: hidden;
}

.lang a,
.lang span {
	padding: 0.2em 0.7em;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--muted);
}

.lang [aria-current="true"] {
	background: var(--blue);
	color: var(--crust);
}

/* --- hero --------------------------------------------------------------- */

.hero {
	border-top: 0;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: -30% 0 auto 50%;
	width: 900px;
	height: 900px;
	transform: translateX(-50%);
	background: radial-gradient(circle, #89b4fa26 0%, transparent 62%);
	pointer-events: none;
}

.hero .wrap {
	position: relative;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.hero .wrap {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

.hero h1 {
	margin-bottom: 0.4em;
}

.hero-shot {
	justify-self: center;
	border-radius: var(--radius);
	border: 1px solid var(--overlay);
	box-shadow: 0 24px 60px #00000073;
	display: block;
}

/* --- buttons ------------------------------------------------------------ */

.cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.6rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.8em 1.5em;
	border-radius: 10px;
	font-weight: 650;
	font-size: 1rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.btn-primary {
	background: linear-gradient(180deg, var(--blue), var(--blue-deep));
	color: var(--crust);
}

.btn-primary:hover {
	color: var(--crust);
	transform: translateY(-1px);
}

.btn-secondary {
	border-color: var(--overlay);
	color: var(--text);
}

.btn-secondary:hover {
	border-color: var(--blue);
	color: var(--text);
}

/* The Store listing is not live yet. This is a real disabled control rather
   than a link to nowhere, so nobody is sent to a 404 and no crawler indexes a
   dead destination. */
.btn-pending {
	background: var(--surface);
	border-color: var(--overlay);
	color: var(--muted);
	cursor: not-allowed;
}

.cta-note {
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0;
}

.badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yellow);
	background: #f9e2af1a;
	border: 1px solid #f9e2af33;
	border-radius: 999px;
	padding: 0.25em 0.8em;
	margin-bottom: 1.2rem;
}

/* --- cards -------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 2rem;
}

.card {
	background: var(--mantle);
	border: 1px solid #ffffff0f;
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
}

.card h3 {
	margin-bottom: 0.35em;
	color: var(--text);
}

.card p {
	margin: 0;
	color: var(--subtext);
	font-size: 0.97rem;
}

.card-key {
	color: var(--blue);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5rem;
}

/* --- figures ------------------------------------------------------------ */

figure {
	margin: 2rem 0 0;
}

figure img {
	border-radius: var(--radius);
	border: 1px solid var(--overlay);
	box-shadow: 0 18px 44px #0000005e;
	display: block;
}

figcaption {
	color: var(--muted);
	font-size: 0.9rem;
	margin-top: 0.8rem;
	max-width: var(--measure);
}

/* --- lists -------------------------------------------------------------- */

.checks {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0;
	display: grid;
	gap: 0.7rem;
	max-width: var(--measure);
}

.checks li {
	position: relative;
	padding-left: 1.8rem;
	color: var(--subtext);
}

.checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 3px;
	background: var(--blue);
}

.caveats li::before {
	background: var(--yellow);
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
	margin-top: 2rem;
	display: grid;
	gap: 0.7rem;
}

.faq details {
	background: var(--mantle);
	border: 1px solid #ffffff0f;
	border-radius: var(--radius);
	padding: 0 1.4rem;
}

.faq summary {
	cursor: pointer;
	font-weight: 650;
	padding: 1.1rem 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	color: var(--blue);
	font-size: 1.3rem;
	line-height: 1;
	flex: none;
}

.faq details[open] summary::after {
	content: "\2212";
}

.faq details > p {
	margin-top: 0;
	padding-bottom: 1.1rem;
	color: var(--subtext);
}

/* --- callout ------------------------------------------------------------ */

.callout {
	border: 1px solid #f38ba833;
	background: #f38ba812;
	border-radius: var(--radius);
	padding: 1.3rem 1.5rem;
	margin-top: 2rem;
	max-width: var(--measure);
}

.callout p:last-child {
	margin-bottom: 0;
}

.callout strong {
	color: var(--red);
}

.callout-quiet {
	border-color: #89b4fa33;
	background: #89b4fa12;
}

.callout-quiet strong {
	color: var(--blue);
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid #ffffff0f;
	background: var(--crust);
	padding-block: 2.6rem;
	color: var(--muted);
	font-size: 0.92rem;
}

.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: center;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

.site-footer a {
	color: var(--subtext);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--text);
	text-decoration: underline;
}

/* --- long-form pages (privacy, terms) ----------------------------------- */

.doc {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.doc h2 {
	margin-top: 2.4rem;
	font-size: 1.35rem;
}

.doc ul {
	max-width: var(--measure);
	color: var(--subtext);
	padding-left: 1.2rem;
}

.doc li {
	margin-bottom: 0.5rem;
}

.doc .meta {
	color: var(--muted);
	font-size: 0.95rem;
	border-left: 2px solid var(--overlay);
	padding-left: 1rem;
}

/* The Finnish pages are translations of the English ones and say so. Quiet
   rather than prominent: it is a disclosure, not a warning, and the reader is
   already reading the thing it describes. */
.ai-note {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85em;
	color: var(--muted);
}