/* Local Overrides */
.section-hero {
	margin-bottom: 0;
	padding-bottom: 0;
}
@media (min-width: 1069px) {
	.section-hero {
		height: 100%;
	}
}

.section-hero .section-content {
	margin-top: 100px;
}

.section-hero .section-content .image-container {
	padding: 20px 0;
}

@media only screen and (max-width: 1068px) {
	.section-hero {
		margin: 38px 0 0;
	}

	.section-hero .section-content {
		margin-top: 62px;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero {
		margin-top: 28px;
	}
	.section-hero .section-content {
		margin-top: 0;
	}

	.section-hero .section-content .image-container {
		padding: 20px 0;
	}
}

#ac-localnav {
	height: 100%;
	background-color: #fff;
}

.typography-headline-super {
	font-size: 56px;
	line-height: 1.07142857143;
	font-weight: 600;
	letter-spacing: -0.015em;
	font-family:
		SF Pro Display,
		SF Pro Icons,
		Helvetica Neue,
		Helvetica,
		Arial,
		sans-serif;
}

@media only screen and (max-width: 1068px) {
	.typography-headline-super {
		font-size: 48px;
		line-height: 1.0625;
		font-weight: 600;
		letter-spacing: -0.009em;
		font-family:
			SF Pro Display,
			SF Pro Icons,
			Helvetica Neue,
			Helvetica,
			Arial,
			sans-serif;
	}
}

@media only screen and (max-width: 734px) {
	.typography-headline-super {
		font-size: 32px;
		line-height: 1.0834933333;
		font-weight: 600;
		letter-spacing: -0.003em;
		font-family:
			SF Pro Display,
			SF Pro Icons,
			Helvetica Neue,
			Helvetica,
			Arial,
			sans-serif;
	}
}

.typography-hero-intro {
	font-weight: 400;
	font-size: 28px;
	line-height: 1.28571428571;
	margin-top: 24px;
	margin-bottom: 114px;
}

@media only screen and (max-width: 1068px) {
	.typography-hero-intro {
		margin-top: 24px;
		margin-bottom: 60px;
		font-size: 27px;
	}
}

@media only screen and (max-width: 734px) {
	.typography-hero-intro {
		font-size: 22px;
		line-height: 1.23529411765;
		margin-top: 16px;
		margin-bottom: 55px;
	}
}

/*  Hero animation wrapper (overview)  */

.section-hero [data-unit-id="apple-watch-for-your-kids"] .unit-image-wrapper {
	position: relative;
	overflow: hidden;
	height: 692px;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	isolation: isolate;
}

@media only screen and (min-width: 1069px) {
	.section-hero
		[data-unit-id="apple-watch-for-your-kids"]
		.unit-image-wrapper {
		top: 160px;
		margin-bottom: 60px;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero
		[data-unit-id="apple-watch-for-your-kids"]
		.unit-image-wrapper {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

.section-hero .section-content {
	opacity: 1 !important;
}

html.enhanced .section-hero .hero-content .hero-headline,
html.enhanced .section-hero .hero-content .hero-intro,
.section-hero .hero-content .hero-headline,
.section-hero .hero-content .hero-intro {
	animation: hero-fade-up 600ms cubic-bezier(0.33, 1, 0.68, 1) 200ms both;
}

@keyframes hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px) translateZ(0);
	}
	to {
		opacity: 1;
		transform: translateY(0) translateZ(1px);
	}
}

@media only screen and (max-width: 1068px) {
	.section-hero
		[data-unit-id="apple-watch-for-your-kids"]
		.unit-image-wrapper {
		height: 650px;
		top: 120px;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero
		[data-unit-id="apple-watch-for-your-kids"]
		.unit-image-wrapper {
		height: 500px;
		top: 17px;
	}
}

.section-hero [data-unit-id="apple-watch-for-your-kids"] .animation-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.unit-image-wrapper
	.unit-image,
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	video {
	position: absolute;
	left: 50%;
	right: auto;
	top: auto;
	bottom: 0;
	margin: 0;
	padding: 0;
	border: 0;
	transform: translateX(-50%);
}

/* Stacking order so the end-frame is always rendered *behind* the video,
   ready to show through once the video fades out. */
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	.end-frame {
	z-index: 1;
}
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	video {
	z-index: 2;
}
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	.start-frame {
	z-index: 2;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	video {
	height: 100%;
	width: auto;
}

/* Only the layers that actually fade get a transition — the end-frame stays
   at opacity:1 underneath the video, so the hand-off is a single video
   fade-out instead of two simultaneous opacity animations. */
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	.start-frame,
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	video {
	transition: opacity 0.3s ease;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper
	.end-frame {
	opacity: 1;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper.loaded
	.start-frame {
	opacity: 0;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper.ended
	.start-frame,
.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper.ended
	video {
	opacity: 0;
}

.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.unit-image-wrapper
	> .static-frame {
	display: none;
}

html.no-js
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper,
html.reduced-motion
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper,
html.text-zoom
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.animation-wrapper {
	display: none;
}

html.no-js
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.unit-image-wrapper
	> .static-frame,
html.reduced-motion
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.unit-image-wrapper
	> .static-frame,
html.text-zoom
	.section-hero
	[data-unit-id="apple-watch-for-your-kids"]
	.unit-image-wrapper
	> .static-frame {
	display: block;
}

/* --- Play/pause button synced with the hero animation --- */
.section-hero .inline-media-ui-detached-wrapper {
	position: absolute;
	top: 420px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1260px;
	width: 87.5vw;
	height: 0;
	pointer-events: none;
	z-index: 3;
}

@media only screen and (max-width: 734px) {
	.section-hero .inline-media-ui-detached-wrapper {
		top: 100px;
		width: 87.5vw;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero .inline-media-ui-detached-wrapper {
		top: 300px;
		width: 87.5vw;
	}
}

html.js [data-anim-lazy-image] * {
	background-image: none !important;
	mask-image: none !important;
}

@media only screen and (max-width: 734px) {
	.section-hero .inline-media-ui-detached-wrapper {
		width: 92.5vw;
	}
}

.section-hero .inline-media-ui-button {
	position: absolute;
	top: 20px;
	right: 0;
	pointer-events: none;
	--inline-media-playpause-icon-color: rgba(0, 0, 0, 0.56);
	--inline-media-playpause-icon-color-hover: rgba(0, 0, 0, 0.72);
	--inline-media-playpause-scrim-color: rgba(210, 210, 215, 0.64);
	--inline-media-playpause-scrim-color-hover: rgba(223, 223, 227, 0.6976);
	--inline-media-playpause-scrim-color-active: rgba(193, 193, 198, 0.6544);
}

.section-hero .play-pause-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--inline-media-playpause-scrim-color) no-repeat;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition:
		opacity 100ms linear,
		transform 0.2s ease,
		background-color 150ms ease;
}

.section-hero .play-pause-button::after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 36px;
	height: 36px;
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg==");
	mask-size: cover;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTE0IDIyLjU4N3YtOS4xNjhjMC0uOTM0LjU2My0xLjQyNSAxLjI2LTEuNDI1LjM4NiAwIC42MjcuMDY1Ljk2Ny4yNzNsNy40NjggNC40MDNjLjY2Mi4zOSAxLjAyLjcwNyAxLjAyIDEuMzI0IDAgLjYxOC0uMzU4LjkzNS0xLjAyIDEuMzI1bC03LjQ2OCA0LjQwM2MtLjM0LjIwOC0uNTgxLjI3My0uOTY2LjI3My0uNjk4IDAtMS4yNjEtLjQ3My0xLjI2MS0xLjQwOCIvPjwvc3ZnPg==");
	-webkit-mask-size: cover;
	background-color: transparent;
	transition: background-color 150ms ease;
}

.section-hero .inline-media-ui-button.loaded .play-pause-button::after {
	background-color: var(--inline-media-playpause-icon-color);
}

.section-hero .inline-media-ui-button.loaded .play-pause-button {
	opacity: 1;
	pointer-events: all;
}

.section-hero .inline-media-ui-button.loaded.playing .play-pause-button::after {
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==");
	mask-size: cover;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTIuODkzdjEwLjIxNGMwIC43NjktLjU5NyAxLjM5My0xLjMzMyAxLjM5M2gtMS4zMzRjLS43MzYgMC0xLjMzMy0uNjI0LTEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny41OTctMS4zOTMgMS4zMzMtMS4zOTNoMS4zMzRjLjczNiAwIDEuMzMzLjYyNCAxLjMzMyAxLjM5M3pNMTUuMTY3IDExLjVoLTEuMzM0Yy0uNzM2IDAtMS4zMzMuNjI0LTEuMzMzIDEuMzkzdjEwLjIxNGMwIC43NjkuNTk3IDEuMzkzIDEuMzMzIDEuMzkzaDEuMzM0Yy43MzYgMCAxLjMzMy0uNjI0IDEuMzMzLTEuMzkzVjEyLjg5M2MwLS43Ny0uNTk3LTEuMzkzLTEuMzMzLTEuMzkzeiIvPjwvc3ZnPg==");
	-webkit-mask-size: cover;
}

.section-hero .inline-media-ui-button.loaded.ended .play-pause-button::after {
	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+");
	mask-size: cover;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PHBhdGggZD0iTTIzLjUgMTYuNUExLjUgMS41IDAgMDAyMiAxOGMwIDIuMjA2LTEuNzk0IDQtNCA0cy00LTEuNzk0LTQtNGMwLTEuOTkgMS40NjQtMy42MyAzLjM2OS0zLjkzNmwtLjM3Ni4zNzVhMS41IDEuNSAwIDEwMi4xMjEgMi4xMjJsMi45MjktMi45M2ExLjUgMS41IDAgMDAwLTIuMTJsLTMuMDcxLTMuMDcyYTEuNSAxLjUgMCAxMC0yLjEyMSAyLjEyMmwuNDczLjQ3M0MxMy43OCAxMS4zNzUgMTEgMTQuMzY4IDExIDE4YzAgMy44NiAzLjE0IDcgNyA3czctMy4xNCA3LTdhMS41IDEuNSAwIDAwLTEuNS0xLjV6Ii8+PC9zdmc+");
	-webkit-mask-size: cover;
}

.section-hero .play-pause-button:hover {
	background-color: var(--inline-media-playpause-scrim-color-hover);
}

.section-hero .play-pause-button:hover::after {
	background-color: var(--inline-media-playpause-icon-color-hover);
}

.section-hero .play-pause-button:active {
	background-color: var(--inline-media-playpause-scrim-color-active);
	transform: scale(0.95);
}

.section-hero .play-pause-button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 5px #0071e3;
}

.section-hero .play-pause-button:disabled {
	pointer-events: none;
	opacity: 0.32;
}

@media only screen and (max-width: 734px) {
	.section-hero .inline-media-ui-button {
		top: 12px;
		right: 12px;
	}
}

html.no-js .section-hero .inline-media-ui-detached-wrapper,
html.reduced-motion .section-hero .inline-media-ui-detached-wrapper,
html.text-zoom .section-hero .inline-media-ui-detached-wrapper {
	display: none;
}