/* ===== Tokens ===== */
:root {
	--knm-slate: #3f4a54;
	--knm-slate-700: #2f3841;
	--bg: #f9f9f9;
	--text: #111;
	--rad: 16px;

	/* example — replace these with the real KNM colors */
	--knm-primary: #1a2a3b;
	--knm-accent: #4fc1e9;

	/* KNM-ish gradient for accents/links */
	--grad: linear-gradient(90deg, var(--knm-primary) 0%, var(--knm-accent) 100%);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	display: block;
}
body {
	font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.7;
}

/* ===== Layout ===== */
.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 20px;
}
.center {
	text-align: center;
}
.lead {
	color: #4b5563;
}

/* ===== Header ===== */
.site-header {
	padding: 28px 20px;
	text-align: center;
}
.site-header .brand {
	width: 140px;
	margin: 0 auto 10px;
}
.site-header h1 {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1.2;
}
.site-header .accent {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.site-header .subhead {
	margin-top: 8px;
	color: #6b7280;
}
.cta-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 18px 0 6px;
}

/* ===== Buttons ===== */
.btn {
	--py: 12px;
	--px: 18px;
	display: inline-block;
	padding: var(--py) var(--px);
	background: var(--knm-slate);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(63, 74, 84, 0.18);
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(63, 74, 84, 0.24);
}
.btn.ghost {
	background: #fff;
	color: var(--knm-slate);
	border: 1px solid #e5e7eb;
}
.btn.small {
	--py: 9px;
	--px: 14px;
	font-size: 0.95rem;
}

/* =====MARK:  Step strip (one-line style cards) ===== */
.steps-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 8px 0 22px;
}
.step-pill {
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #edf1f5;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
	text-align: center;
	color: #374151;
}
.step-pill b {
	color: #111;
	margin-right: 6px;
}
@media (min-width: 780px) {
	.steps-strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== STEPS GALLERY ===== */
.steps-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 1.5rem;
	margin: 2rem 0;
	text-align: center;
}

.step {
	flex: 1 1 280px;
	max-width: 280px;
	background: #fff;
	border: 1px solid #edf1f5;
	border-radius: 16px;
	padding: 16px 14px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.step img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-bottom: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.step p {
	font-size: 0.98rem;
	color: #374151;
	line-height: 1.45;
}

/* === FADE-IN ANIMATION === */
.fade-step {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1.1s ease forwards;
}

.fade-step.delay1 {
	animation-delay: 0.4s;
}
.fade-step.delay2 {
	animation-delay: 0.8s;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* ===== Force steps in one line on desktop ===== */
@media (min-width: 992px) {
	.steps-gallery {
		gap: 1rem; /* slightly tighter gap so 3 fit */
		flex-wrap: nowrap; /* keep them on one line */
		justify-content: center;
	}
	.steps-gallery .step {
		flex: 0 0 270px; /* narrower than 280 so 3 fit */
		max-width: 270px;
	}
}

/* ===== MARK:  Media blocks ===== */
h2 {
	font-family: "Playfair Display", serif;
	font-size: 1.85rem;
	margin: 14px 0;
}
.media {
	margin: 14px 0;
}
.media img {
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.media figcaption {
	font-size: 0.92rem;
	color: #6b7280;
	margin-top: 6px;
}

/* Mobile hero smaller */
#mobile-hero .media.phone img {
	width: clamp(220px, 55vw, 380px);
	margin-inline: auto;
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ===== Centered card gallery ===== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 14px;
	justify-items: center;
	margin-top: 8px;
}
@media (min-width: 900px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(240px, 1fr));
	}
}
.card {
	position: relative;
	padding: 0;
	cursor: zoom-in;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	width: min(340px, 100%);
	transition: transform 0.18s, box-shadow 0.18s;
}
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.card .tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: #111;
	color: #fff;
	opacity: 0.92;
}

/* Lightbox */
.lightbox {
	width: min(980px, 96vw);
	padding: 0;
	border: none;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.lightbox::backdrop {
	backdrop-filter: blur(3px);
	background: rgba(0, 0, 0, 0.6);
}
.lb-close {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 2rem;
	line-height: 1;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0.1rem 0.6rem 0.35rem;
	cursor: pointer;
}
.lightbox img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== MARK: SEO / Lighthouse refined ===== */
.accent-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.seo-fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 2rem auto;
	text-align: center;
	max-width: 720px;
}
.seo-fig img {
	display: block;
	width: clamp(320px, 75%, 720px);
	height: auto;
	margin: 0 auto 0.6rem;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.seo-fig figcaption {
	font-size: 0.96rem;
	color: #4b5563;
	line-height: 1.6;
	max-width: 640px;
}

/* ===== MARK: Videos (two phone frames) ===== */
.intro {
	margin-top: 6px;
	color: #6b7280;
}
.video-grid {
	display: grid;
	gap: 18px;
	margin-top: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 840px) {
	.video-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.phone-frame {
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
	border: 12px solid #1b1b1b;
	border-radius: 38px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
	background: #000;
	overflow: hidden;
	text-align: center;
}
.phone-frame video {
	display: block;
	width: 100%;
	height: auto;
}
.phone-frame figcaption {
	font-size: 0.92rem;
	color: #6b7280;
	margin-top: 8px;
}

/* ===== Footer (gradient link like header) ===== */
.footer {
	margin-top: 26px;
	padding: 26px 0;
	text-align: center;
	border-top: 1px solid #eef2f7;
	color: #768296;
}
.footer img {
	width: 120px;
	margin: 0 auto 6px;
}
.footer .dashdev-link {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	text-decoration: none;
}
.footer .dashdev-link:hover {
	opacity: 0.85;
}

/* ===== Small header tweak ===== */
@media (max-width: 520px) {
	.site-header h1 {
		font-size: 1.9rem;
	}
}
/* ===== Single Video Center Fix ===== */
.video-center {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
	width: 100%;
}

.video-center .phone-frame {
	max-width: 420px;
	width: 100%;
	justify-self: center;
	align-self: center;
}
/* ===== Gradient titles for key sections ===== */
#videos h2,
section h2:has(+ .seo-fig),
section h2:has(+ .seo-left) {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* ===== All H2 Gradient Titles ===== */
h2 {
	font-family: "Playfair Display", serif;
	font-size: 1.85rem;
	margin: 14px 0;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}