/* Landing page - port of the GAS landing design */
.landing { text-align: center; }

.iplogo { height: 74px; margin: 8px auto 4px; display: block; }

.badge-pill {
	display: inline-block;
	background: var(--yellow);
	color: var(--purple);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 20px;
	padding: 8px 22px;
	margin: 12px 0 4px;
}

.award-img { height: 220px; margin: 10px auto; display: block; }
.award-img.fordark { display: none; }
body.dark .award-img.forlight { display: none; }
body.dark .award-img.fordark { display: block; }
.iplogo.fordark { display: none; }
body.dark .iplogo.forlight { display: none; }
body.dark .iplogo.fordark { display: block; }

.landing .lead { max-width: 560px; margin: 6px auto 18px; font-size: 16px; line-height: 1.55; }

.disc-icon { height: 56px; display: block; margin: 4px auto 8px; }

.vote-cta {
	display: inline-block;
	background: var(--blue);
	color: #fff;
	border: 2px solid var(--yellow);
	border-radius: 12px;
	padding: 13px 30px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
.vote-cta:hover { filter: brightness(1.08); }

/* Monthly Spotlight */
.spot-h { margin-top: 44px; }
.spotgrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 18px 0 8px;
}
@media (max-width: 900px) { .spotgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .spotgrid { grid-template-columns: repeat(2, 1fr); } }
.spotgrid img {
	width: 100%;
	aspect-ratio: 460/215;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: var(--panel-shadow);
}
body.dark .spotgrid img { box-shadow: var(--panel-shadow-dark); }

/* Trust bar */
.trust-h {
	margin-top: 40px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	opacity: .7;
}
.trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 16px 0 10px;
}
.trustbar .stat {
	background: #fff;
	border-radius: 12px;
	padding: 14px 22px;
	box-shadow: var(--panel-shadow);
	min-width: 150px;
}
body.dark .trustbar .stat { background: var(--purple-d); box-shadow: var(--panel-shadow-dark); }
.trustbar .stat b { display: block; color: var(--yellow); font-size: 17px; }
.trustbar .stat span { font-size: 13px; }

/* CTA cards */
.cards {
	display: flex;
	gap: 26px;
	align-items: stretch;
	justify-content: center;
	margin: 44px 0 10px;
	position: relative;
	text-align: center;
}
@media (max-width: 760px) { .cards { flex-direction: column; align-items: center; } }
.cards .card {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--panel-shadow);
	padding: 30px 28px;
	flex: 1;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
body.dark .cards .card { background: var(--purple-d); box-shadow: var(--panel-shadow-dark); }
.cards .card img.cicon { height: 96px; margin-bottom: 10px; }
.cards .card h2 { color: var(--yellow); font-size: 21px; margin: 6px 0 2px; }
body.dark .cards .card h2 { color: var(--yellow); }
.cards .card .tagline { font-weight: 700; font-size: 14.5px; margin: 4px 0 10px; }
.cards .card .intro { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.benefits { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; font-size: 14px; line-height: 1.9; }
.benefits li::before { content: '✓ '; color: var(--green); font-weight: 700; }
body.dark .benefits li::before { color: var(--green-l); }
.benefits li.star::before { content: '★ '; color: var(--yellow); }
.benefits .free-tag {
	background: var(--green);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: 10px;
	padding: 2px 8px;
	margin-left: 6px;
	vertical-align: middle;
}
.cards .star-note { font-size: 11.5px; opacity: .65; margin-bottom: 12px; }
.cards .card .btn { margin-top: auto; }
.cards .sub-note { font-size: 12px; opacity: .65; margin-top: 10px; }

.or-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--panel-shadow);
	z-index: 2;
}
body.dark .or-circle { background: #4A4570; }
@media (max-width: 760px) { .or-circle { position: static; transform: none; margin: -8px auto; } }