:root{
	--bg-page:#eef3ff;
	--bg-card:#f8fbff;
	--bg-card-accent:#fff7f2;
	--border-card:#d3e0ff;
	--border-card-accent:#ffcbb1;

	--text-main:#111827;
	--text-muted:#6b7280;

	--accent-blue:#1f4fd9;
	--accent-orange:#f97316;
}

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

body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--text-main);
	background:var(--bg-page);
}

.canvas-page{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
}

.canvas{
	width:100%;
	max-width:1280px;
	display:grid;
	gap:16px;
}

/* Карточки */

.card{
	background:var(--bg-card);
	border:1px solid var(--border-card);
	border-radius:16px;
	padding:16px 18px 18px;
	display:flex;
	flex-direction:column;
	box-shadow:0 1px 3px rgba(15,23,42,.08);
}

.card__header{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin-bottom:8px;
}

.card__icon{
	flex:0 0 auto;
	width:28px;
	height:28px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:15px;
	background:rgba(31,79,217,.08);
	color:var(--accent-blue);
}

.card__title{
	margin:0;
	font-size:16px;
	font-weight:600;
}

.card__subtitle{
	margin:2px 0 0;
	font-size:12px;
	color:var(--text-muted);
}

.card ul{
	margin:8px 0 0;
	padding-left:18px;
	font-size:14px;
	line-height:1.45;
}

/* Оранжевые карточки (метрики, конкурентное преимущество) */

.card--accent-orange{
	background:var(--bg-card-accent);
	border-color:var(--border-card-accent);
}

.card--accent-orange .card__icon{
	background:rgba(249,115,22,.08);
	color:var(--accent-orange);
}

.card--accent-orange .card__title{
	color:var(--accent-orange);
}

/* Раскладка для больших экранов */

@media (min-width:1024px){

	.canvas--bm{
		grid-template-columns:repeat(5,minmax(0,1fr));
		grid-template-areas:
			"partners activities value relationships segments"
			"resources resources . channels segments"
			"cost cost cost revenue revenue";
	}

	.canvas--lean{
		grid-template-columns:repeat(5,minmax(0,1fr));
		grid-template-areas:
			"problem solution unique advantage segments"
			". metrics . channels segments"
			"cost cost cost revenue revenue";
	}

	/* BMC */
	.card--partners{grid-area:partners;}
	.card--activities{grid-area:activities;}
	.card--value{grid-area:value;}
	.card--relationships{grid-area:relationships;}
	.card--segments{grid-area:segments;}
	.card--resources{grid-area:resources;}
	.card--channels{grid-area:channels;}
	.card--cost{grid-area:cost;}
	.card--revenue{grid-area:revenue;}

	/* Lean */
	.card--problem{grid-area:problem;}
	.card--solution{grid-area:solution;}
	.card--unique{grid-area:unique;}
	.card--advantage{grid-area:advantage;}
	.card--metrics{grid-area:metrics;}
}

/* Мобильная версия: всё колонкой */

@media (max-width:1023.98px){
	.canvas{
		display:flex;
		flex-direction:column;
	}
}