/* ==========================================================================
   App Development page (page-app-development.php)
   Layers on service-web.css (hero copy, offers, tech, help, parts, CTA) and
   service-social.css (process, case studies).
   ========================================================================== */

/* Hero: centred copy, then the phones illustration as a full-bleed band. */
/* The whole hero (copy + phones) fits the first screen: the illustration band
   takes whatever height is left, between 220px and its natural 426px. */
.ap-hero {
	display: flex;
	flex-direction: column;
	max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding-bottom: 0;
	overflow: hidden;
}
.ap-hero > .sv-hero__inner { flex: 0 0 auto; }
.ap-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	flex: 0 1 clamp(230px, 31vw, 426px);
	min-height: 220px;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	overflow: hidden;
	/* Same white → lilac fade as the illustration, so its edges disappear on wide screens. */
	background: linear-gradient(180deg, #fff 0%, #fff 42%, #FCFCFF 50%, #F8F6FF 60%, #F1EDFE 70%, #E8E2FD 80%, #E0D8FC 90%, #DAD0FC 100%);
}
.ap-hero__visual img {
	flex: 0 0 auto;
	width: auto;
	height: 100%;
	max-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Tech tiles that use the bundled logos (same treatment as uploaded logos). */
.ap-tech-logo { display: block; width: 64px; height: 64px; object-fit: contain; }