: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 */
}

/* Card base */
.card{
	position:relative;
	min-height:160px;
	border-radius:16px;
	padding:20px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	box-shadow: 0 6px 18px #153141;
	overflow:hidden;
	cursor:pointer;
	transition:transform .18s ease, box-shadow .18s ease;
	/* make room for the top icon so it never overlaps the header/subtext */
	padding-top:0px;
	overflow:visible; /* allow icon to be fully visible above card surface */
}

/* small decorative icon at top-left */
.card-icon{
	position:absolute;
	left:18px;
	top:14px;
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	/* raise icon above the card background and any pseudo elements */
	z-index:6;	
}

.card .card-body h3{
	margin:0;
	font-size:18px;
	font-weight:600;
	color:#0b0b0b;
    text-decoration: none;
    
}

/* individual colors and subtle inner shadow */
.c1{
	background:linear-gradient(180deg,var(--c1), color-mix(in srgb, var(--c1) 75%, black 10%));
}
.c2{
	background:linear-gradient(180deg,var(--c2), color-mix(in srgb, var(--c2) 75%, black 10%));
}
.c3{
	background:linear-gradient(180deg,var(--c3), color-mix(in srgb, var(--c3) 75%, black 10%));
}
.c4{
	background:linear-gradient(180deg,var(--c4), color-mix(in srgb, var(--c4) 75%, black 10%));
}

/* darker rounded inset near top-left to match sample */
.card::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
	border-radius:16px;
	box-shadow:inset 0 -40px 60px rgba(0,0,0,0.12);
	/* ensure the decorative inset stays behind content and icon */
	z-index:1;
}

/* hover lift */
.card:hover{
	transform:translateY(-8px);
	box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}

/* tutorials specific styles */
.tutorials .cards{
	/* force a single column layout for the tutorials page */
	grid-template-columns: 1fr;
	gap:18px;
	justify-items:center; /* center card elements in the grid */
	padding-bottom: 50px;
}

/* make each card a consistent width (responsive) */
.tutorials .cards .card{
	width:100%;
	max-width:900px; /* adjust this value to control card width relative to page */
	/* override any global min-height and enforce fixed height */
	min-height: unset;
	
}

/* small decorative icon at top-left */
.tutorials .card-icon{
	left:10px;
	top:10px;
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	/* raise icon above the card background and any pseudo elements */
	z-index:6;	
}

/* card text split: larger header and smaller subtext */
.card .card-body {
	padding-bottom:18px;
	margin-top:auto;
	position:relative;
	z-index:4;
}
.card .card-body .card-title{
	margin:0;
	font-size:18px;
	font-weight:700;
	color:#0b0b0b;
}
.card .card-body .card-sub{
	margin:6px 0 0 0;
	font-size:13px;
	font-weight:500;
	color: rgba(11,11,11,0.72);
	line-height:1.3;
}

/* keep card links usable but do not change the h3 color */
.card-link,
.card-link:link,
.card-link:visited {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* ensure the header in the card stays dark (override link color) */
.card-link .card-body h3,
.card .card-body h3 {
	color: #0b0b0b !important;
	text-decoration: none;
}

/* slightly taller cards to accommodate multi-line subtext */
.card{ min-height:180px; }

/* responsive tweak for small screens */
@media (max-width:600px){
	.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; }
}

/* Style for tutorial steps list */
.tutorial-steps {
    margin-top: 12px;
    padding-left: 20px;
    list-style-type: disc;
    font-size: 14px;
    color: var(--panel);
}

.tutorial-steps li {
    margin-bottom: 6px;
}

.tutorial-steps a {
    color: var(--panel);
    text-decoration: underline;
    transition: color 0.2s;
}

.tutorial-steps a:hover {
    color: var(--c1);
}