:root{
	--bg:#153141;
	--panel:#0d0d0d;
	--muted:#9aa0a6;
	--glass: rgba(255,255,255,0.04);

	--c1: #38E1B4; /* getting started - lime */
	--c2: #E3D0Ba; /* online help - lavender */
	--c3: #EF814D; /* troubleshooting - amber */
	--c4: #C9CEFE; /* support - teal */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
	background:linear-gradient(180deg,#153141 0%,#05121A 100%);
	color:#fff;
	/*-webkit-font-smoothing:antialiased;*/
	/*-moz-osx-font-smoothing:grayscale;*/
	/*padding:40px;*/
}

.wrap{
	max-width:1100px;
	margin:0 auto;
}

.header{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
	margin-bottom:28px;
}

.head-left{
	max-width:70%;
	margin-left: 20px;
}

.page-title{
	font-size:40px;
	margin:0 0 6px 0;
	font-weight:700;
	letter-spacing:-0.5px;
}
.subtitle{
	margin:0;
	color:var(--muted);
	font-weight:400;
}

.head-right{
	align-self:center;
}

/*
.circle-btn{
	width:48px;
	height:48px;
	border-radius:999px;
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	display:inline-flex;
	place-items:center;
	place-content:center;
	color:#fff;
	cursor:pointer;
	transition:transform .18s ease, background .18s ease;
}
.circle-btn:hover{transform:translateY(-3px); background:rgba(255,255,255,0.02)}
*/

.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:20px;
	align-items:stretch;
}


/* responsive tweak for small screens */
@media (max-width:640px){
	.page-title{font-size:28px}
	.header{align-items:center}
	.head-left{max-width:100%}
	.card{min-height:140px}
	.tutorials .cards{ gap:14px; }
	.tutorials .cards .card{
		max-width:100%;
	} /* let cards fill narrow screens */
	.card{ min-height:150px; }
	.card{ padding-top:48px; }
}