/* Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Colors */
:root {
	--text: #000;
	--muted: #4b4b4b;
	--link: #0066cc;
	--border: #ddd;
	--primary: #0043ce;
	--primary-hover: #0036a8;
	--color-border: #000;

	--content-width: 1280px;

	/* Type grows with the window rather than jumping at breakpoints:
	   body text runs from 16px on a phone to 18px from about 900px wide,
	   and each heading size has its own range, larger sizes stretching
	   further. */
	--font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
	--text-display: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
	--text-h1: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
	--text-h2: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
	--text-h3: clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
	--text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--text-sm: 0.875rem;
	--measure: 68ch;

	--spacing-xs: 0.2rem;
	--spacing-sm: 0.4rem;
	--spacing-md: 0.8rem;
	--spacing-lg: 1rem;
	--spacing-xl: 1.5rem;
	--spacing-xxl: 2rem;

	--border-radius: 2px;
}

/* Typography */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-kerning: normal;
	font-optical-sizing: auto;
	font-variant-ligatures: common-ligatures contextual;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: system-ui, sans-serif;
	font-size: var(--font-size);
	line-height: 1.6;
	color: var(--text);
	background: #fff;
}

/* The bigger a heading, the tighter its lines and letters: large type at
   its default spacing looks loose. Balanced wrapping keeps a heading's
   last line from holding a single word. */
h1, h2, h3 {
	font-weight: bold;
	color: var(--text);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 1rem 0;
}

h2 {
	font-size: var(--text-h2);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 1rem 0;
}

h3 {
	font-size: var(--text-h3);
	line-height: 1.3;
	letter-spacing: -0.012em;
	margin: 0.8rem 0;
}

/* Pretty wrapping avoids a lone word on a paragraph's last line. */
p {
	margin: 1rem 0;
	color: var(--text);
	text-wrap: pretty;
}

/* Links: the underline sits clear of descenders and is lighter than the
   text until hovered, as on the storefront. */
a {
	color: var(--link);
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 40%,
		transparent);
}

a:hover {
	text-decoration-color: currentColor;
}

/* One phrase that matters most on a page, highlighted as if by a pen.
   Use it once per page at most, or it stops standing out. A highlight
   that wraps keeps its ends rounded on each line. The margin cancels the
   padding, so the highlight bleeds past the words rather than shifting
   them off the line's edge. */
mark {
	background: #fff1a6;
	color: inherit;
	border-radius: 0.2em;
	padding: 0.05em 0.2em;
	margin-inline: -0.2em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Lists */
ul, ol {
	padding-left: 1.5rem;
	margin: 1rem 0;
}

li {
	margin-bottom: 0.3rem;
	color: var(--text);
	text-wrap: pretty;
}

li::marker {
	color: var(--muted);
}

ol > li::marker {
	font-variant-numeric: tabular-nums;
}

/* Buttons - Brutally simple */
button, .btn-primary, .btn-secondary, .btn-nav {
	display: inline-block;
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--primary);
	color: white;
	border: 1px solid var(--primary);
	cursor: pointer;
	font-size: var(--font-size);
	text-align: center;
	text-decoration: none;
}

.btn-secondary {
	background: white;
	color: var(--text);
}

button:hover, .btn-primary:hover {
	background: var(--primary-hover);
	text-decoration: none;
}

.btn-secondary:hover {
	background: #f8f8f8;
	text-decoration: none;
}

/* Forms */
input, textarea, select {
	font-size: var(--font-size);
	padding: var(--spacing-md);
	border: 1px solid var(--border);
	font-family: inherit;
}

/* Tables */
table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0;
}

th, td {
	border: 1px solid var(--border);
	padding: 8px;
	text-align: left;
}

th {
	background: #f8f8f8;
	font-weight: bold;
}
/* Page structure */
body {
	margin: 0;
	padding: 0;
}

page-content {
	display: block;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 20px 20px 20px;
}

main {
	margin: 40px 0;
}

section {
	margin: 40px 0;
}

/* Running text stops at a comfortable line length, which on a wide window
   would otherwise reach 150 characters. Tables and code keep the full
   width. */
main > section :is(p, li, blockquote) {
	max-width: var(--measure);
}
/* Alpha banner - full width with centered content */
alpha-banner {
	display: block;
	background: #fef3c7;
	border-bottom: 1px solid #f59e0b;
	text-align: center;
	font-size: 0.95rem;
	color: #92400e;

	banner-content {
		display: block;
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 10px 20px;
	}

	strong {
		color: #78350f;
	}
}


/* Header and navigation */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
}

header h1 {
	font-size: 1.5rem;
	margin: 0;
}

header h1 a {
	color: var(--text);
	font-weight: bold;
	text-decoration: none;
}

header h1 a:hover {
	text-decoration: none;
}

nav {
	display: flex;
	gap: 20px;
	align-items: center;
}

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

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

nav .btn-nav {
	padding: 6px 12px;
	background: var(--text);
	color: white !important;
	border: 1px solid var(--text);
	font-weight: normal;
}

nav .btn-nav:hover {
	background: #333;
	color: white !important;
	text-decoration: none;
}
/* Hero */
hero- {
	display: block;
	text-align: center;
	padding: 64px 24px 56px;
	background: #edf5ff;
	border: 1px solid #d6e6ff;
	border-radius: 12px;
	margin: 24px 0 40px;
}

hero- h1 {
	font-size: var(--text-display);
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin-bottom: 12px;
}

hero-subtitle {
	display: block;
	max-width: 46ch;
	margin-inline: auto;
	font-size: var(--text-lead);
	line-height: 1.5;
	text-wrap: balance;
	color: var(--muted);
	margin-bottom: 30px;
}

hero-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-bottom: 20px;
}

hero-note {
	display: block;
	font-size: var(--text-sm);
	color: #5b6b8c;

	span {
		display: block;
	}

	span + span {
		margin-top: 4px;
	}
}

/* Features - No boxes, just content */
features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 40px;
	margin: 2rem 0;
}

feature- {
	display: block;
}

feature- h2 {
	font-size: var(--text-h3);
	letter-spacing: -0.012em;
	margin: 0 0 6px;
}

feature- p {
	color: var(--muted);
	margin: 0;
}

/* Founder callout */
founder-note {
	display: block;
	text-align: center;
	background: #edf5ff;
	border: 1px solid #d6e6ff;
	border-radius: 12px;
	padding: 48px 40px;
	margin: 60px 0;
}

founder-note h2 {
	font-size: var(--text-h1);
	letter-spacing: -0.025em;
	margin: 0 0 12px;
}

founder-note p {
	max-width: 60ch;
	margin: 0 auto 12px;
	color: var(--muted);
}

founder-note p:last-child {
	margin-bottom: 0;
}

/* Screenshot showcase: the dashboard and the storefront side by side, each
   picture above its copy, so the two line up. */
screenshot-showcase {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin: 80px 0 60px;
}

screenshot-card {
	display: block;

	h2 {
		margin: 24px 0 12px;
	}

	p {
		color: var(--muted);
	}
}

screenshot-frame {
	display: block;
	background: #f8f8f8;
	border: 1px solid var(--border);
	padding: 10px;
	margin: 0;

	a {
		display: block;
	}

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

/* Trial call to action: closes the page in the same panel as the hero, so
   the page begins and ends with the same invitation. */
trial-cta {
	display: block;
	text-align: center;
	background: #edf5ff;
	border: 1px solid #d6e6ff;
	border-radius: 12px;
	padding: 48px 40px;
	margin: 60px 0 40px;

	h2 {
		font-size: var(--text-h1);
		letter-spacing: -0.025em;
		margin: 0 0 12px;
	}

	p {
		max-width: 60ch;
		margin: 0 auto 24px;
		color: var(--muted);
	}

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

	.btn-primary {
		margin-right: 8px;
	}
}

/* FAQ */
faq- {
	display: block;
	margin: 40px 0;
}

faq-list {
	display: block;
}

faq-item {
	display: block;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--border);
}

faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

faq-item h3 {
	margin-bottom: 10px;
}

faq-item p {
	color: var(--muted);
	margin: 0;
}

/* Pricing */
pricing-section {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 3rem 0;
}

/* Each card spans the section's rows through subgrid, so titles, prices,
   sales limits, feature lists, and buttons line up across cards however
   long the text in any one of them runs. */
pricing-card {
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding: 1.25rem;
	border: 2px solid var(--color-border);
	border-radius: var(--border-radius);
	background: white;
}

pricing-title {
	display: block;
	font-size: var(--text-h3);
	font-weight: bold;
}

pricing-summary {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--text-sm);
	color: var(--muted);
}

pricing-cost {
	display: block;
	margin: 1.25rem 0 1rem;
	white-space: nowrap;
}

/* Four cards share the width, so the amount stays smaller than the page's
   display size to keep "/month" on its line. */
pricing-amount {
	font-size: clamp(1.75rem, 1.25rem + 1.25vw, 2.5rem);
	font-weight: bold;
	letter-spacing: -0.035em;
	font-variant-numeric: lining-nums tabular-nums;
}

pricing-period {
	color: var(--muted);
}

/* The sales limit is what most separates one plan from the next, so it gets
   a band of its own between the price and the rest. */
pricing-limit {
	display: block;
	padding: var(--spacing-md) 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	font-weight: bold;
}

pricing-features {
	display: block;
	margin: 1rem 0 1.5rem;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		position: relative;
		padding-left: 1.25rem;
		margin-bottom: var(--spacing-sm);
	}

	li::before {
		content: "✓";
		position: absolute;
		left: 0;
		color: var(--primary);
		font-weight: bold;
	}
}

pricing-cta {
	display: block;
	align-self: end;

	.btn-primary {
		display: block;
	}
}

pricing-included {
	display: block;
	margin: 3rem 0;

	ul {
		columns: 2;
		column-gap: 3rem;
		padding-left: 1.25rem;
	}

	li {
		break-inside: avoid;
		margin-bottom: var(--spacing-sm);
	}
}

pricing-note {
	display: block;
	text-align: center;
	background: #f8f9fa;
	padding: 2rem;
	margin: 2rem -20px;
}

/* About page elements */
founder-profile {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	margin: 2rem 0;
}

founder-image {
	display: block;
	flex-shrink: 0;
	width: 300px;
}

founder-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

founder-story {
	display: block;
	flex: 1;
}

personal-guarantee {
	display: block;
	background: #fff3cd;
	padding: 2rem;
	border-radius: 8px;
	margin: 2rem 0;
}

personal-guarantee p {
	margin-bottom: 1rem;
}

personal-guarantee p:last-child {
	margin-bottom: 0;
}

/* Code blocks */
code {
	background: #f5f5f5;
	padding: 2px 4px;
	border-radius: 3px;
	font-family: ui-monospace, 
		Menlo,
		Monaco, 
		"Cascadia Mono",
		"Segoe UI Mono", 
		"Roboto Mono", 
		"Oxygen Mono", 
		"Ubuntu Mono", 
		"Source Code Pro",
		"Fira Mono", 
		"Droid Sans Mono", 
		"Consolas",
		"Courier New",
		monospace;
	font-size: 0.9em;
	font-variant-ligatures: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

pre {
	background: #f5f5f5;
	padding: 12px;
	border-radius: 6px;
	overflow-x: auto;
	margin: 1rem 0;
}

pre code {
	background: none;
	padding: 0;
}

/* Blockquotes */
blockquote {
	background: #fff3cd;
	border-left: 4px solid #ffc107;
	padding: 1rem;
	margin: 1.5rem 0;
	border-radius: 4px;
}

blockquote p {
	margin: 0;
	font-weight: 500;
}

/* Legal pages in other languages say the English version applies */
translation-notice {
	display: block;
	background: #f8f9fa;
	border-left: 3px solid var(--border);
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-lg) 0;
}

translation-notice p {
	margin: 0;
}
/* Footer */
footer {
	margin-top: 80px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}

footer-main {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-bottom: 40px;
}

footer-section {
	display: block;
}

footer-section h2 {
	font-size: var(--font-size);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: var(--spacing-md);
	color: var(--text);
	font-weight: bold;
}

footer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer-section li {
	margin-bottom: var(--spacing-md);
}

footer-section a {
	color: var(--muted);
	font-size: var(--font-size);
	text-decoration: none;
}

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

footer-bottom {
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--border);
	text-align: center;
	color: var(--muted);
	font-size: var(--font-size);
}

footer-bottom p {
	margin: var(--spacing-xs) 0;
}

/* Every language the site is in, linking to this page in each */
footer-bottom nav {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-xs) var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

footer-bottom nav [aria-current] {
	color: var(--text);
	font-weight: bold;
}
/* Mobile-first responsive design */

@media (max-width: 1000px) {
	/* Features drop to two columns before stacking on mobile */
	features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	pricing-section {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	/* Layout */
	page-content {
		padding: 15px;
	}
	
	section {
		margin: 30px 0;
	}
	
	/* Navigation */
	header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		padding: 15px 0;
	}
	
	nav {
		flex-wrap: wrap;
		gap: 15px;
	}
	
	/* Hero */
	hero- {
		padding: 44px 20px 40px;
		border-radius: 10px;
		margin: 8px 0 30px;
	}

	hero-buttons {
		flex-direction: column;
		align-items: center;
	}
	
	hero-buttons a {
		width: 100%;
		max-width: 250px;
		text-align: center;
		padding: 12px 24px;
	}
	
	/* Features */
	features-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		margin: 2rem 0;
	}
	
	/* Founder callout */
	founder-note {
		padding: 32px 20px;
	}

	pricing-section {
		grid-template-columns: 1fr;
	}

	pricing-included ul {
		columns: 1;
	}

	/* Screenshot showcase */
	screenshot-showcase {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	trial-cta {
		padding: 40px 20px;

		.btn-primary {
			display: block;
			max-width: 250px;
			margin: 0 auto 12px;
		}
	}
	
	/* About page mobile */
	founder-profile {
		flex-direction: column;
		text-align: center;
	}
	
	founder-image {
		width: 250px;
		margin: 0 auto;
	}
	
	/* Footer */
	footer-main {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 480px) {
	/* Even smaller screens */
	page-content {
		padding: 10px;
	}
	
	hero-buttons a {
		padding: 10px 20px;
		font-size: 14px;
	}
	
	nav {
		gap: 10px;
	}
	
	nav a {
		font-size: 14px;
	}
	
	.btn-nav {
		padding: 4px 8px !important;
		font-size: 14px !important;
	}
}