:root{
	--legal-max: 860px;
}

.legal-hero{
	padding-top: 36px;
}

.legal-hero-card{
	padding: 18px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.legal-title{
	margin: 0 0 6px;
	font-size: 1.8rem;
	letter-spacing: -0.03em;
}

.legal-subtitle{
	margin: 0;
	color: rgba(255,255,255,0.72);
	line-height: 1.6;
}

.legal-meta{
	display: grid;
	gap: 10px;
	min-width: 220px;
}

.legal-meta-item{
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
	padding: 10px 12px;
}

.legal-meta-label{
	color: rgba(255,255,255,0.55);
	font-weight: 800;
	font-size: 0.82rem;
}
.legal-meta-value{
	color: rgba(255,255,255,0.92);
	font-weight: 900;
	letter-spacing: -0.02em;
}

.legal-wrap{
	width: min(var(--legal-max), 100%);
	margin: 0 auto;
}

.legal-intro{
	padding: 16px 18px;
	color: rgba(255,255,255,0.72);
	line-height: 1.7;
}

.legal-grid{
	display: grid;
	gap: 10px;
}

.legal-item{
	padding: 12px 14px;
}

.legal-item summary{
	cursor: pointer;
	font-weight: 900;
	letter-spacing: -0.02em;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.legal-item summary::-webkit-details-marker{ display: none; }

.legal-item summary::after{
	content: "\f078";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: rgba(255,255,255,0.60);
	transition: transform 0.15s ease;
}

.legal-item[open] summary::after{
	transform: rotate(180deg);
}

.legal-item .legal-body{
	margin-top: 10px;
	color: rgba(255,255,255,0.72);
	line-height: 1.7;
}

.legal-item a{
	color: rgba(255,255,255,0.92);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal-actions{
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 980px){
	.legal-meta{ min-width: 0; grid-template-columns: 1fr 1fr; }
	.legal-hero-card{ flex-direction: column; }
}