.logo-page {
	background: #f4f7f9;
	color: #172635;
}

.logo-shell {
	margin: 0 auto;
	max-width: 1120px;
	width: calc(100% - 48px);
}

.logo-hero {
	background: radial-gradient(circle at 78% 18%, rgba(255,236,86,0.18), transparent 22rem), #102235;
	color: #fff;
	padding: 104px 0 60px;
}

.logo-eyebrow {
	color: #ffec56;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.logo-eyebrow-dark {
	color: #1d557f;
}

.logo-hero h1,
.logo-heading h2,
.logo-guidance h2 {
	letter-spacing: -0.035em;
}

.logo-hero h1 {
	font-size: clamp(34px, 5vw, 58px);
	line-height: 0.98;
	margin: 12px 0;
	max-width: 790px;
}

.logo-hero p {
	color: rgba(255,255,255,0.84);
	font-size: 17px;
	line-height: 1.55;
	max-width: 700px;
}

.logo-section {
	padding: 58px 0;
}

.logo-heading {
	max-width: 700px;
}

.logo-heading h2,
.logo-guidance h2 {
	color: #102235;
	font-size: clamp(28px, 3.5vw, 40px);
	line-height: 1.06;
	margin: 9px 0;
}

.logo-heading p,
.logo-guidance p {
	color: #5e7184;
	line-height: 1.55;
}

.logo-download-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 28px;
}

.logo-download-card {
	background: #fff;
	border: 1px solid #d8e1ea;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(16,34,53,0.06);
	overflow: hidden;
	padding-bottom: 16px;
}

.logo-preview {
	align-items: center;
	display: flex;
	height: 148px;
	justify-content: center;
	padding: 22px;
}

.logo-preview-light { background: #f7fafc; }
.logo-preview-dark { background: #102235; }
.logo-preview img { max-height: 100%; max-width: 100%; }
.logo-preview-square img { max-height: 112px; }

.logo-download-card h3,
.logo-download-card p,
.logo-download-card a {
	margin-left: 16px;
	margin-right: 16px;
}

.logo-download-card h3 {
	color: #102235;
	font-size: 16px;
	margin-bottom: 4px;
}

.logo-download-card p {
	color: #5e7184;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 0;
}

.logo-download-card a {
	color: #0d5584;
	display: inline-block;
	font-size: 13px;
	font-weight: 900;
	margin-top: 7px;
}

.logo-guidance {
	background: #fff;
	border-top: 1px solid #d8e1ea;
}

.logo-guidance-grid {
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.logo-rules {
	border-left: 4px solid #ffec56;
	margin: 0;
	padding: 4px 0 4px 25px;
}

.logo-rules li {
	color: #334a60;
	line-height: 1.5;
	margin: 0 0 10px;
}

.logo-rules a { color: #0d5584; font-weight: 800; }

@media (max-width: 900px) {
	.logo-download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.logo-guidance-grid { gap: 26px; grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.logo-shell { width: calc(100% - 30px); }
	.logo-hero { padding: 84px 0 42px; }
	.logo-section { padding: 38px 0; }
	.logo-download-grid { grid-template-columns: 1fr; }
}