/*
 * Benefit - End.
 *
 * Read from cp-all-designer benefit.html:279-302, css/benefit.css:639-743 and
 * css/app.css:357-359 (.glow), 956-963 (.philo__sky, .philo__ground).
 *
 * Colour, type, padding and the spaces between the parts arrive from the
 * Style tab and are not repeated here.
 */

/* benefit.css:651-653 */
.custom-benefit-end {
	--custom-benefit-end-top: #EAF6FD;
	--custom-benefit-end-middle: #F7FBFE;
	--custom-benefit-end-foot: #FFFFFF;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--custom-benefit-end-top) 0%, var(--custom-benefit-end-middle) 46%, var(--custom-benefit-end-foot) 100%);
}

/* app.css:956-959 — two soft glows over the band's upper part, behind everything */
.custom-benefit-end .custom-benefit-end__sky {
	position: absolute;
	inset: 0 0 auto;
	z-index: 0;
	height: 62%;
	opacity: 0.5;
	pointer-events: none;
}

.custom-benefit-end .custom-benefit-end__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(6px);
	pointer-events: none;
}

.custom-benefit-end .custom-benefit-end__glow--blue {
	top: -260px;
	right: -180px;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, rgba(80, 163, 213, 0.1) 0%, transparent 70%);   /* app.css:358 */
}

.custom-benefit-end .custom-benefit-end__glow--green {
	top: 40px;
	left: -220px;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, rgba(92, 161, 63, 0.09) 0%, transparent 70%);   /* app.css:359 */
}

/* app.css:960-964, benefit.css:716-733 — the picture fading in from its top,
   its people standing on the band's foot */
.custom-benefit-end .custom-benefit-end__ground {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	opacity: 0.32;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
	pointer-events: none;
}

/* benefit.css:701 — the words stand over both */
.custom-benefit-end .custom-benefit-end__inner {
	position: relative;
	z-index: 2;
}

/* benefit.css:743 */
.custom-benefit-end .custom-benefit-end__act {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (benefit.css:819, drawn below 560)             */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-benefit-end .custom-benefit-end__act [data-custom-partner-button] {
		flex: 1 1 100%;
	}
}

/* benefit.css:741 — the line keeps its 1.7 on a phone too */
@media (max-width: 767px) {
	.custom-benefit-end .custom-benefit-end__intro {
		line-height: 1.7;
	}
}