:root {
	--background-color: #F2F2F2;
	--text-color: #1B1B1B;
	--card-background-color: #E5E5EA;
	--side-padding: 80px;
	--iphone-bezel-aspect-ratio: calc(946 / 1864);

	@media screen and (max-width: 768px) {
		--side-padding: 20px;
	}
}

html,
body {
	display: flex;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	background-color: var(--background-color);
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

body, input, button, select, textarea {
	font-family: system-ui, -apple-system, "Helvetica Neue", "Arial", sans-serif;
	color: var(--text-color);
}

.main {
	height: 100%;
	width: 100%;
	max-width: 1000px;
	overflow-x: clip;
}

.main a, a:visited, a:hover, a:active, a:focus {
    color: #298FA3;
    text-decoration: none;
}

.main a:hover {
    text-decoration: underline;
}

.header {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding: 0 var(--side-padding);
	box-sizing: border-box;

	.logo {
		display: flex;
		align-items: center;
		gap: 12px;
		font-weight: 900;
		font-size: 22px;

		.icon {
			width: 38px;
			height: 38px;
		}
	}

	nav {
		ul {
			display: flex;
			gap: 28px;

			li {
				list-style: none;

				a {
					text-decoration: none;
					color: var(--text-color);
					font-size: 18px;
					font-weight: 500;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.header {
		margin-top: 8px;

		.logo {
			font-size: 18px;

			.icon {
				width: 32px;
				height: 32px;
			}
		}

		nav {
			ul {
				gap: 20px;

				li {
					&.press-kit-item{
						display: none;
					}

					a {
						font-size: 14px;
					}
				}
			}
		}
	}
}

.intro-section {
	display: grid;
	grid-template-columns: 0.48fr 0.52fr;
	grid-template-rows: fit-content(100%);
	grid-template-areas: "description widget";
	gap: 0;
	margin-top: 70px;

	.description {
		grid-area: description;
		position: relative;
		padding-left: 40px;

		p {
			font-size: 20px;
			font-weight: 400;
			line-height: 140%;
			padding-left: 40px;
			padding-right: 60px;
			margin-top: 0;
		}

		h1 {
			padding-left: 40px;
		}
	}

	.widget {
		grid-area: widget;
		display: flex;
		justify-content: center;
		align-items: start;
		padding: 40px 20px 0 35px;
		pointer-events: none;
	}
}

@media screen and (max-width: 768px) {
	.intro-section {
		grid-template-columns: 1fr;
		grid-template-rows: fit-content(100%) fit-content(100%);
		grid-template-areas:
			"description"
			"widget";
		justify-items: center;
		margin-top: 40px;

		.description {
			padding: 0 var(--side-padding);
			display: flex;
			flex-direction: column;
			align-items: center;

			p {
				padding: 0 16px;
				max-width: 400px;
				text-align: center;
			}
		}

		.widget {
			width: 100%;
			max-width: 450px;
			padding: 0;
		}
	}
}

.iphone-fade-container-bottom {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.iphone-fade-container-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--background-color, white) 100%);
  pointer-events: none;
}

.iphone-fade-container-both {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.iphone-fade-container-both::after {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
  background: linear-gradient(
    to bottom,
    var(--card-background-color, white) 0%,
    rgba(255, 255, 255, 0) 15%,
    rgba(255, 255, 255, 0) 85%,
    var(--card-background-color, white) 100%
  );
  pointer-events: none;
}

.download-section-top {
	padding: 0 var(--side-padding);
	margin-top: 20px;

	> a:link,
	> a:visited {
		display: block;
		text-decoration: none;
		width: 180px;

		img {
			width: 100%;
			height: auto;
		}
	}
}

@media screen and (max-width: 768px) {
	.download-section-top {
		margin-top: 48px;
		display: flex;
		justify-content: center;
	}
}


.steps-section {
	--iphone-bezel-width: 340px;

	padding: 0 var(--side-padding);
	margin-top: 120px;
	display: grid;
	grid-template-columns: var(--iphone-bezel-width) auto;
	grid-template-rows: auto min(calc(var(--iphone-bezel-width) / var(--iphone-bezel-aspect-ratio)));
	grid-template-areas:
		"video title"
		"video steps";
	column-gap: 60px;
	box-sizing: border-box;

	.iphone-frame {
		grid-area: video;
	}

	.title {
		grid-area: title;
		margin: 0;
		font-size: 38px;
		font-weight: 900;
		line-height: 120%;
		padding-top: 18px;
	}

	.step-list {
		grid-area: steps;
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 40px;

		.step {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 14px;
			background-color: var(--card-background-color);
			border-radius: 16px;
			padding: 20px 34px 34px 20px;

			.step-icon {
				width: 24px;
				height: 24px;

				&.bulb {
					width: 27px;
					height: 27px;
				}
			}

			.step-description {
				font-size: 18px;
				line-height: 125%;
				margin: 0;
			}

			.step-arrow {
				position: absolute;
				z-index: 1;
				bottom: -45px;
				right: -72px;
				width: 88px;
				height: 76px;
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.steps-section {
		grid-template-columns: auto var(--iphone-bezel-width) auto;
		grid-template-rows: auto min(calc(var(--iphone-bezel-width) / var(--iphone-bezel-aspect-ratio))) auto;
		grid-template-areas:
			"title title title"
			". video ."
			"steps steps steps";
		column-gap: 0;
		row-gap: 0;

		.title {
			text-align: center;
			margin-bottom: 30px;
		}
	}
}

@media screen and (max-width: 768px) {
	.steps-section {
		row-gap: 0;
		margin-top: 100px;

		.title {
			text-align: start;
			padding-left: 33px;
			margin-bottom: 20px;
		}

		.step-list {
			.step {
				.step-arrow {
					right: -32px;
				}
			}
		}
	}
}

.widgets-section-padding-container {
	padding: 0 var(--side-padding);
	margin-top: 120px;
}

.widgets-section {
	--iphone-bezel-width: 400px;

	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"iphone info";
	column-gap: 0;
	justify-items: center;
	background-color: var(--card-background-color);
	border-radius: 32px;
	overflow: clip;
	padding: 30px 30px 30px 10px;
	box-shadow: inset 0px -4px 4px 0px rgba(46, 46, 56, 0.03);

	.info {
		grid-area: info;

		.title {
			font-size: 38px;
			font-weight: 900;
			margin-top: 40px;
			margin-bottom: 8px;
		}

		.description {
			font-size: 20px;
			font-weight: 400;
			line-height: 140%;
			max-width: 300px;
			margin: 0;
		}
	}

	.iphone {
		grid-area: iphone;
		width: var(--iphone-bezel-width);
		height: 300px;

		.iphone-frame {
			.iphone-content {
				.spinner {
					top: calc(26% - 12px);
				}
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.widgets-section-padding-container {
		margin-top: 100px;
	}

	.widgets-section {
		--iphone-bezel-width: 300px;

		.info {
			.description {
				font-size: 18px;
				max-width: 230px;
			}
		}

		.iphone {
			height: 260px;

			.iphone-frame {
				.iphone-content {
					.demo-video {
						border-radius: 32px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.widgets-section-padding-container {
		padding: 0;
	}

	.widgets-section {
		--iphone-bezel-width: 330px;

		grid-template-columns: 100%;
		grid-template-rows: auto auto;
		grid-template-areas:
			"info"
			"iphone";
		padding: 10px;
		row-gap: 20px;
		border-radius: 0;

		.info {
			.title {
				margin-top: 30px;
			}

			.description {
				max-width: 260px;
			}
		}
	}
}

.values-section {
	padding: 0 var(--side-padding);
	margin-top: 120px;

	>.title {
		font-size: 38px;
		font-weight: 900;
		margin-bottom: 24px;
		line-height: 115%;
	}

	.value-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 38px;

		.value {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14px;
			background-color: var(--card-background-color);
			border-radius: 14px;
			text-align: center;
			padding: 32px 32px 34px 32px;

			.icon {
				height: 28px;
				width: auto;
			}

			.title {
				font-size: 16px;
				font-weight: 900;
			}

			.description {
				font-size: 16px;
				font-weight: 400;
			}
		}
	}
}

@media screen and (max-width: 900px) {
	.values-section {
		.value-list {
			column-gap: 24px;

			.value {
				padding: 22px 18px 24px 18px;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.values-section {
		.value-list {
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, auto);
			row-gap: 24px;

			.value {
				padding: 28px 65px 32px 65px;
			}
		}
	}
}

.download-section-bottom {
	padding: 0 var(--side-padding);
	margin-top: 120px;
	display: flex;
	justify-content: center;

	> a:link,
	> a:visited {
		display: block;
		text-decoration: none;
		width: 180px;

		img {
			width: 100%;
			height: auto;
		}
	}
}

@media screen and (max-width: 768px) {
	.download-section-bottom {
		margin-top: 100px;
	}
}

.questions-section {
	padding: 0 var(--side-padding);
	margin-top: 120px;
	position: relative;

	.title {
		font-size: 38px;
		font-weight: 900;
		margin-bottom: 24px;
		line-height: 115%;
	}

	.question-list {
		display: flex;
		flex-direction: column;
		gap: 30px;
		margin-bottom: 30px;

		.question {
			.question-title {
				font-size: 18px;
				font-weight: 700;
				margin-bottom: 6px;
			}

			.question-answer {
				font-size: 18px;
				font-weight: 400;
			}
		}
	}
}

.footer-padding-container {
	padding: 0 var(--side-padding);
	margin-top: 100px;
}

.footer {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto;
	grid-template-areas: "link-list . signature";
	background-color: var(--card-background-color);
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	padding: 48px 38px 40px 38px;

	.link-list {
		grid-area: link-list;
		display: grid;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: auto;
		gap: 20px;

		.link:link,
		.link:visited {
			font-size: 16px;
			font-weight: 600;
			text-decoration: none;
			color: #8E8E93;
		}
	}

	.signature {
		grid-area: signature;
		font-size: 16px;
		font-weight: 400;
		text-align: end;
		color: #8E8E93;
	}
}

@media screen and (max-width: 900px) {
	.footer {
		grid-template-columns: 100%;
		grid-template-rows: repeat(2, auto);
		grid-template-areas:
			"link-list"
			"signature";
		justify-items: center;
		row-gap: 30px;

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

@media screen and (max-width: 768px) {
	.footer-padding-container {
		padding: 0;
	}

	.footer {
		border-radius: 0;
		justify-items: start;
		row-gap: 34px;
		padding: 34px var(--side-padding) 40px var(--side-padding);

		.link-list {
			grid-template-columns: auto;
			grid-template-rows: repeat(4, auto);
			justify-items: start;
			row-gap: 10px;
		}


	}
}