/* ── credits.html — page-specific styles ─────────────────────────────
   Herbruikt de tokens/basisklassen uit landing.css (:root, .wrap, .btn,
   .btn-primary, .btn-ghost, .eyebrow, .alt, .section-head) — hier alleen
   wat credits.html zelf nodig heeft en landing.css niet al levert. */

.credits-hero{
	padding:72px 0 40px;
	text-align:center;
}

.credits-hero h1{
	font-size:2.4rem;
	margin-top:10px;
	color:var(--cream);
}

.credits-intro{
	max-width:520px;
	margin:18px auto 0;
	opacity:0.85;
}

#credits{
	padding:24px 0 72px;
}

.credit-groups{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px 48px;
	max-width:720px;
}

@media (max-width:640px){
	.credit-groups{
		grid-template-columns:1fr;
	}
}

.credit-group h3{
	color:var(--ochre);
	font-size:1.1rem;
	margin-bottom:10px;
}

.credit-group p{
	margin:0;
}

.credit-group ul{
	list-style:none;
	margin:0;
	padding:0;
}

.credit-group li{
	margin-bottom:4px;
}

.credit-group--special{
	grid-column:1 / -1;
	padding-top:24px;
	border-top:1px solid var(--border);
}

.credit-group--special p{
	font-style:italic;
}

.credit-tracks{
	list-style:none;
	margin:0 0 12px;
	padding:0;
}

.credit-tracks li{
	margin-bottom:4px;
}

.track-title{
	font-style:italic;
}

.track-level{
	opacity:0.65;
	font-size:0.9em;
}

.credit-license{
	font-size:0.85em;
	opacity:0.65;
	margin:0;
}