html, body{
	margin: 0px;
	padding: 0px;
	font-family: "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	line-height: 2em;
	width: 100%;
	height: 100%;
	-webkit-font-smoothing: antialiased;
}

#container{
	height: 100%;
}

.fade-in-element{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.66s ease-out, transform 0.66s ease-out;
}

.appstore-badge{
	background-image: url(appstore-badge-normal.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 180px;
	height: 80px;
	margin: 0px auto auto;
}

#appoftheday{
	background-image: url(appoftheday.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 180px;
	height: 42px;
	margin: 0px auto 14px auto;
	image-rendering: optimizeQuality;
}

.appclip-badge{
	background-image: url(appclipcode.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 180px;
	height: 260px;
	margin: 0px auto auto;
}

.appstore-badge-alt{
	background-image: url(appstore-badge-alt-normal.svg);
}

.preorder{
	background-image: url(appstore-badge-preorder.svg);
}

/* !———————— */
/* !Header */
/* !———————— */

#header{
	width: 100%;
	height: 95%;
	max-height: 1024px;
	display: table;
	-webkit-user-select: none;
	cursor: default;
	box-sizing: border-box;
/* 	border-bottom: 1px solid rgba(0,0,0,0.05); */
	border-bottom: 1px solid rgba(0,0,0,0.0);
	animation: header-border-animation 2.75s ease-out;
	animation-fill-mode: forwards;
	animation-delay: 4s;
}

#header-appstore-badge{
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 200;
}

#header-appstore-badge .appstore-badge{
	width: 152px;
	height: 50px;
	background-position: center right;
}

#header-logo-container{
	display: table-cell;
	vertical-align: middle;	
}

#header-logo{
	width: 200px;
	margin: 0px auto auto;
	animation: logo-opacity-animation 3.75s ease-in-out, logo-shadow-animation 2s ease-out;
	animation-delay: 0.25s, 4s;
	animation-fill-mode: forwards;
	padding-bottom: 40px;
	padding-top: 40px;
	opacity: 0;
	z-index: 1000;
}

#header-logo-title{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 36px;
	text-align: center;
	color: #25be09;
	animation: logo-title-animation 2s ease-out;
	animation-delay: 3.75s;
	animation-fill-mode: forwards;
	transition: font-size 0.1s ease-out;
	margin-top: 0.66em;
}

#header-logo-appstore{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 20px;
	text-align: center;
	color: #52cc06;
	animation: logo-opacity-animation 3.75s ease-in-out, logo-title-animation 2s ease-out;
	animation-delay: 0.25s, 3.75s;
	animation-fill-mode: forwards;
	transition: font-size 0.1s ease-out;
	opacity: 0;
	margin-top: 1em;
	z-index: 1000;
}

#header-logo-image{
	-webkit-mask-image: url(seeds-logo-bw.svg);
	-webkit-mask-mode: alpha;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-image: url(seeds-logo-bw.svg);
	mask-mode: alpha;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center center;
	height: 150px;
	transition: height 0.1s ease-out, margin-bottom 0.1s ease-out;
}

#header-logo-image-fill{
	width: 100%;
	height: 100%;
	background: white;
}

@supports(-webkit-backdrop-filter: blur(30px)){
	#header-logo-image-fill{
/* 		background: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,0.0)), rgba(255,255,255,0.925); */
		-webkit-backdrop-filter: blur(30px) saturate(1000%);
		backdrop-filter: blur(30px) saturate(1000%);
	}
}

#header-logo-image-gradient{
	width: 100%;
	height: 100%;
	background: linear-gradient(#a0e401, #25be09);
/* 	opacity: 0; */
	animation: logo-image-animation 2s ease-out;
	animation-delay: 3.75s;
	animation-fill-mode: forwards;
}

#header-photos{
	width: 100%;
	height: 95%;
	max-height: 1024px;
	position: absolute;
	z-index: -100;
	overflow: hidden;
	animation-fill-mode: forwards;
}

#header-photos-container{
	animation: header-photo-container-fade-animation 10s ease-out;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.header-photo{
	width: 100%;
	height: 100%;
	background-color: #999999;
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: border-box;
/* 	image-rendering: optimizeQuality; */
	animation: header-photo-fade-animation 10s ease-out, header-photo-zoom-animation 10s linear;
	animation-fill-mode: forwards;
	opacity: 0;
}

#header-photo-first{
	opacity: 1;
	animation: header-photo-zoom-animation 10s linear;
}

#header-photo-only{
	opacity: 1;
	animation: header-photo-zoom-animation 15s ease-out;
	animation-fill-mode: forwards;
}

#header-arrow{
	position: absolute;
	left: 50%;
	margin-left: -20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-top: 3px solid;
	border-right: 3px solid;
	border-color: white;
	transform: rotate(-45deg);
	-webkit-user-select: none;
	transition: border-width 0.1s ease-out, margin-left 0.1s ease-out, height 0.1s ease-out, width 0.1s ease-out, bottom 0.1s ease-out;
	animation: arrow-animation 1.66s ease-out;
	animation-delay: 7s;
	animation-fill-mode: forwards;
	opacity: 0;
}

#header-app-clip-code{
	width: 200px;
	height: 200px;
	margin: 0px auto auto;
	border-radius: 100px;
	background: #FFFFFF;
	transition: border-radius 0.1s ease-out, margin-left 0.1s ease-out, height 0.1s ease-out, width 0.1s ease-out, margin-top 0.1s ease-out;
	background-position: center;
	background-repeat: no-repeat;
}

.header-app-clip #header-photos-container{
	animation: none;
	opacity: 1;
}

.header-app-clip #header-logo{
	width: auto;
	animation: none;
	opacity: 1;
	-webkit-filter: drop-shadow(rgba(0,0,0,0.15) 0px 0px 40px);
	text-shadow: rgba(0,0,0,0.33) 0px 0px 40px, rgba(0,0,0,0.1) 0px 0px 5px;
}

.header-app-clip #header-logo-title{
	animation: none;
	color: #FFFFFF;
}

#app-clip-container{
	width: 100%;
	height: 60vw;
	max-height: 440px;
	min-height: 220px;
	margin: 0px auto auto;
}

#app-clip-code{
	width: 100%;
	height: 80vw;
	max-height: 600px;
	min-height: 300px;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px auto auto;
	background: url(potatosalad/appclip-hover.png) center center no-repeat;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-origin: border-box;
	animation: app-clip-animation 2.5s ease-in-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	pointer-events: none;
}

#corner-logo{
	display: block;
	position: absolute;
	width: auto;
	height: 32px;
	margin: 32px;
	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	font-weight: 500; 
	font-stretch: normal;
	font-size: 24px;
	color: #41474b;
	background-image: url(/potatosalad/seeds-logo.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 32px;
	padding-right: 16px;
	transition: opacity 0.66s ease-in-out, height 0.1s ease-in-out, font-size 0.1s ease-in-out, padding-left 0.1s ease-in-out, margin 0.1s ease-in-out, background-size 0.1s ease-in-out;
}

#corner-logo:hover{
	opacity: 0.66;
}

#footer-disclaimer{
	text-align: center;
	margin: 0px auto auto;
	width: auto;
	font-family: "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	font-size: 13px;
	text-align: center;
	line-height: 1.5em;
	padding-bottom: 1em;
	color: #b7b7bd;
	/* display: none; */
}

/* !———————— */
/* !Content */
/* !———————— */

.content-section, .content-section-alt{
	padding-left: 24px;
	padding-right: 24px;
}

.content-section-final{
	border-bottom: 2px solid rgba(244, 245, 245, 1.0);
}

@supports(padding: max(0px)) {
	.content-section, .content-section-alt{
		padding-left: max(24px, env(safe-area-inset-left));
		padding-right: max(24px, env(safe-area-inset-right));
	}
}

.content-section{
	background: rgba(244, 245, 245, 1.0);
}

.content-section-alt{
	background: rgba(255, 255, 255, 1.0);
}

.content-section-centered{
	text-align: center;
}

.content-section-container{
	width: 720px;
	margin: 0px auto auto;
}

.content-section-centered .content-section-paragraph{
	max-width: auto;
	padding-top: 3em;
	/* padding-bottom: 0em; */
}

.content-section-title{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 36px;
	padding-top: 2em;
	padding-bottom: 0em;
	color: #333333;
	line-height: 1.5em;
/*
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform: translateY(16px);
*/
}

.content-section-paragraph, .content-section-paragraph-new{
/* 	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	font-weight: 500; 
	color: #808080; */
	color: #666666;
	max-width: 680px;
	padding-top: 0.5em;
	padding-bottom: 3em;
	font-size: 20px;
	line-height: 2.2em;
/*
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0.33s;
	animation-fill-mode: forwards;
	opacity: 0;
	transform: translateY(16px);
*/
}

.content-section-paragraph-compact{
	display: none;
}

.content-section-paragraph-new {
	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	line-height: 2.2em;
	color: #666666;
}

#content-section-initial .content-section-title, #content-section-initial .content-section-paragraph{
	opacity: 1;
	transform: translateY(0px);
}

.content-section-paragraph-inner{
/* 	padding-top: 1em; */
}

.content-section-paragraph-inner-below{
	padding-top: 0.6em;
}

.content-section-paragraph b{
	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	font-weight: normal;
	color: #333333;
}

.no-wrap{
	white-space: nowrap;
}

.logo-text{
 	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #25be09, #96d600, #25be09);
	white-space: nowrap;
/* 	color: #25be09; */
}

.plant-text-full{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-color: #333333;
	background-image: repeating-linear-gradient(to right,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #25be09 60%, #91cf00 70%, #25be09 80%, rgba(0,0,0,0) 100%); /* 67af2c */
	background-size: 200%, 100%;
	background-position: 200%, 0%;
	background-repeat: no-repeat;
	white-space: nowrap;
}

.visibility-element-visible .plant-text-full{
	animation: plant-animation 2s ease-out;
	animation-fill-mode: forwards;
}

@keyframes plant-animation {
	from{
		background-position: 200%, 0%;
	}
	to{
		background-position: 60%, 0%;		
	}
}

.plant-text-full-two{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-color: #333333;
	background-image: repeating-linear-gradient(to right, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%), repeating-linear-gradient(to right,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, #25be09 60%, #91cf00 70%, #25be09 100%); /* 67af2c */
	background-size: 200%, 100%;
	background-position: 100%, 0%;
	background-repeat: no-repeat;
	white-space: nowrap;
}

.visibility-element-visible .plant-text-full-two{
	animation: plant-animation-two 1.66s ease-out;
	animation-fill-mode: forwards;
}

@keyframes plant-animation-two {
	from{
		background-position: 100%, 0%;
	}
	to{
		background-position: -100%, 0%;		
	}
}

.plant-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(90deg, #25be09, #91cf00, #25be09); /* 67af2c */
	white-space: nowrap;
}

.plant-text-left{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(90deg, #333333, #25be09);
	white-space: nowrap;
}

.plant-text-right{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(90deg, #25be09, #333333);
	white-space: nowrap;
}

.planet-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #0047d7, #00acd7, #0047d7);
	white-space: nowrap;
}

.planet-text-left{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #333333, #0047d7);
	white-space: nowrap;	
}

.learn-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-color: #afd8ba;
	background-image: repeating-linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.8));
	white-space: nowrap;
	animation: content-photo-background-animation 21s linear infinite;
}

.siri-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(90deg,  rgba(255, 134, 214, 0), rgba(59, 128, 255, 1), rgba(255, 134, 214, 0)), repeating-linear-gradient(90deg, #3b2da0, #d200ff, #ff00a8, #d200ff, #3b2da0);
	background-size: 300%, 100%;
	white-space: nowrap;
}

.visibility-element-visible .siri-text{
	animation: siri-animation 3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes siri-animation {
	from{
		background-position: 0%, 0%;
	}
	to{
		background-position: 100%, 0%;		
	}
}

.day-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #ea8625, #ffc000, #ea8625);
	white-space: nowrap;
}

.day-text-left{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #333333, #ea8625);
	white-space: nowrap;
}

.day-text-right{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #ea8625, #333333);
	white-space: nowrap;
}

.cloud-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #3391f0, #7bd6fc, #3391f0);
	white-space: nowrap;
}

.alert-text{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	color: #ff0000;
	animation: alert-animation 0.5s ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.alert-text-still{
	font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	color: #ff0000;
}

.wait-text{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	color: #ff9500;
}

.wait-static-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(90deg, #ff9500, #ff0000);
	background-repeat: no-repeat;
	white-space: nowrap;
}

.wait-title-text{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-color: #ff9500;
	background-image: repeating-linear-gradient(90deg, rgba(255,0,0,0), #ff0000, rgba(255,0,0,0));
	background-size: 200%, 100%;
	background-position: 200%, 0%;
	background-repeat: no-repeat;
	white-space: nowrap;
}

.visibility-element-visible .wait-title-text{
	animation: wait-animation 2s ease-out;
	animation-fill-mode: forwards;
}

@keyframes wait-animation {
	from{
		background-position: 200%, 0%;
	}
	to{
		background-position: 00%, 0%;		
	}
}

.wait-title-text-left{
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: repeating-linear-gradient(to right, #333333, #ff9500);
	white-space: nowrap;
}

.interactive-text{
	color: #007aff;
}

.italic{
	font-family: "HelveticaNeueMediumItalic", "HelveticaNeue-MediumItalic", "Helvetica Neue Medium Italic", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif !important; 
}

.content-section-feature-list{
	padding-top: 4em;
	display: table;
}

.content-section-feature{
	display: table-cell;
	width: 240px;
	padding-right: 20px;
}

.content-section-feature-title{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 24px;
	color: #333333;
	line-height: 1.25em;
}

.content-section-feature-paragraph{
	color: #666666;
	padding-top: 0.5em;
	padding-bottom: 3em;
	font-size: 16px;
}

.content-section-device-half, .content-section-device-half-bottom{
	height: 120vw;
	max-height: 660px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-origin: border-box;
	position: relative;
	overflow-y: hidden;
	width: 100%;
}

.content-section-device-half-bottom div{
	top: -235px;
}

.content-section-device-gradient-overlay{
	position: relative;
	margin-top: 235px;
	width: 100%;
	height: 100px;
	background: linear-gradient(180deg, rgba(255,255,255,1.0), rgba(255,255,255,0.0)), linear-gradient(180deg, rgba(255,255,255,1.0), rgba(255,255,255,0.0) 50%);
	z-index: 100;
}
/*
.content-section-container-photo .content-section-device-half{
	max-height: 660px !important;
}
*/

.content-section-device-ipad{
	height: 60vw;
	max-height: 790px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-origin: border-box;
	position: relative;
	overflow-y: hidden;
	width: 100%;
	max-width: 1108px;
	margin: 0px auto auto;
}

.content-section-container-photo .content-section-device-half, .content-section-device-half-bottom{
	max-height: 670px;
}

.content-section-device-half .app-slideshow-device-overlay, .content-section-device-half .app-slideshow-device-overlay-dark, .content-section-device-ipad .app-slideshow-device-overlay-ipad{
	background-position: center top;
}

.app-slideshow-device-video, .content-section-device-screenshot, .content-section-device-screenshot-animated{
	width: 100%;
	height: 776px;
	margin-top: 25px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: border-box;
	position: absolute;
	image-rendering: optimizeQuality;
}

#timer-video{
	margin-top: 23px;
}

.content-section-device-screenshot-animated{
	opacity: 0;
	animation: content-photo-screenshot-fade-animation 10s ease-out;
}

.content-section-device-ipad-screenshot{
	width: 100%;
	height: 100%;
	margin-top: 3.5%;
	background-size: 93%;
	background-repeat: no-repeat;
	background-position: center top;
	background-origin: border-box;
	position: absolute;
	opacity: 0;
	animation: content-photo-screenshot-fade-animation 10s ease-out;
	image-rendering: optimizeQuality;
}

#content-vision-section{
	height: 960px;
}

.new-badge{
	position: relative;
	margin-left: 1em;
	padding: 0.5em 0.75em 0.5em 0.75em;
	font-size: 14px;
	font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
	text-transform: uppercase;
	background-color: white;
	color: black;
	background: #ffaa00;
	top: -0.5em;
	border-radius: 2em;
/* 	display: none; */
}

.content-section-photo-section, .content-section-vision-section{
	position: relative;
	overflow: hidden;
	height: auto;
	width: auto;
/* 	display: flex; */
	background: linear-gradient(rgba(0,0,0,0.475), rgba(0,0,0,0));
	background-size: 100% 66%;
	background-position: center top;
	background-repeat: no-repeat;
	background-origin: border-box;
	transition: background-color 0.66s ease-in-out;
}

.content-section-vision-section{
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0));
	background-size: 100% 50%;
	background-position: center top;
	background-repeat: no-repeat;
	background-origin: border-box;
}

.content-section-blur{
	-webkit-backdrop-filter: blur(20px);
	-webkit-mask: linear-gradient(rgba(0,0,0,1.0) 0%, rgba(0,0,0,0) 50%);
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	bottom: 0px;
	z-index: -10;
}

.content-section-container-photo{
	z-index: 100;
}

.content-section-photo, .content-section-photo-vision{
	background-color: #999999;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-origin: border-box;
/* 	background-attachment: fixed; */
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	bottom: 0px;
	align-items: stretch;
	z-index: -10;
	animation: content-photo-fade-animation 10s ease-out, content-photo-zoom-animation 10s linear;
	opacity: 0;
	animation-fill-mode: forwards;
}

.content-section-photo-vision{
	image-rendering: optimizeQuality !important;
}

.content-section-vision-section .content-section-photo{
/* 	animation: none;
	opacity: 1; */
}

#photo-text-paragraph{
/*
	    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
*/
}

#photo-text-title{
	color: #e9ffef;
	animation: content-photo-text-animation 21s linear infinite;
}

#photo-text-paragraph, #photo-text-paragraph b{
	color: #e9ffef;
	animation: content-photo-text-animation 21s linear infinite;
}

.content-section-photo-section .content-section-paragraph b{
	/* Glow */
	text-shadow: rgba(0,0,0,1.0) 0px 0px 40px, rgba(255,255,255,0.66) 0px 0px 5px;
/* 	color: #FFFFFF !important; */
	animation: content-photo-text-highlight-animation 21s linear infinite !important;	
}

.content-section-photo-section .content-section-title{
	text-shadow: rgba(0,0,0,0.33) 0px 0px 40px;
	animation: content-photo-text-highlight-animation 21s linear infinite !important;	
}

.content-section-photo-section .content-section-paragraph{
	text-shadow: rgba(0,0,0,1.0) 0px 0px 40px;
}

.content-section-vision-section .content-section-paragraph b{
	/* Glow */
	text-shadow: rgba(0,0,0,1.0) 0px 0px 40px, rgba(255,255,255,0.66) 0px 0px 5px;
	color: #FFFFFF !important;
}

.content-section-vision-section .content-section-title{
	text-shadow: rgba(0,0,0,0.33) 0px 0px 40px;
	color: #FFFFFF !important;
}

.content-section-vision-section .content-section-paragraph{
	text-shadow: rgba(0,0,0,1.0) 0px 0px 40px;
	color: #FFFFFF !important;
}

#content-photo-first, #content-photo-vision-first{
	opacity: 1;
	animation: content-photo-zoom-animation 10s linear;
}

.link-chevron{
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	content: '';
	display: inline-block;
	height: 0.425em;
	width: 0.425em;
	position: relative;
	left: -0.225em;
	top: -0.1em;
	transform: rotate(45deg);
	vertical-align: middle;
}

/* !———————— */
/* !Scale Picker */
/* !———————— */

:root{
/* 	--scale-fg: #ffc400;
	--scale-bg: rgba(253, 245, 218, 1);
	--scale-bg-t: rgba(253, 245, 218, 0);
	--scale-option-opacity: 0.5; */
	--scale-fg: #007aff;
	--scale-bg: rgba(229, 242, 255, 1);
	--scale-bg-t: rgba(229, 242, 255, 0);
	--scale-option-opacity: 0.33;
}

.food-text{
	color: var(--scale-fg); // #007aff;
}

.scale-picker{
	display: inline-block;
	top: 23px;
	width: 56px;
	height: 71px;
	text-align: center;
	background-color: var(--scale-bg);
	border-radius: 11px;
	color: var(--scale-bg);
	overflow: hidden;
	position: relative;
}

.scale-picker-overlay{
	display: block;
	position: absolute;
	width: 38px;
	margin-left: 9px;
	height: 100%;
	background-image: linear-gradient(0deg, var(--scale-bg), var(--scale-bg-t) 30%, var(--scale-bg-t) 70%, var(--scale-bg));
	z-index: 10;
}

.scale-picker-options{
	display: block;
	padding-top: 15%;
}

.visibility-element-visible .scale-picker-options{
	animation: scale-animation 0.66s ease-in-out, scale-animation-2 0.66s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 1s, 2.5s;
}

.scale-picker-option{
	color: var(--scale-fg);
	display: block;
	text-align: center;
	width: 100%;
	height: 38px;
	opacity: var(--scale-option-opacity);
}

.scale-picker-options .option-1{
	opacity: 1.0;	
}

.visibility-element-visible .option-1{
	animation: scale-option-animation-out 0.66s ease-in-out;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.visibility-element-visible .option-2{
	animation: scale-option-animation-in 0.66s ease-in-out, scale-option-animation-out 0.66s ease-in-out;
	animation-delay: 1s, 2.5s;
	animation-fill-mode: forwards;
}

.visibility-element-visible .option-3{
	animation: scale-option-animation-in 0.66s ease-in-out;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
}

@keyframes scale-animation {
	0% {
		margin-top: 0%;
	}
	70% {
		margin-top: -72.5%;
	}
	100% {
		margin-top: -68.5%;
	}
}

@keyframes scale-animation-2 {
	0% {
		margin-top: -68.5%;
	}
	70% {
		margin-top: -141%;
	}
	100% {
		margin-top: -137%;
	}
}

@keyframes scale-option-animation-in {
	from{
		opacity: var(--scale-option-opacity);
	}
	to {
		opacity: 1.0;
	}
}

@keyframes scale-option-animation-out {
	from{
		opacity: 1.0;
	}
	to {
		opacity: var(--scale-option-opacity);
	}
}

/* !———————— */
/* !Slideshow */
/* !———————— */

#app-slideshow{
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-user-select: none;
	scroll-snap-type: x mandatory;
	white-space: nowrap;
	height: 828px;
	padding-bottom: 24px;
	font-size: 0px; /* Removes spacing between elements */
}

#app-slideshow-scrollview{
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	white-space: nowrap;
	height: 828px;
}

#app-slideshow-controls{
	position: relative;
	height: 828px;
	margin-top: -828px;
	white-space: nowrap;
	z-index: 100;
}

#app-slideshow-right, #app-slideshow-left{
	display: inline-block;
	width: 50%;
	height: 828px;
	margin: 0;
	padding: 0;
}

#app-slideshow-overlay-left{
	background: linear-gradient(to right, rgba(244,245,245,1.0), rgba(244,245,245,0.0));
	height: 828px;
	width: 80px;
	z-index: 100;
}

#app-slideshow-overlay-right{
	background: linear-gradient(to left, rgba(244,245,245,1.0), rgba(244,245,245,0.0));
	height: 828px;
	width: 80px;
	z-index: 100;
	float: right;
}

#app-slideshow-arrow-left, #app-slideshow-arrow-right{
	position: absolute;
	margin-left: 12px;
	margin-right: 12px;
	margin-top: 390px;
	width: 40px;
	height: 40px;
	border-top: 4px solid;
	border-left: 4px solid;
	border-color: rgba(0,0,0,0.2);
	transform: rotate(-45deg);
	cursor: pointer;
	transition: border-color 0.33s ease-in-out, opacity 0.33s ease-out;
	-webkit-user-select: none;
	opacity: 1;
}

#app-slideshow-arrow-left:hover, #app-slideshow-arrow-right:hover{
	border-color: rgba(0,0,0,0.4);
}

#app-slideshow-arrow-left{
	opacity: 0;
	cursor: default;
}

#app-slideshow-arrow-right{
	transform: rotate(135deg);
}

#app-slideshow-indicator{
	margin: 0px auto auto;
	width: 108px;
	height: 8px;
	padding-top: 0px;
	padding-bottom: 80px;
	-webkit-user-select: none;
}

.indicator-circle, .indicator-circle-selected{
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 2px;
	margin-right: 2px;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.1);
	transition: background-color 0.33s ease-in-out, transform 0.33s ease-in-out;
	transform: scale(0.66);
}

.indicator-circle-selected{
	background-color: rgba(0,0,0,0.33);
	transform: scale(1.0);
}

.app-slideshow-caption{
	position: absolute;
	text-align: center;
	bottom: -20px;
	width: 100%;
	padding-top: 40px;
	height: 40px;
	text-align: center;
}

/* iOS single caption */
#app-slideshow-caption{
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 16px;
	text-align: center;
	color: rgba(0,0,0,0.33);
	position: absolute;
	width: 100%;
	left: 0;
	margin-top: -72px;
	display: none;
	opacity: 1;
	transition: opacity 0.33s ease-out;
}

.app-slideshow-device{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 828px;
	transition: left 0.66s ease-in-out;
	left: 0;
	overflow: visible;
	margin: 0;
	padding: 0;
}

.app-slideshow-device-container{
	background: none;
}

.app-slideshow-device-overlay, .app-slideshow-device-overlay-dark, .app-slideshow-device-overlay-ipad{
	width: 100%;
	height: 826px;
	background-image: url(iphone-13-overlay.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	z-index: 10;
}

.app-slideshow-device-overlay-dark{
/* 	background-image: url(iphone-x-overlay-dark.png); */
}

.app-slideshow-device-overlay-ipad{
	background-image: url(ipad-pro-overlay-cropped.png);
	background-position: center top;
	height: 852px;
}

/* !———————— */
/* !Footer */
/* !———————— */

#footer{
	padding-top: 48px;
	padding-bottom: 36px;
	text-align: center;
	margin: 0px auto auto;
	width: 200px;
}

#social-links{
	display: block;
    height: 40px;
    width: 128px;
    margin: 16px auto auto;
}

#social-links-triple{
	display: block;
	height: 40px;
	width: 200px;
	margin: 16px auto auto;
}

.social-link{
    display: table-cell;
    width: 64px;
    height: 40px;
    background-size: 37px 37px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
	image-rendering: optimizeQuality;
}

#twitter{
	background-image: url(twitter_3x.png);
}

#instagram{
	background-image: url(instagram_3x.png);
    background-size: 40px 40px;
}

#bluesky{
	background-image: url(bluesky_3x.png);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.social-link{
		background: #000000;
		-webkit-mask-size: 37px 37px;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
	}
	
	#twitter{
		background: #000000;
	    -webkit-mask-image: url(twitter_3x.png);
	}
	
	#instagram{
		background: #000000;
	    -webkit-mask-image: url(instagram_3x.png);
		-webkit-mask-size: 40px 40px;
	}

	#bluesky{
		background: #000000;
		-webkit-mask-image: url(bluesky_3x.png);
		-webkit-mask-size: 40px 40px;
	}

	#twitter:hover{
	    background: #55aeec;
	}

	#instagram:hover{
	    background: #d93175;
	}
	
	#bluesky:hover{
		background: #0085ff;
	}
}

#footer-links{
	padding-bottom: 24px;
	text-align: center;
	margin: 0px auto auto;
	width: auto;
    font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; 
    font-weight: 500; 
    font-stretch: normal;
    font-size: 13px;
    text-align: center;
    color: #b7b7bd;
}

@supports(padding: max(0px)){
	#footer-links{
		padding-bottom: max(24px, env(safe-area-inset-bottom));
	}
}

.footer-link{
	padding-left: 8px;
	padding-right: 8px;
	color: #b7b7bd;
	text-decoration: none;
	transition: color 0.66s ease-in-out;
}

/*
.footer-link:hover{
	color: #333333;
}
*/

/* !———————— */
/* !Animations */
/* !———————— */

@keyframes header-border-animation {
    from { 
		border-bottom: 1px solid rgba(0,0,0,0.0);
	}
    to {
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
}

@keyframes header-photo-fade-animation {
    0% { 
	    opacity: 0; 
	}
    30%, 100% {
	    opacity: 1;
	}
}

@keyframes header-photo-container-fade-animation {
    0% { 
	    opacity: 0; 
	}
    30%, 100% {
	    opacity: 1;
	}
}

@keyframes header-photo-zoom-animation {
    from { transform: scale(1,1); }
    to { transform: scale(1.1,1.1); }
}

@keyframes logo-shadow-animation {
    from { 
	    -webkit-filter: drop-shadow(rgba(0,0,0,0.0) 0px 0px 40px);
	    text-shadow: rgba(0,0,0,0.0) 0px 0px 40px, rgba(0,0,0,0.0) 0px 0px 5px;
	}
    to { 
	    -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0px 0px 40px);
	    text-shadow: rgba(0,0,0,1.0) 0px 0px 40px, rgba(0,0,0,1.0) 0px 0px 40px, rgba(0,0,0,0.2) 0px 0px 5px;
	}
}

@keyframes logo-title-animation {
    from {color: #25be09;}
    to {color: #FFFFFF;}
}

@keyframes logo-image-animation {
    from {
	    opacity: 1;
	}
    to {
	    opacity: 0;
	}
}

@keyframes logo-opacity-animation {
    from {
	    opacity: 0;
	}
    to {
	    opacity: 1;
	}
}

@keyframes arrow-animation {
    from {
	    opacity: 0;
	    bottom: 0px;
	}
    to {
	    opacity: 1;
	    bottom: 20px;
	}
}

@keyframes content-text-animation {
    from {
	    opacity: 0;
    	transform: translateY(16px);
	}
    to {
	    opacity: 1;
    	transform: translateY(0em);
	}
}

@keyframes content-photo-fade-animation {
    0% { 
	    opacity: 0; 
	}
    30%, 100% {
	    opacity: 1;
	}
}

@keyframes content-photo-zoom-animation {
    from { transform: scale(1,1); }
    to { transform: scale(1.1,1.1); }
}

@keyframes content-photo-screenshot-fade-animation {
    0% { 
	    opacity: 0; 
	}
    20%, 100% {
	    opacity: 1;
	}
}

@keyframes content-photo-text-animation{
	/* 
	0%, 19%, 100% {
		color: #b9e5c7;
	}
	33%, 52% {
		color: #b6dfe3;
	}
	66%, 85% {
		color: #cddddd;
	} 
	*/

	0%, 19%, 100% {
		color: #e9ffef;
	}
	33%, 52% {
		color: #e5fcfe;
	}
	66%, 85% {
		color: #ffffff;
	}
}

@keyframes content-photo-text-highlight-animation{
	0%, 19%, 100% {
		color: #e9ffef;
	}
	33%, 52% {
		color: #e5fcfe;
	}
	66%, 85% {
		color: #ffffff;
	}
}

@keyframes content-photo-background-animation{
	0%, 19%, 100% {
		background-color: #7cb28d;
	}
	33%, 52% {
		background-color: #69a9af;
	}
	66%, 85% {
		background-color: #9eaaaa;
	}
}

@keyframes alert-animation{
	from {
		color: #ff0000;
	}
	to{
		color: #ff9500;
	}
}

@keyframes app-clip-animation{
	from {
		transform: translateY(0px);
	}
	to{
		transform: translateY(8px);
	}
}

/* !———————— */
/* !Narrow width */
/* !———————— */

@media screen and (max-width: 900px){
	.content-section-title{
		font-size: 30px;
	}
	
	.content-section-paragraph{
		max-width: 560px;
		font-size: 20px;
		line-height: 2em; /* 2em compact */
	}	
	
	.new-badge{
		font-size: 10px;
	}
	
	#header-logo-title{
		font-size: 30px;
	}
	
	#header-logo-image{
		margin-bottom: 18px;
		height: 120px;
	}
	
	#corner-logo{
		font-size: 18px;
		margin: 20px;
		height: 32px;
		padding-left: 26px;
		background-size: auto 80%;
	}
	
	.content-section-container{
		width: auto;
		max-width: 640px;
	}
	
	.content-section-photo-section{
		background-color: rgba(0,0,0,0.3);
	}
	
	#header-arrow{
		position: absolute;
		margin-left: -15px;
		bottom: 15px;
		width: 30px;
		height: 30px;
		border-top: 2.5px solid;
		border-right: 2.5px solid;
		border-color: white;
	}
	
	@keyframes arrow-animation {
	    from {
		    opacity: 0;
		    bottom: 0px;
		}
	    to {
		    opacity: 1;
		    bottom: 15px;
		}
	}
	
	#header-app-clip-code{
		width: 150px;
		height: 150px;
		border-radius: 75px;
	}
	
	.scale-picker{
		top: 19px;
		width: 44px;
		height: 58px;
		border-radius: 8px;
	}
	
	.scale-picker-overlay{
		width: 30px;
		margin-left: 7px;
	}
	
	.scale-picker-option{
		height: 30px;
	}
	
	#content-vision-section{
		height: 900px;
	}
	
	.content-section-paragraph-compact{
		display: block;
	}
	
	.content-section-paragraph-standardwidth{
		display: none;	
	}
}

/* !———————— */
/* !iPhone (device) */
/* !———————— */

@media screen and (max-device-width: 480px){
	.padding-special-section{
		padding-left: 0px;
		padding-right: 0px;
	}
	
	@supports(padding: max(0px)) {
		.padding-special-section .content-section-title, .padding-special-section .content-section-paragraph{
			padding-left: max(24px, env(safe-area-inset-left));
			padding-right: max(24px, env(safe-area-inset-right));
		}
	}

	#app-slideshow-scrollview{
		overflow-x: scroll;
		scroll-snap-type: mandatory;
		scroll-snap-destination: 0% 100%;
		scroll-snap-points-x: repeat(100%);
		padding-bottom: 20vw;
	}

	.app-slideshow-device{
		scroll-snap-align: start;	
	}
	
	#app-slideshow-controls{
		display: none;
	}
	
	/* iOS Caption */
	
	#app-slideshow-caption{ 
		display: block;
	}
	
	/* Turn off text shadows on iPhone for performance */
	
	.content-section-photo-section .content-section-paragraph b{
		text-shadow: none;
	}

	.content-section-photo-section .content-section-title{
		text-shadow: none;
	}

	.content-section-photo-section .content-section-paragraph{
		text-shadow: none;
	}
	
	.appclip-badge{
		display: none;
	}
}

/* !———————— */
/* !iOS */
/* !———————— */

@supports (-webkit-touch-callout: none) {
	.content-section-photo-section .content-section-paragraph b{
		text-shadow: none;
	}

	.content-section-photo-section .content-section-title{
		text-shadow: none;
	}

	.content-section-photo-section .content-section-paragraph{
		text-shadow: none;
	}
}

/* !———————— */
/* !iPhone (portrait screen) */
/* !———————— */

@media screen and (max-width: 480px){
	#app-slideshow{
		height: 600px;
	}
	
	#app-slideshow-scrollview{
		height: 620px;
	}

	.app-slideshow-device{
		height: 600px;
	}

	.app-slideshow-device-video, .content-section-device-screenshot, .content-section-device-screenshot-animated{
		height: 564px;
		margin-top: 18px;
	}
	
	#timer-video{
		margin-top: 16px;
	}

	.app-slideshow-device-overlay, .app-slideshow-device-overlay-dark{
		height: 600px;
	}
	
	.content-section-device-half-bottom div{
		top: -200px;
	}
	
	.content-section-device-gradient-overlay{
		margin-top: 200px;
	}
}