@font-face {
	font-family: "Montserrat";
	src: url("/static/fonts/Montserrat-VariableFont_wght.ttf");
	font-display: swap;
}

:root {
	--primary:        #19143c;
	--primary-soft:   #2c2557;
	--ink:            #1a1a2e;
	--ink-soft:       #4a4a66;
	--ink-mute:       #6c6c85;
	--rule:           #e6e6ee;
	--bg:             #ffffff;
	--bg-soft:        #f7f7fb;
	--bg-band:        #f1f3f9;
	--control:        #0077cc;
	--control-hover:  #005fa3;
	--accent:         #3ca3ac;
	--good:           #38c172;
	--banner-letter-spacing: -0.5px;

	--font: "Montserrat";
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font), system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

p, h1, h2, h3, h4 { margin: 0; padding: 0; }
p { line-height: 1.6; }

img { max-width: 100%; }

.fn1 { font-size: 56px; font-weight: 800; letter-spacing: var(--banner-letter-spacing); line-height: 1.05; }
.fn2 { font-size: 36px; font-weight: 800; letter-spacing: var(--banner-letter-spacing); line-height: 1.15; }
.fn3 { font-size: 22px; font-weight: 700; letter-spacing: var(--banner-letter-spacing); line-height: 1.2; }
.fn4 { font-size: 18px; font-weight: 700; line-height: 1.25; }

@media (max-width: 800px) {
	.fn1 { font-size: 36px; }
	.fn2 { font-size: 26px; }
	.fn3 { font-size: 20px; }
}

/* ---------- buttons ---------- */

.btn {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
	text-decoration: none;
}
.btn_primary {
	background: var(--control);
	color: #fff;
}
.btn_primary:hover {
	background: var(--control-hover);
	color: #fff;
	text-decoration: none;
}
.btn_ghost {
	background: transparent;
	color: var(--primary);
	border-color: rgba(25,20,60,0.18);
}
.btn_ghost:hover {
	background: rgba(25,20,60,0.04);
	color: var(--primary);
	text-decoration: none;
}
.btn_block {
	display: block;
	width: 100%;
	text-align: center;
}

/* ---------- topbar ---------- */

.topbar {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 2rem;
	border-bottom: 1px solid var(--rule);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 10;
}
.brand {
	color: var(--primary);
	font-weight: 800;
	letter-spacing: -0.5px;
	font-size: 22px;
	text-decoration: none;
}
.brand:hover { color: var(--primary); text-decoration: none; }
.topbar_nav {
	display: flex;
	gap: 1.5rem;
	flex: 1;
}
.topbar_nav a {
	color: var(--ink-soft);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.topbar_nav a:hover { color: var(--primary); }
.topbar_signin {
	color: var(--primary);
	font-weight: 700;
	font-size: 14px;
}

@media (max-width: 800px) {
	.topbar { padding: 0.75rem 1rem; gap: 1rem; flex-wrap: wrap; }
	.topbar_nav { order: 3; flex-basis: 100%; gap: 1rem; font-size: 13px; }
	.topbar_signin { margin-left: auto; }
}

/* ---------- hero ---------- */

.hero {
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
	padding: 6rem 2rem 5rem;
	text-align: center;
}
.hero_inner {
	max-width: 820px;
	margin: 0 auto;
}
.hero h1 {
	color: var(--primary);
}
.hero_sub {
	margin-top: 1.5rem;
	font-size: 19px;
	color: var(--ink-soft);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.hero_ctas {
	margin-top: 2.5rem;
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 800px) {
	.hero { padding: 3rem 1rem 3rem; }
	.hero_sub { font-size: 17px; }
}

/* ---------- trust strip ---------- */

.trust {
	background: var(--bg-soft);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 2rem 1.5rem;
}
.trust_inner {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}
.trust_stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--ink-soft);
	font-size: 15px;
}
.trust_stats li {
	display: inline-flex;
	gap: 0.4rem;
	align-items: baseline;
}
.trust_stats strong {
	color: var(--primary);
	font-weight: 800;
	font-size: 17px;
}
.trust_note {
	margin: 0.6rem 0 0;
	color: var(--ink-mute);
	font-size: 13.5px;
	font-style: italic;
}

/* ---------- pillars ---------- */

.pillars {
	max-width: 1100px;
	margin: 0 auto;
	padding: 4rem 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}
.pillar h3 {
	color: var(--primary);
	margin-bottom: 0.75rem;
}
.pillar p {
	color: var(--ink-soft);
	font-size: 15.5px;
}

@media (max-width: 800px) {
	.pillars {
		grid-template-columns: 1fr;
		padding: 2.5rem 1.5rem;
		gap: 2rem;
	}
}

/* ---------- feature intro (laptop side-by-side) ---------- */

.feature_intro {
	background: var(--bg-soft);
	padding: 6rem 2rem;
}
.feature_intro_inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 4rem;
	align-items: center;
}
.feature_intro_text h2 {
	color: var(--primary);
	margin-bottom: 1.25rem;
}
.feature_intro_text p {
	color: var(--ink-soft);
	font-size: 17.5px;
	line-height: 1.65;
	max-width: 30em;
}
.feature_intro_visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
	box-shadow:
		0 24px 48px rgba(25,20,60,0.18),
		0 6px 14px rgba(25,20,60,0.08);
}

@media (max-width: 900px) {
	.feature_intro {
		padding: 3.5rem 1.25rem;
	}
	.feature_intro_inner {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	.feature_intro_text p { font-size: 16.5px; }
}

/* ---------- screenshots grid ---------- */

.screenshots {
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}
.screenshot {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.screenshot h3 {
	color: var(--primary);
	margin-bottom: 0.5rem;
}
.screenshot_text {
	color: var(--ink-soft);
	font-size: 15px;
	margin-bottom: 1rem;
	flex-grow: 1;
}
.screenshot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 6px 24px rgba(25,20,60,0.10), 0 1px 2px rgba(25,20,60,0.06);
}

@media (max-width: 1100px) {
	.screenshots { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; padding: 3rem 1.5rem; }
}
@media (max-width: 700px) {
	.screenshots { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1rem; }
}

/* ---------- bands (change / support) ---------- */

.band {
	padding: 5rem 2rem;
}
.band_inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.band_inner h2 {
	color: var(--primary);
}
.band_inner p {
	margin-top: 1.25rem;
	color: var(--ink-soft);
	font-size: 18px;
}
.band_change { background: var(--bg-band); }
.band_support {
	background: var(--bg);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.band_support_lines span { display: block; }
.band_support_lines span + span { margin-top: 0.4em; }

@media (max-width: 800px) {
	.band { padding: 3rem 1.25rem; }
	.band_inner p { font-size: 16.5px; }
}

/* ---------- testimonials (scattered) ----------
 *
 * Three cards laid out as if dropped on a desk:
 *   1st (Bateman)  -- front and center, largest, slight tilt
 *   2nd (Ashdown)  -- behind to the upper left, more tilt
 *   3rd (Dickman)  -- to the lower right, opposite tilt, small
 *
 * On narrow viewports the section collapses to a normal stacked column
 * with no rotation or overlap.
 */

.testimonials {
	padding: 5rem 2rem 6rem;
	overflow: visible;
}
.testimonials_inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	min-height: 26rem;
}

.quote {
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1rem;
	padding: 2rem 2.25rem 1.75rem;
	box-shadow: 0 8px 28px rgba(25,20,60,0.10), 0 2px 6px rgba(25,20,60,0.06);
	position: absolute;
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease-out;
	margin: 0;
}
.quote:hover {
	z-index: 5;
	box-shadow: 0 16px 40px rgba(25,20,60,0.20), 0 2px 6px rgba(25,20,60,0.08);
}

/* Subtle decorative quote glyph */
.quote::before {
	content: "\201C";
	position: absolute;
	top: 0.5rem;
	left: 1.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 72px;
	line-height: 1;
	color: var(--control);
	opacity: 0.16;
	pointer-events: none;
}

.quote_body {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	font-weight: 500;
	flex-grow: 1;
}
.quote_attr {
	margin-top: 1.25rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--rule);
	font-size: 13.5px;
	color: var(--ink-soft);
}
.quote_name { color: var(--primary); font-weight: 700; }
.quote_meta { color: var(--ink-mute); }

/* 1st: Bateman -- front and center, largest. */
.quote:nth-child(1) {
	width: clamp(380px, 48%, 540px);
	left: 50%;
	top: 4rem;
	transform: translateX(-50%) rotate(-0.6deg);
	z-index: 3;
}
.quote:nth-child(1) .quote_body { font-size: 18px; }

/* 2nd: Ashdown -- upper left, tilted into the page. */
.quote:nth-child(2) {
	width: clamp(280px, 32%, 360px);
	left: 0;
	top: 0;
	transform: rotate(-3deg);
	z-index: 2;
}

/* 3rd: Dickman -- right side, opposite tilt, small. Sits closer to
   Ashdown's height so the three cards form a triangle with Bateman in
   front, not a diagonal stair-step. */
.quote:nth-child(3) {
	width: clamp(240px, 26%, 300px);
	right: 0;
	top: 2rem;
	transform: rotate(2.5deg);
	z-index: 4;
}

/* Hover: keep the offset but un-tilt slightly for readability. */
.quote:nth-child(1):hover { transform: translateX(-50%) rotate(0); }
.quote:nth-child(2):hover { transform: rotate(-1deg); }
.quote:nth-child(3):hover { transform: rotate(0.8deg); }

/* ---- Responsive fallback ---- */

@media (max-width: 1000px) {
	.testimonials { padding: 3rem 1.25rem 3.5rem; }
	.testimonials_inner {
		position: static;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-items: stretch;
	}
	.quote,
	.quote:nth-child(1),
	.quote:nth-child(2),
	.quote:nth-child(3) {
		position: static;
		width: 100%;
		max-width: none;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
	}
	.quote:nth-child(1):hover,
	.quote:nth-child(2):hover,
	.quote:nth-child(3):hover { transform: none; }
	.quote { padding: 1.75rem 1.5rem 1.5rem; }
	.quote_body { font-size: 16.5px !important; }
	.quote::before { font-size: 56px; left: 1rem; top: 0.3rem; }
}

/* ---------- pricing ---------- */

.pricing {
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 2rem 4rem;
	text-align: center;
}
.pricing_title { color: var(--primary); }
.pricing_sub {
	margin-top: 0.75rem;
	color: var(--ink-soft);
	font-size: 16px;
}
.plans {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: left;
}
.plan {
	display: flex;
}
.plan_inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 1px 2px rgba(25,20,60,0.04);
}
.plan_featured .plan_inner {
	border-color: var(--control);
	box-shadow: 0 12px 32px rgba(0,119,204,0.18), 0 1px 2px rgba(25,20,60,0.04);
	transform: translateY(-6px);
}
.plan_top { margin-bottom: 1.5rem; }
.plan_name {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-mute);
	background: var(--bg-band);
	padding: 0.25rem 0.6rem;
	border-radius: 0.4rem;
}
.plan_price {
	margin-top: 1rem;
	font-size: 38px;
	font-weight: 800;
	color: var(--primary);
	letter-spacing: -0.5px;
}
.plan_interval {
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-mute);
}
.plan_monthly {
	margin-top: 0.25rem;
	color: var(--ink-soft);
	font-size: 14px;
}
.plan_savings {
	margin-top: 0.4rem;
	color: var(--good);
	font-size: 13px;
	font-weight: 600;
}
.plan_bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	flex-grow: 1;
}
.plan_bullets li {
	padding: 0.4rem 0 0.4rem 1.5rem;
	color: var(--ink-soft);
	font-size: 15px;
	position: relative;
}
.plan_bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--good);
	font-weight: 700;
}
.plan_bullets li.excluded {
	color: var(--ink-mute);
}
.plan_bullets li.excluded::before {
	content: "✗";
	color: var(--ink-mute);
}

.plan_cta { margin-top: 1.5rem; }

.plan_custom {
	max-width: 760px;
	margin: 2rem auto 0;
}
.plan_custom .plan_inner {
	background: var(--bg-band);
	border-style: dashed;
}
.plan_custom_body {
	color: var(--ink-soft);
	font-size: 16px;
	margin-bottom: 1.5rem;
	flex-grow: 1;
}

@media (max-width: 1000px) {
	.plans { grid-template-columns: 1fr; gap: 1.25rem; }
	.plan_featured .plan_inner { transform: none; }
}

/* ---------- form pages (demo / contact) ---------- */

.form_page {
	background: var(--bg-soft);
	padding: 5rem 1.5rem;
}
.form_page_inner {
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	padding: 3rem 2.5rem;
	border-radius: 1.25rem;
	border: 1px solid var(--rule);
	box-shadow: 0 4px 20px rgba(25,20,60,0.06);
}
.form_page_inner h1 {
	color: var(--primary);
	margin-bottom: 1rem;
}
.form_lede {
	color: var(--ink-soft);
	margin-bottom: 2rem;
}

.form_errors {
	background: #fdecea;
	color: #8b1a1a;
	border: 1px solid #f5c2bd;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.form_errors ul {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.form_row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.form_field {
	display: flex;
	flex-direction: column;
}
.form_field label {
	font-weight: 600;
	color: var(--ink);
	font-size: 14px;
	margin-bottom: 0.4rem;
}
.form_field input,
.form_field textarea {
	font-family: inherit;
	font-size: 15px;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--ink);
	transition: border-color 120ms, box-shadow 120ms;
}
.form_field input:focus,
.form_field textarea:focus {
	outline: none;
	border-color: var(--control);
	box-shadow: 0 0 0 3px rgba(0,119,204,0.15);
}
.form_optional {
	color: var(--ink-mute);
	font-weight: 400;
}
.form_radios {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 15px;
	color: var(--ink-soft);
}
.form_radios label {
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	cursor: pointer;
}
.form_radios input[type=radio] {
	margin: 0;
}
.form_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form_submit {
	margin-top: 0.5rem;
}

@media (max-width: 600px) {
	.form_page { padding: 2rem 1rem; }
	.form_page_inner { padding: 2rem 1.5rem; }
	.form_row { grid-template-columns: 1fr; }
}

/* ---------- prose pages (privacy, etc.) ---------- */

.prose_page {
	background: var(--bg-soft);
	padding: 4rem 1.5rem;
}
.prose {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	padding: 3rem 2.5rem 3.5rem;
	border-radius: 1.25rem;
	border: 1px solid var(--rule);
	box-shadow: 0 4px 20px rgba(25,20,60,0.06);
}
.prose h1 {
	color: var(--primary);
	margin-bottom: 1rem;
}
.prose h2 {
	color: var(--primary);
	margin: 2.25rem 0 0.75rem;
}
.prose p {
	margin: 0 0 1rem;
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.65;
}
.prose ul {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	color: var(--ink-soft);
	line-height: 1.6;
}
.prose ul li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; }

.prose_lede {
	font-size: 17px !important;
	color: var(--ink) !important;
	margin-bottom: 2rem !important;
}
.prose_meta {
	margin-top: 2.5rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	color: var(--ink-mute) !important;
	font-size: 14px !important;
}

.callout {
	background: #eef5fc;
	border-left: 4px solid var(--control);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2rem;
}
.callout p {
	margin: 0;
	color: var(--ink);
}

@media (max-width: 700px) {
	.prose_page { padding: 2rem 1rem; }
	.prose { padding: 2rem 1.5rem; }
}

/* ---------- trailer / footer ---------- */

.trailer {
	background: var(--primary);
	color: rgba(255,255,255,0.78);
	padding: 4rem 2rem 2rem;
	margin-top: 4rem;
}
.trailer_grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}
.trailer_col a {
	display: block;
	color: rgba(255,255,255,0.78);
	padding: 0.35rem 0;
	font-size: 14px;
	text-decoration: none;
}
.trailer_col a:hover { color: #fff; text-decoration: underline; }
.trailer_brandmark {
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.5px;
}
.trailer_tagline {
	margin-top: 0.5rem;
	color: rgba(255,255,255,0.6);
	font-size: 14px;
}
.trailer_header {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.trailer_legal {
	max-width: 1100px;
	margin: 3rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.55);
	font-size: 13px;
}
.trailer_legal a { color: rgba(255,255,255,0.78); }
.trailer_legal a:hover { color: #fff; }

@media (max-width: 800px) {
	.trailer_grid { grid-template-columns: 1fr; gap: 2rem; }
	.trailer { padding: 3rem 1.25rem 1.5rem; }
}