/* ReadSharp public website. Self-hosted only: no third-party scripts, fonts, or embeds. */
:root {
	color-scheme: light dark;
	--bg: #f7f6f3;
	--surface: #ffffff;
	--text: #1d232b;
	--muted: #5b6470;
	--border: #dcd9d3;
	--accent: #4b48e0;
	--accent-text: #ffffff;
	--focus: #e63946;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1d232b;
		--surface: #252c35;
		--text: #f5f2ee;
		--muted: #a9b1bc;
		--border: #38414d;
		--accent: #8f8cff;
		--accent-text: #10131a;
		--focus: #ff6b75;
	}
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
	overflow-wrap: break-word;
}
a {
	color: var(--accent);
}
a:focus-visible,
summary:focus-visible,
video:focus-visible,
/* Tab lands on the video's built-in controls, inside its shadow tree. */
video:focus-within,
.button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
.skip {
	position: absolute;
	left: -9999px;
}
.skip:focus {
	left: 16px;
	top: 16px;
	z-index: 1;
	background: var(--surface);
	padding: 8px 12px;
}
.site-header,
main,
.site-footer {
	width: min(100% - 32px, 1040px);
	margin: 0 auto;
}
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
}
.site-header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.site-header nav a {
	color: var(--text);
	text-decoration: none;
}
.site-header nav a:hover {
	text-decoration: underline;
}
section,
.legal {
	padding: 32px 0;
	border-top: 1px solid var(--border);
}
h1 {
	font-size: clamp(30px, 6vw, 46px);
	line-height: 1.15;
	margin: 0 0 16px;
	letter-spacing: -0.5px;
}
h2 {
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 12px;
}
h3 {
	font-size: 18px;
	line-height: 1.3;
	margin: 20px 0 6px;
}
.legal h2 {
	font-size: 18px;
	margin-top: 24px;
}
.legal,
#how > p,
#pricing > p,
.faq,
#support p {
	max-width: 720px;
}
.lead {
	font-size: 19px;
	color: var(--muted);
	max-width: 640px;
}
.note,
.meta {
	color: var(--muted);
	font-size: 14px;
}

/* Hero: promise and downloads beside the demo video on wide screens. */
.hero {
	display: grid;
	gap: 32px;
	border-top: 0;
	padding: 40px 0;
}
@media (min-width: 900px) {
	.hero {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
		padding-top: 56px;
	}
}
/* The coming-soon page has no video beside the copy. */
.hero.solo {
	grid-template-columns: minmax(0, 1fr);
}
.get h2 {
	margin-top: 24px;
	font-size: 18px;
}
.downloads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.download {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}
.download h3 {
	margin: 0 0 4px;
	font-size: 17px;
}
.download p {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 14px;
}
.download .file {
	margin: 10px 0 0;
	font-size: 12px;
	overflow-wrap: anywhere;
}
.button {
	display: inline-block;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--accent-text);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}
.button[aria-disabled="true"] {
	background: var(--border);
	color: var(--text);
	cursor: not-allowed;
}
.price-line {
	margin: 16px 0 4px;
	font-size: 17px;
}

/* Demo video, its placeholder, and the transcript. */
.demo {
	margin: 0;
}
.demo video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: #10131a;
}
.demo figcaption {
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
}
.video-placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: 24px;
	border: 2px dashed var(--border);
	border-radius: 12px;
	background: var(--surface);
	text-align: center;
}
.video-placeholder p {
	margin: 4px 0;
	color: var(--muted);
}
.video-placeholder .video-placeholder-title {
	color: var(--text);
	font-size: 22px;
	font-weight: 650;
}
details {
	margin-top: 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
}
summary {
	padding: 10px 14px;
	font-weight: 600;
	cursor: pointer;
}
details > :not(summary) {
	margin-left: 14px;
	margin-right: 14px;
}
details > :last-child {
	margin-bottom: 14px;
}

/* Try-it reader. The plain-text copies serve readers without JavaScript and
   disappear with the notice once the reader starts, so nothing is read twice. */
.try-it-notice {
	margin: 0 0 4px;
	color: var(--muted);
}
.try-it-notice[hidden] ~ .try-it-plain {
	display: none;
}
.try-it-plain h3 {
	font-size: 17px;
}
.try-it-plain h4 {
	margin: 14px 0 4px;
	font-size: 15px;
}

/* How it works, pricing, install, questions. */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.steps li {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	counter-increment: step;
}
.steps h3 {
	margin-top: 0;
}
.steps h3::before {
	content: counter(step) ". ";
	color: var(--muted);
}
.steps p {
	margin: 0;
}
.plans {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.plan {
	flex: 1 1 180px;
	max-width: 260px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}
.plan h3 {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}
.plan .amount {
	margin: 4px 0 0;
	font-size: 28px;
	font-weight: 700;
}
.plan .amount span {
	font-size: 16px;
	font-weight: 400;
	color: var(--muted);
}
.facts {
	max-width: 720px;
	padding-left: 20px;
}
.facts li {
	margin: 6px 0;
}
.install {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 32px;
}
.install h3 {
	margin-top: 8px;
}
ol {
	padding-left: 22px;
}
.faq h3 {
	font-size: 17px;
}
.faq p {
	margin: 0 0 8px;
	color: var(--muted);
}
kbd,
code {
	font: 0.9em ui-monospace, "Cascadia Mono", Consolas, monospace;
	padding: 1px 6px;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: var(--surface);
	overflow-wrap: anywhere;
}
.placeholder {
	padding: 2px 4px;
	background: #fff3b0;
	color: #3a2e00;
}
.site-footer {
	padding: 24px 0 40px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 14px;
}
.site-footer p {
	margin: 4px 0;
}
.preview-notice {
	margin: 8px 0 24px;
	padding: 16px;
	border: 1px solid #7269d6;
	border-radius: 8px;
	background: #2e2c46;
	color: #edeafa;
}