:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #16181d;
	--muted: #667085;
	--border: #e6e8ec;
	--accent: #2563eb;
	--accent-fg: #ffffff;
	--surface: #f7f8fa;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f1115;
		--fg: #eceef1;
		--muted: #9aa3af;
		--border: #262a33;
		--accent: #60a5fa;
		--accent-fg: #0f1115;
		--surface: #171a21;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	background: var(--bg);
	color: var(--fg);
	line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.nl-banner {
	background-color: #004988;
	box-shadow: 0 8px 8px -8px #707070;
}
.nl-banner-inner {
	padding: 10px 1.5rem;
}
.nl-banner-logo-link {
	/* Without this, Safari's clickable hit-area for the <a> (inline, by
	   default) doesn't line up with its display:block <img> child, so
	   clicks on the visible logo don't register even though clicks
	   nearby do. */
	display: inline-block;
	line-height: 0;
}
.nl-banner-logo {
	display: block;
	width: 146px;
	height: 47px;
	border: none;
	/* Safari treats <img> as natively draggable; if the cursor moves at
	   all between mousedown and mouseup (e.g. hovering, then moving to
	   click rather than clicking in one decisive motion), it can
	   interpret that as starting an image drag instead of a click,
	   silently swallowing the link navigation. -webkit-user-drag is the
	   actual fix; draggable="false" on the element is a backstop. */
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

header.topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
}
header.topbar .brand { font-weight: 700; font-size: 1.05rem; color: var(--fg); }
header.topbar .brand:hover { text-decoration: none; }
header.topbar nav a { margin-left: 1.25rem; color: var(--fg); font-size: 0.92rem; }

main {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

footer {
	text-align: center;
	color: var(--muted);
	font-size: 0.82rem;
	padding: 2rem 0;
}

.hero { text-align: center; margin-bottom: 2rem; }
.hero h1 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.hero .lead { color: var(--muted); font-size: 1.05rem; }

h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin: 0; }

.platform-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.platform-card {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--fg);
	text-align: center;
}
.platform-card:hover { border-color: var(--accent); text-decoration: none; }
.platform-card .cta { display: block; margin-top: 0.6rem; color: var(--accent); font-size: 0.9rem; }

.store-badges { text-align: center; margin-top: 3rem; }
.store-badges h2 { margin-bottom: 1rem; }
.store-badges-row {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.store-badge-link {
	/* Same two Safari gotchas as the banner logo: an inline <a> around a
	   display:block <img> has a mismatched hit-area, and <img> is
	   natively draggable, which can swallow a click that has any cursor
	   movement before it. */
	display: inline-block;
	line-height: 0;
}
.store-badge {
	display: block;
	width: 160px;
	height: auto;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.release-list { display: flex; flex-direction: column; gap: 1rem; }
.release-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
}
.release-main { min-width: 0; }
.release-meta { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0; }
.release-description {
	margin: 0.6rem 0 0;
	font-size: 0.92rem;
	white-space: pre-wrap;
	color: var(--fg);
}

.notice {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--border);
	border-radius: 8px;
	color: var(--muted);
	text-align: center;
}

.btn {
	flex-shrink: 0;
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border-radius: 8px;
	background: var(--accent);
	color: var(--accent-fg);
	font-weight: 600;
	font-size: 0.92rem;
}
.btn:hover { text-decoration: none; opacity: 0.92; }

@media (max-width: 480px) {
	.release-card { flex-direction: column; align-items: flex-start; }
}