/* Loudiary — rhinebird.com/loudiary/
   Minimal product page in the fleet's house style (cream ground, Instrument
   Sans), with Loudiary's own blue as the single accent. Text-forward on
   purpose: there are no product screenshots yet, and the app is not on the
   App Store, so the page exists to say what the app is and to host the
   privacy policy and terms App Store Connect needs. */

:root {
	--color-bg: #f7f5ef;
	--color-surface: #ffffff;
	--color-dark: #131211;
	--color-text: #292421;
	--color-text-secondary: #6b645f;
	--color-on-dark: #f7f5ef;
	--color-on-dark-secondary: #a9a29c;
	--color-accent: #1219e5;
	--color-accent-soft: rgba(18, 25, 229, 0.1);
	--color-border: rgba(41, 36, 33, 0.15);
	--color-border-dark: rgba(247, 245, 239, 0.18);
	--font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

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

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

.page {
	width: min(1080px, calc(100vw - 48px));
	margin: 0 auto;
}

.page--narrow {
	width: min(720px, calc(100vw - 48px));
}

h1,
h2,
h3 {
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	padding: 0.5rem 0.75rem;
	background: var(--color-text);
	color: var(--color-bg);
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	z-index: 10;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

/* Header */

.site-header {
	border-bottom: 1px solid var(--color-border);
	padding: 1rem 0;
	background: var(--color-bg);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.wordmark img {
	width: 30px;
	height: 30px;
	border-radius: 22.4%;
	box-shadow: 0 0 0 1px var(--color-border);
}

.nav {
	display: flex;
	gap: 1.5rem;
	flex: 1;
	justify-content: center;
}

.nav a {
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: 0.95rem;
}

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

/* "Coming soon" marker. Not a link on purpose: Loudiary is not on the App
   Store yet. Swap for real download links on launch day. */

.coming-soon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.05rem;
	border-radius: 999px;
	background: var(--color-text);
	color: var(--color-bg);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	margin: 0;
}

.coming-soon--large {
	padding: 0.85rem 1.6rem;
	font-size: 1rem;
}

.coming-soon--invert {
	background: var(--color-bg);
	color: var(--color-dark);
}

/* Hero */

.hero {
	padding: 5rem 0 4.5rem;
	text-align: center;
}

.hero-icon {
	width: 88px;
	height: 88px;
	border-radius: 22.4%;
	box-shadow:
		0 0 0 1px var(--color-border),
		0 18px 40px -18px rgba(18, 25, 229, 0.45);
	margin: 0 auto 1.75rem;
	display: block;
}

.badge {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--color-accent-soft);
	color: var(--color-accent);
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 1.5rem;
	letter-spacing: 0.01em;
}

.hero h1 {
	font-size: clamp(2.5rem, 7vw, 4rem);
	margin: 0 0 1.25rem;
}

.hero h1 em {
	font-style: normal;
	color: var(--color-accent);
}

.hero-sub {
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	color: var(--color-text-secondary);
	margin: 0 auto 2.25rem;
	max-width: 50ch;
}

.hero-note {
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
	color: var(--color-text-secondary);
}

/* Feature grid: dark band */

.features {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding: 4.5rem 0;
}

.features h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	margin: 0 0 2.5rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.grid article {
	border: 1px solid var(--color-border-dark);
	border-radius: 12px;
	padding: 1.5rem;
}

.grid .label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.6rem;
	color: var(--color-on-dark);
}

.grid p:not(.label) {
	margin: 0;
	color: var(--color-on-dark-secondary);
	font-size: 0.95rem;
}

/* How it works */

.steps {
	padding: 4.5rem 0;
}

.steps h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	margin: 0 0 2.5rem;
	max-width: 24ch;
}

.step-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.25rem 3rem;
}

@media (max-width: 760px) {
	.step-list {
		grid-template-columns: 1fr;
	}
}

.step-list h3 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
	padding-top: 1rem;
	border-top: 2px solid var(--color-accent);
}

.step-list p {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.98rem;
}

/* Plans */

.plans {
	padding: 0 0 4.5rem;
}

.plans h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	margin: 0 0 0.75rem;
}

.plans-intro {
	margin: 0 0 2rem;
	color: var(--color-text-secondary);
	max-width: 60ch;
}

.plan-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.plan-list article {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 1.5rem;
}

.plan-list h3 {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.plan-list .plan-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 0.75rem;
}

.plan-list ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--color-text-secondary);
	font-size: 0.95rem;
}

.plan-list li + li {
	margin-top: 0.35rem;
}

.plans-note {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	max-width: 70ch;
}

/* Privacy block */

.privacy {
	padding: 0 0 4.5rem;
}

.privacy-inner {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 2.5rem;
	text-align: center;
}

.privacy-inner h2 {
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
}

.privacy-inner p {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--color-text-secondary);
	font-size: 0.98rem;
}

.privacy-inner p + p {
	margin-top: 1rem;
}

.privacy-inner a {
	color: var(--color-accent);
}

/* Closing CTA */

.cta {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding: 4.5rem 0;
	text-align: center;
}

.cta h2 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin: 0 0 1.75rem;
}

/* Legal pages */

.legal {
	padding: 3.5rem 0 4rem;
}

.legal h1 {
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	margin: 0 0 0.5rem;
}

.legal h2 {
	font-size: 1.15rem;
	margin: 2.5rem 0 0.75rem;
}

.legal-meta {
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	margin: 0 0 2rem;
}

.legal address {
	font-style: normal;
	color: var(--color-text-secondary);
	font-size: 0.95rem;
	margin: 0 0 2.5rem;
	line-height: 1.7;
}

.legal ul {
	padding-left: 1.15rem;
	margin: 0 0 1rem;
}

.legal li {
	margin-bottom: 0.6rem;
}

.legal p {
	margin: 0 0 1rem;
}

.legal a {
	color: var(--color-accent);
}

.legal hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 3rem 0 1.5rem;
}

.legal-closing {
	color: var(--color-text-secondary);
	font-size: 0.95rem;
}

/* Footer */

footer {
	border-top: 1px solid var(--color-border);
	padding: 2.5rem 0 3rem;
	color: var(--color-text-secondary);
	font-size: 0.9rem;
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: baseline;
}

.footer-links {
	display: flex;
	gap: 0.75rem;
}

footer a {
	color: var(--color-text-secondary);
}

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

@media (max-width: 700px) {
	.nav {
		display: none;
	}

	.hero {
		padding: 3.5rem 0 3rem;
	}

	.privacy-inner {
		padding: 1.75rem;
	}
}