:root {
	--wide-display: 1200px;
	--tablet-display: 720px;
	--phone-display: 500px;

	--blue: rgba(0.0, 122.0, 255.0, 1.0);
	--green: rgba(52.0, 199.0, 89.0, 1.0);
	--indigo: rgba(88.0, 86.0, 214.0, 1.0);
	--orange: rgba(255.0, 149.0, 0.0, 1.0);
	--pink: rgba(255.0, 45.0, 85.0, 1.0);
	--purple: rgba(175.0, 82.0, 222.0, 1.0);
	--red: rgba(255.0, 59.0, 48.0, 1.0);
	--teal: rgba(90.0, 200.0, 250.0, 1.0);
	--yellow: rgba(255.0, 204.0, 0.0, 1.0);
	--label: rgba(0.0, 0.0, 0.0, 1.0);
	--secondary-label: rgba(60.0, 60.0, 67.0, 0.6);
	--tertiary-label: rgba(60.0, 60.0, 67.0, 0.3);
	--background: rgba(255.0, 255.0, 255.0, 1.0);
	--secondary-background: rgba(242.0, 242.0, 247.0, 1.0);
	--tertiary-background: rgba(255.0, 255.0, 255.0, 1.0);
	--separator: rgba(60.0, 60.0, 67.0, 0.29);
	--background-blur: rgba(255, 255, 255, 0.72);
	--grid-min-item-height: 100px;
	--grid-spacing: 40px;
	--thin-spacing: 25px;
	--ultra-thin-spacing: 20px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--blue: rgba(10.0, 132.0, 255.0, 1.0);
		--green: rgba(48.0, 209.0, 88.0, 1.0);
		--indigo: rgba(94.0, 92.0, 230.0, 1.0);
		--orange: rgba(255.0, 159.0, 10.0, 1.0);
		--pink: rgba(255.0, 55.0, 95.0, 1.0);
		--purple: rgba(191.0, 90.0, 242.0, 1.0);
		--red: rgba(255.0, 69.0, 58.0, 1.0);
		--teal: rgba(100.0, 210.0, 255.0, 1.0);
		--yellow: rgba(255.0, 214.0, 10.0, 1.0);
		--label: rgba(255.0, 255.0, 255.0, 1.0);
		--secondary-label: rgba(235.0, 235.0, 245.0, 0.6);
		--tertiary-label: rgba(235.0, 235.0, 245.0, 0.3);
		--background: rgba(0.0, 0.0, 0.0, 1.0);
		--secondary-background: rgba(28.0, 28.0, 30.0, 1.0);
		--tertiary-background: rgba(44.0, 44.0, 46.0, 1.0);
		--separator: rgba(84.0, 84.0, 88.0, 0.6);
		--background-blur: rgba(0, 0, 0, 0.8);
	}
}

@supports (color: color(display-p3 1 1 1)) {

	:root {
		--red: color(display-p3 1 0.231 0.188);
		--yellow: color(display-p3 1 0.8 0);
		--purple: color(display-p3 0.686 0.322 0.87);

		--indigo: color(display-p3 0.345 0.337 0.839);
		--pink: color(display-p3 1 0.176 0.333);
		--teal: color(display-p3 0.353 0.784 0.98);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--red: color(display-p3 1 0.27 0.227);
			--yellow: color(display-p3 1 0.839 0.039);
			--purple: color(display-p3 0.749 0.353 0.949);
			--indigo: color(display-p3 0.373 0.361 0.902);
			--pink: color(display-p3 1 0.216 0.373);
			--teal: color(display-p3 0.392 0.824 1);
		}
	}
}

body {
	color: var(--label);
	line-height: 1.4211;
	letter-spacing: 0.012em;
	font-size: 19px;
	font-weight: 600;
	font-synthesis: none;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif, "SF Pro Display","Helvetica Neue","Helvetica","Arial",sans-serif;
	-webkit-font-smoothing: antialiased;
	background: var(--secondary-background);
}

/* Typography Styles */

h1 {
	font-size: 3.5em;
	font-weight: 700;
	line-height: 1.0625;
	letter-spacing: -.009em;
	padding-bottom: 25px;
}

h2 {
	font-size: 1.4em;
	line-height: 1.33341;
	letter-spacing: .009em;
	padding-bottom: 20px;
}

h3 {
	font-size: 1.2em;
	line-height: 1.19048;
	letter-spacing: .011em;
	padding: 4px 0px;
}

@media screen and (max-width: 850px) {
	h1 { font-size: 2.5em; }
	h2 { font-size: 1.2em; }
	h3 { font-size: 1em; }
	body { font-size: 17px; }
}

blockquote {
	font-size: 0.8em;
	border-left: 5px solid var(--secondary-label);
	padding-left: 20px;
	color: var(--secondary-label);
}

/* Tints */

.tint-blue { color: var(--blue); }
.tint-green { color: var(--green); }
.tint-indigo { color: var(--indigo); }
.tint-orange { color: var(--orange); }
.tint-pink { color: var(--pink); }
.tint-purple { color: var(--purple); }
.tint-red { color: var(--red); }
.tint-teal { color: var(--teal); }
.tint-yellow { color: var(--yellow); }
.tint-secondary-label { color: var(--secondary-label); }

/* Sections */

section {
	padding-top: 80px;
	padding-bottom: 80px;
	position: relative;
}

section.background-gradient {
	background: linear-gradient(var(--background), var(--secondary-background));
}

.center-track {
	max-width: 1200px;
	margin: auto;
	display: block;
	box-sizing: border-box;
	position: relative;
}

/* default width is 1200px + grid spacing either side */
@media screen and (max-width: 1280px) {
	.center-track {
		margin: 0px var(--grid-spacing);
	}
}

@media screen and (max-width: 500px) {
	.center-track {
		margin: 0px var(--thin-spacing);
	}
}

header {
	margin-bottom: 30px;
	max-width: 800px;
}

/* Grid Items */

.grid {
	display: grid;
	grid-auto-rows: minmax(var(--grid-min-item-height), auto);
	column-gap: var(--grid-spacing);
	row-gap: var(--grid-spacing);
	margin-bottom: var(--grid-spacing);
}

.grid.two-column {
	grid-template-columns: 1fr 1fr;
}

.grid.three-column {
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-item.two-column {
	grid-column: auto / span 2;
}

.grid-item.three-column {
	grid-column: auto / span 3;
}

@media screen and (max-width: 800px) {
	.grid-item, .grid-item.two-column, .grid-item.three-column {
		grid-column: 1 / -1;
	}
}

.panel {
	border-radius: var(--grid-spacing);
	background: var(--tertiary-background);
	padding: var(--grid-spacing);
    box-sizing: border-box;
	position: relative;
}

.panel.no-pad-trailing {
	padding-right: 0;
}

.panel.no-pad-bottom {
	padding-bottom: 0;
}

@media screen and (max-width: 850px) {
	.grid {
		column-gap: var(--thin-spacing);
		row-gap: var(--thin-spacing);
		margin-bottom: var(--thin-spacing);
	}
	.panel {
		border-radius: var(--thin-spacing);
		padding: var(--thin-spacing);
	}
}

@media screen and (max-width: 500px) {
	.grid {
		column-gap: var(--ultra-thin-spacing);
		row-gap: var(--ultra-thin-spacing);
		margin-bottom: var(--ultra-thin-spacing);
	}
	.panel {
		border-radius: var(--ultra-thin-spacing);
		padding: var(--ultra-thin-spacing);
	}
}

/* Img */

.one-half-width { width: 50% }

div.img-margin {
    margin-left: 20px;
    margin-right: 20px;
}

img {
 	max-width: 100%;
	margin-bottom: 20px;
}

img.full-width, object.full-width {
	width: 100%;
}

img.center, object.center, .margin-center {
	display: block;
	margin: auto;
}

img.icon {
	margin: 0;
}

@media screen and (max-width: 650px) {
	.one-half-width { width: 100% }
}

.text-center {
	text-align: center;
}

/* Navigation */

a {
	color: var(--label);
	text-decoration: none;
	border-bottom: 3px solid var(--orange);
}

a.no-underline {
	border-bottom: 0;
}

a:hover {
	color: var(--orange);
}

a.active {
	color: var(--orange);
	border-bottom: 3px solid var(--orange);
}

nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: var(--background-blur);
	padding: 25px 0;
	z-index: 100;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

nav a {
	font-weight: 700;
	border-bottom: 0px;
	margin-right: 30px;
}

nav a:last-child {
	margin-right: 0px;
}

@media screen and (max-width: 400px) {
	nav a {
		margin-right: 10px;
	}
}

.app-store-badge {
	margin: 60px 0;
	height: 70px;
}

.graph-axis {
	background-image: url("../assets/graph-dividers.svg");
  	background-repeat: repeat-x;
	background-size: auto 100%;
}

@media (prefers-color-scheme: dark) {
	.graph-axis {
		background-image: url("../assets/graph-dividers-dark.svg");
	}
}

.privacy-hero {
	background-image: url("../assets/privacy-header.svg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height: 500px;
	position: absolute;
	left: 0;
	top: 0;
}

.thin-padding {
	padding-top: 10px;
	padding-bottom: 10px;
}

.regular-padding {
	padding-top: 30px;
	padding-bottom: 30px;
}

.thick-margin {
	margin-top: 80px;
	margin-bottom: 80px;
}

/* Watch Complication */

.phone-container {
	position: relative;
	width: 265px;
	height: 485px;
	margin-top: 30px;
}

.phone-mask {
	position: absolute;
	width: 265px;
	height: 485px;
	z-index: 2;
}

.phone-video {
	position: absolute;
	width: 201.15px;
	height: 435.31px;
	top: 24.9px;
	left: 31px;
}

.watch-complication-container {
	position: relative;
	width: 264px;
	height: 454px;
	margin-top: 50px;
}

.watch-complication-mask {
	position: absolute;
	width: 264px;
	height: 454px;
	z-index: 2;
}

.watch-complication-video {
	position: absolute;
	width: 184px;
	height: 224px;
	top: calc(50% - 112px);
	left: calc(50% - 92px);
}

@media screen and (max-width: 350px) {
	.watch-complication-container {
		width: 198px;
		height: 340px;
	}
	.watch-complication-mask {
		width: 198px;
		height: 340px;
	}
	.watch-complication-video {
		width: 138px;
		height: 168px;
		top: calc(50% - 84px);
		left: calc(50% - 69px);
	}
	.phone-container, .phone-mask {
		width: 198.75px;
		height: 363.75px;
	}
	.phone-video {
		width: 151px;
		height: 327px;
		top: 18px;
		left: 23px;
	}
}

.watch-angle-hero {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
}