body { min-height: 100dvh; background: var(--color-bg); color: var(--color-text); }
.public-header, .public-footer { display: flex; align-items: center; gap: var(--space-4); padding: 18px clamp(20px, 5vw, 72px); background: var(--color-surface); }
.public-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-border); }
.public-header nav, .public-footer nav { display: flex; align-items: center; gap: var(--space-4); }
.public-header nav { margin-left: auto; }
.public-header a, .public-footer a, .public-footer button { color: var(--color-text-muted); font-size: 0.8125rem; }
.public-header a:hover, .public-footer a:hover, .public-footer button:hover { color: var(--accent); }
.public-header .flowstate-wordmark { color: var(--color-text); font-size: 1.125rem; }
.public-header .public-cta { padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); font-weight: 650; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.public-header .public-cta:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--accent-contrast); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.public-header .public-cta:focus-visible { border-color: var(--accent-strong); color: var(--accent-contrast); outline-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.public-header .public-cta:active { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--accent-contrast); box-shadow: var(--shadow-sm); transform: translateY(0); }
.public-document { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 7vw, 84px) 0; }
.public-document h1 { margin-bottom: var(--space-5); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.035em; }
.public-document h2 { margin: var(--space-7) 0 var(--space-3); font-size: 1.35rem; }
.public-document h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.05rem; }
.public-document p, .public-document li { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; }
.public-document p + p { margin-top: var(--space-3); }
.public-document--features > p:last-child { margin-top: var(--space-7); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); box-shadow: var(--shadow-sm); }
.public-document ul { display: grid; gap: var(--space-2); padding-left: 1.4rem; }
.public-document code { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text); font-family: var(--font-mono); }
.public-footer { justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--color-border); color: var(--color-text-faint); font-size: 0.75rem; }
.public-footer button { padding: 0; }
@media (max-width: 680px) { .public-header { flex-wrap: wrap; } .public-header nav { order: 3; width: 100%; margin-left: 0; } .public-footer nav { flex-wrap: wrap; } }

/* Features: the tour invitation above the feature list. */
.public-tour {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: color-mix(in srgb, var(--accent) 6%, var(--color-surface));
}
.public-tour > div { display: grid; gap: 2px; }
.public-tour strong { font-size: 1rem; }
.public-tour > div span { color: var(--color-text-muted); font-size: 0.875rem; }
@media (max-width: 560px) {
	.public-tour { padding: var(--space-4); }
	.public-tour .tour-button { width: 100%; justify-content: center; }
}