/**
 * [SIIZ] marketing site stylesheet.
 *
 * The site looks like the product: the same ledger language as siiz-client
 * (src/styles/tokens.css and the role tokens in src/styles.scss, STYLE_GUIDE.md
 * sections 1 and 2): navy chrome, white paper, blue hairline edges, 8px cards,
 * 4px controls with a 1.5px edge, Epilogue display type, IBM Plex Sans text and
 * IBM Plex Mono eyebrows. Values are a one-way copy of the app's palette; the app
 * is the source of truth.
 *
 * Two lights, one look: the role tokens on :root are the light values and the
 * prefers-color-scheme block below swaps them for dark. Rules never branch on the
 * light. The chrome (top bar, hero, footer) stays navy in both.
 *
 * The accent changes exactly two things: the logo balls and the primary button
 * (the product's accent contract, ruling C). Default ice; <html data-accent="amber|mint|grey">
 * swaps --logo-ball and the button's deep shade (--btn-p, --btn-p-hover), whose label is
 * white. Links, headings, focus and every other use of --accent stay the steady ice blue.
 */

/* Self-hosted, like the app: no third-party font hosts. */
@font-face {
	font-family: "Epilogue Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/epilogue-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 700;
	src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
	color-scheme: light dark;

	/* Chrome: navy in both lights. */
	--chrome: #0B1626;
	--chrome-deep: #08101B;
	--chrome-line: #20344D;
	--on-chrome: #EAF1F8;
	--on-chrome-2: #B9C7D6;
	--on-chrome-3: #8EA2B6;

	/* Surfaces and ink (light). */
	--canvas: #FFFFFF;
	--paper: #FFFFFF;
	--ground: #F4F8FB;
	--well: #EDF3F8;
	--hairline: #DFEAF1;
	--hairline-strong: #B3CADB;
	--field-edge: #7A92A4;
	--ink: #0B1626;
	--text: #33495C;
	--muted: #5A7385;
	--danger: #B42318;
	--shadow-card: 0 1px 2px rgba(11, 22, 38, 0.06), 0 4px 12px rgba(11, 22, 38, 0.04);

	/* The steady blue: tints, markers, links, headings and focus. It never follows the accent. */
	--accent: #53A6DC;
	--accent-hover: #7DBDE8;
	--accent-text: #0F6CB0;
	--on-accent: #0B1626;
	--focus: #0F6CB0;

	/* The chosen accent: the logo balls and the primary button (ice by default). The label on the button is white (5.4:1 or better). */
	--logo-ball: #53A6DC;
	--btn-p: #2170A3;
	--btn-p-hover: #19547B;
	--btn-p-fg: #FFFFFF;
	--btn-p-sheen: linear-gradient(180deg, color-mix(in srgb, var(--btn-p) 88%, #FFFFFF) 0%, var(--btn-p) 60%);
	--shadow-btn-p: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(11, 22, 38, 0.25);
	--shadow-btn-p-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.35);

	/* Logo roles (the designer's two inks and the crop-mark grey). */
	--logo-ink: #0C1727;
	--logo-frame: #9C9C9D;

	/* Type and shape (the app's). */
	--font-display: "Epilogue Variable", "Epilogue", "Helvetica Neue", Arial, sans-serif;
	--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 9999px;
	--container: 1120px;
	--container-text: 720px;
}

:root[data-accent="amber"] { --logo-ball: #F4A422; --btn-p: #945F07; --btn-p-hover: #6F4706; }
:root[data-accent="mint"] { --logo-ball: #6EC8BD; --btn-p: #2C756C; --btn-p-hover: #215851; }
:root[data-accent="grey"] { --logo-ball: #9C9C9E; --btn-p: #6A6A6D; --btn-p-hover: #505051; }

@media (prefers-color-scheme: dark) {
	:root,
	:root[data-accent] {
		--canvas: #08101B;
		--paper: #0E1A2B;
		--ground: #0B1523;
		--well: #112038;
		--hairline: #20344D;
		--hairline-strong: #35506E;
		--field-edge: #5C7794;
		--ink: #EAF1F8;
		--text: #B9C7D6;
		--muted: #8EA2B6;
		--danger: #FCA5A5;
		--shadow-card: none;
		--shadow-btn-p: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.5);
		--shadow-btn-p-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.5);
		--accent-text: var(--accent);
		--focus: #80BBE5;
		--logo-ink: #FFFFFF;
	}
}

/* ── Reset-lite ──────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--canvas);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, p, ul { margin: 0; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

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

a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--radius-md);
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.container { padding: 0 28px; }
}

/* The logo: three roles, so the accent swaps the balls and the light swaps the ink. */
.logo { display: block; height: 100%; width: auto; overflow: visible; }
.logo-ink { fill: var(--logo-ink); }
.logo-ball { fill: var(--logo-ball); }
.logo-frame { fill: none; stroke: var(--logo-frame); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }

/* ── Topbar (flat navy chrome, like the app's rail and top bar) ──────────── */

.site-topbar {
	--logo-ink: #FFFFFF;
	background: var(--chrome);
	border-bottom: 1px solid var(--chrome-line);
}

.site-topbar .container {
	display: flex;
	align-items: center;
	gap: 8px 24px;
	min-height: 64px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 44px;
	margin-right: auto;
}

.site-logo:hover { text-decoration: none; }

.site-logo .logo { height: 44px; width: auto; }

.site-logo-tagline {
	display: none;
	padding-left: 14px;
	border-left: 1px solid var(--chrome-line);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-chrome-3);
	line-height: 1.2;
}

@media (min-width: 700px) {
	.site-logo-tagline { display: inline; }
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.site-nav a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 500;
	color: var(--on-chrome-2);
}

.site-nav a:not(.btn):hover {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.07);
	text-decoration: none;
}

/* Active nav: the accent marker, like the rail's active item. */
.site-nav a.active:not(.btn) {
	color: #FFFFFF;
	box-shadow: inset 0 -2px 0 var(--accent);
	border-radius: 0;
}

.site-nav .btn { margin-left: 8px; }

.site-topbar a:focus-visible,
.site-footer a:focus-visible,
.hero a:focus-visible,
.cta-panel a:focus-visible { outline-color: var(--accent); }

/* ── Announce bar ────────────────────────────────────────────────────────── */

.announce {
	background: color-mix(in srgb, var(--accent) 12%, var(--paper));
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline));
}

.announce .container {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 14px;
	color: var(--text);
}

.announce p { flex: 1; }

.announce a { font-weight: 600; }

.announce-dismiss {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.announce-dismiss:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ── Page scaffolding ────────────────────────────────────────────────────── */

.page { padding: 24px 0 48px; }

.page > .container > * + * { margin-top: 24px; }

@media (min-width: 768px) {
	.page { padding: 40px 0 72px; }
	.page > .container > * + * { margin-top: 28px; }
}

.page-head { padding: 8px 0 0; }

.page-head h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.page-head p {
	margin-top: 10px;
	font-size: 17px;
	color: var(--text);
	max-width: var(--container-text);
}

.page-head .eyebrow { display: block; margin-bottom: 10px; }

/* Eyebrow: small-capital mono. */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ── Cards: hairline edge, 8px, a soft neutral elevation ─────────────────── */

.card {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 20px;
}

@media (min-width: 768px) {
	.card { padding: 24px; }
}

.card h2, .card-title { font-size: 20px; letter-spacing: -0.02em; }

.card h3 { font-size: 18px; letter-spacing: -0.015em; }

.card p {
	margin-top: 8px;
	font-size: 15px;
	color: var(--text);
}

.card .eyebrow { display: block; margin-bottom: 10px; }

/* A ball before the eyebrow: the logo's sizing dot. */
.card .eyebrow::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	vertical-align: 1px;
}

.card-cta {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
}

.card-cta::after {
	content: "\203A";
	margin-left: 6px;
	font-weight: 700;
}

/* ── Grid rows ───────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 12px; }

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Stat tiles: the ledger KPI row, a 2px ink rule over each ────────────── */

.stat-tile {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-top: 2px solid var(--ink);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 16px 18px;
	min-width: 0;
}

.stat-label {
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.stat-value {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.stat-sub {
	margin-top: 6px;
	font-size: 14px;
	color: var(--muted);
}

/* ── Chips: 2px-radius tags ──────────────────────────────────────────────── */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}

.chip-accent {
	color: var(--accent-text);
	background: color-mix(in srgb, var(--accent) 12%, var(--paper));
	border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
}

.chip-muted {
	color: var(--muted);
	background: var(--well);
	border-color: var(--hairline);
}

.card .chip + h3 { margin-top: 12px; }

/* ── Hero and call-to-action panel: navy, framed by the logo's crop marks ── */

.hero,
.cta-panel {
	--logo-ink: #FFFFFF;
	--crop: var(--logo-frame);
	background-color: var(--chrome);
	border-radius: var(--radius-lg);
	color: var(--on-chrome);
	background-image:
		linear-gradient(var(--crop), var(--crop)), linear-gradient(var(--crop), var(--crop)),
		linear-gradient(var(--crop), var(--crop)), linear-gradient(var(--crop), var(--crop)),
		linear-gradient(var(--crop), var(--crop)), linear-gradient(var(--crop), var(--crop)),
		linear-gradient(var(--crop), var(--crop)), linear-gradient(var(--crop), var(--crop));
	background-repeat: no-repeat;
	background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
	background-position:
		left 12px top 12px, left 12px top 12px,
		right 12px top 12px, right 12px top 12px,
		left 12px bottom 12px, left 12px bottom 12px,
		right 12px bottom 12px, right 12px bottom 12px;
}

.hero { padding: 44px 24px 40px; }

@media (min-width: 768px) {
	.hero { padding: 80px 56px 72px; }
}

.hero-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-chrome-3);
	margin-bottom: 18px;
	max-width: 640px;
	line-height: 1.5;
}

.hero h1 {
	font-size: clamp(2.5rem, 8vw, 4.75rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
	color: #FFFFFF;
	max-width: 720px;
}

.hero h1 mark {
	background: transparent;
	color: var(--accent);
}

.hero > p {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--on-chrome-2);
	max-width: 600px;
}

.hero > p em { color: #FFFFFF; font-style: normal; font-weight: 600; }

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.cta-panel {
	padding: 32px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.cta-panel { padding: 40px 48px; }
}

.cta-panel h2 {
	font-size: 22px;
	color: #FFFFFF;
}

.cta-panel p {
	margin-top: 6px;
	font-size: 15px;
	color: var(--on-chrome-2);
	max-width: 560px;
}

.cta-panel .hero-ctas { margin-top: 0; }

/* ── Buttons: 4px radius, 1.5px edge ─────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 20px;
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.btn:hover { text-decoration: none; }

/* Primary: the accent's deep shade with a white label, in both lights. A 1px edge in the hover shade, a soft top light and a small shadow. */
.btn-accent {
	background: var(--btn-p-sheen), var(--btn-p);
	border: 1px solid var(--btn-p-hover);
	color: var(--btn-p-fg);
	box-shadow: var(--shadow-btn-p);
}

.btn-accent:hover {
	background: var(--btn-p-hover);
	color: var(--btn-p-fg);
}

.btn-accent:active {
	background: var(--btn-p-hover);
	box-shadow: var(--shadow-btn-p-pressed);
}

/* Dark: ink on paper, in both lights (the label is the canvas colour). */
.btn-dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--canvas);
}

.btn-dark:hover { opacity: 0.88; }

.btn-neutral {
	background: transparent;
	border-color: var(--hairline-strong);
	color: var(--ink);
}

.btn-neutral:hover { background: var(--well); }

/* Ghost on navy. */
.btn-ghost {
	background: transparent;
	border-color: var(--on-chrome-3);
	color: #FFFFFF;
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: #FFFFFF;
}

.btn-block { width: 100%; }

/* ── Callout ─────────────────────────────────────────────────────────────── */

.callout {
	background: color-mix(in srgb, var(--accent) 9%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline));
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-lg);
	padding: 16px 20px;
	font-size: 15px;
	color: var(--text);
}

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

/* ── Checklist card ──────────────────────────────────────────────────────── */

.checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

@media (max-width: 599.98px) {
	.checklist { grid-template-columns: minmax(0, 1fr); }
}

.checklist li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	color: var(--text);
	line-height: 1.5;
}

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: var(--radius-sm);
	background: var(--accent);
}

.checklist li::after {
	content: "";
	position: absolute;
	left: 3.5px;
	top: 7px;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--on-accent);
	border-bottom: 2px solid var(--on-accent);
	transform: rotate(-45deg);
}

/* ── Teaser cards ────────────────────────────────────────────────────────── */

.teaser-bars { margin-top: 16px; }

.teaser-bars span {
	display: block;
	height: 8px;
	margin-top: 8px;
	border-radius: var(--radius-sm);
	background: var(--accent);
	opacity: 0.35;
	filter: blur(3px);
}

.teaser-bars span:nth-child(1) { width: 92%; }
.teaser-bars span:nth-child(2) { width: 74%; }
.teaser-bars span:nth-child(3) { width: 58%; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-card { max-width: 560px; }

.form-row { margin-top: 16px; }

.form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	background: var(--paper);
	border: 1.5px solid var(--field-edge);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}

.form-hint {
	margin-top: 12px;
	font-size: 13px;
	color: var(--muted);
}

/* Honeypot: off-canvas, invisible to humans. */
.lead-form-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lead-form-status {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.lead-form-status.error { color: var(--danger); }
.lead-form-status.pending { color: var(--muted); }

.lead-form-done {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: color-mix(in srgb, var(--accent) 10%, var(--paper));
	border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--hairline));
	border-radius: var(--radius-lg);
	padding: 16px 18px;
	font-size: 15px;
	color: var(--ink);
	line-height: 1.6;
}

.lead-form-done::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.6 11.6 3.4 8.4l1.2-1.2 2 2 4.8-4.8 1.2 1.2z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.6 11.6 3.4 8.4l1.2-1.2 2 2 4.8-4.8 1.2 1.2z"/></svg>') center / contain no-repeat;
}

/* ── Prose (terms page, release and blog bodies) ─────────────────────────── */

.prose h1 { font-size: 28px; }
.prose h2 { font-size: 20px; margin-top: 28px; }
.prose h3 { font-size: 17px; margin-top: 20px; }
.prose p, .prose ul { margin-top: 10px; font-size: 15px; color: var(--text); }
.prose ul { padding-left: 22px; }
.prose li { margin-top: 6px; }

/* ── Footer: navy chrome, the crop-mark logo, the line ───────────────────── */

.site-footer {
	--logo-ink: #FFFFFF;
	background: var(--chrome);
	color: var(--on-chrome-2);
	margin-top: 24px;
}

.footer-main .container {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 28px;
	padding-top: 40px;
	padding-bottom: 36px;
}

@media (max-width: 767.98px) {
	.footer-main .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
	.footer-main .container { grid-template-columns: minmax(0, 1fr); }
}

.footer-main h5 {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-chrome-3);
	margin-bottom: 12px;
}

.footer-main p { font-size: 14px; line-height: 1.6; max-width: 320px; }

.footer-main ul { list-style: none; padding: 0; }

.footer-main li { margin-bottom: 6px; font-size: 14px; }

.footer-main a {
	display: inline-block;
	padding: 4px 0;
	color: var(--on-chrome-2);
	font-size: 14px;
}

.footer-main a:hover { color: #FFFFFF; }

.footer-legal { background: var(--chrome-deep); border-top: 1px solid var(--chrome-line); }

.footer-legal .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 13px;
	color: var(--on-chrome-3);
}

.footer-mark { display: block; height: 36px; }
.footer-mark .logo { height: 36px; width: auto; }
.footer-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-copy { margin-left: auto; }

@media (max-width: 599.98px) {
	.footer-copy { margin-left: 0; flex-basis: 100%; }
}

/* ── Misc ────────────────────────────────────────────────────────────────── */

.text-columns-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 767.98px) {
	.text-columns-2 { grid-template-columns: minmax(0, 1fr); }
}


@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ── Marketing content block (build-time blog post, see build.js "content") ── */

.blog-feature { margin-top: 24px; }
.blog-feature .blog-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.blog-feature .blog-summary { margin-top: 12px; font-size: 16px; color: var(--ink); }
.blog-feature .blog-body { margin-top: 12px; }
/* Release posts: the build-time body is h2.release-new / -better / -fixed over lists of entries, each with an optional screenshot. */
.release-feature .prose ul { list-style: none; padding-left: 0; }
.release-feature .prose li { padding-left: 12px; border-left: 3px solid var(--accent); margin-top: 12px; }
.release-feature .prose li img { display: block; max-width: 100%; margin-top: 8px; border-radius: var(--radius-lg); }
.content-hero { display: block; margin-top: 14px; width: 100%; border-radius: var(--radius-lg); }