/*
 * Home page glue. design/PAGE-STRUCTURE.md §2, DESIGN-SYSTEM.md §3.3 / §5.2.
 *
 * Everything reusable lives in assets/css/components/ (hero, feature-card,
 * plan-card, leaderboard, review-card). What is left here is layout that only
 * the front page has: the brand band, the two section head rows and the
 * trailing CTA rows.
 */

/* ------------------------------------------------- 3. brand band ("stopa") */

.sp-home-band {
	padding-block: clamp(44px, 6vw, 88px);
}

.sp-home-band__streak {
	bottom: 14%;
}

/*
 * The pair is always a taller bar plus a shorter one below it, with the mask
 * stops staggered so the two fade in and out at different points (§4.21).
 */
.sp-home-band__streak--low {
	bottom: 6%;
	height: 38px;
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.045) 0 16px,
		rgba(255, 255, 255, 0.01) 16px 27px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 76%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 30%, #000 76%, transparent);
}

.sp-home-band__grid {
	position: relative;
}

.sp-home-band__title {
	margin-top: var(--sp-4);
}

.sp-home-band__text {
	margin-top: var(--sp-5);
	max-width: 460px;
}

.sp-home-band__btn {
	margin-top: var(--sp-10);
	/* §4.2 split-band ghost: 15px 30px at the standard button size. */
	padding: 15px var(--sp-11);
}

.sp-home-band__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

/* The cut-out deliberately overflows its column (§5.2). */
.sp-home-band__art img {
	width: min(1250px, 180%);
	max-width: none;
	height: auto;
	margin-right: -24%;
	filter: var(--sp-shadow-render);
}

/* ------------------------------------------------------- 5. leaderboard */

/* The prototype rules this band off at the top only. */
.sp-home-leaderboard {
	border-bottom: 0;
}

/* --------------------------------------------------- 6. reviews teaser */

.sp-home-reviews__head {
	gap: var(--sp-5);
}

/* ----------------------------------------------------- trailing CTA rows */

.sp-home-more__btn {
	/* §4.2 section-level ghost: 15px 34px at the standard button size. */
	padding: 15px var(--sp-12);
}

/* ------------------------------------------------------------- phones */

/*
 * The one breakpoint DESIGN-SYSTEM.md §3.5 asks for on this page: below 640px
 * the negative-margin car render overflows badly, so it is reset to fit.
 */
@media (max-width: 640px) {
	.sp-home-band__art img {
		width: 100%;
		margin-right: 0;
	}
}