.screens-product {
	--screens-max-width: 1240px;
	--screens-text-width: 560px;

	--screens-radius-large: 30px;
	--screens-radius-medium: 22px;

	--screens-border: rgba(128, 128, 128, 0.15);

	width: min(var(--screens-max-width), calc(100% - 40px));
	margin: 0 auto;
	padding: 36px 0 80px;
}

.screens-product *,
.screens-product *::before,
.screens-product *::after {
	box-sizing: border-box;
}

.screens-product img {
	display: block;
	max-width: 100%;
	height: auto;
}

.screens-product h1,
.screens-product h2,
.screens-product h3,
.screens-product p {
	margin-top: 0;
}

.screens-product p {
	line-height: 1.6;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.screens-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(40px, 6vw, 80px);

	padding:
		clamp(25px, 4vw, 55px)
		0
		clamp(55px, 7vw, 90px);
}

.screens-hero-copy,
.screens-hero-copy h1,
.screens-hero-copy p,
.screens-hero-lead {
	text-align: left !important;
}

.screens-product-title {
	display: flex;
	align-items: center;

	gap: 13px;
	margin-bottom: 24px;

	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
	font-weight: 700;
}

.screens-app-icon {
	width: 54px;
	height: 54px;
	border-radius: 13px;
}

.screens-hero h1 {
	margin-bottom: 22px;

	font-size: clamp(3.1rem, 6vw, 5.6rem);
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.screens-hero-lead {
	max-width: 700px;
	margin: 0 0 28px;

	font-size: clamp(1.1rem, 1.7vw, 1.32rem);
	line-height: 1.5 !important;
}

.screens-hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 16px 22px;
}

.screens-hero-actions .button,
.screens-inline-cta .button,
.screens-final-cta .button {
	width: auto;
	height: 52px;
}

.screens-trial-note {
	margin: 0;

	font-size: 0.92rem;
	opacity: 0.68;
}

.screens-hero-visual img {
	width: 100%;
}


/* ---------------------------------------------------------
   VALUE STRIP
   --------------------------------------------------------- */

.screens-value-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	margin-bottom: clamp(70px, 9vw, 120px);

	border: 1px solid var(--screens-border);
	border-radius: var(--screens-radius-large);

	overflow: hidden;
}

.screens-value-strip > div {
	position: relative;

	padding: 30px 34px;

	text-align: left;
}

.screens-value-strip > div:nth-child(1) {
	background:
		linear-gradient(
			145deg,
			rgba(0, 122, 255, 0.07),
			rgba(0, 122, 255, 0.015)
		);
}

.screens-value-strip > div:nth-child(2) {
	background:
		linear-gradient(
			145deg,
			rgba(130, 90, 255, 0.07),
			rgba(130, 90, 255, 0.015)
		);
}

.screens-value-strip > div:nth-child(3) {
	background:
		linear-gradient(
			145deg,
			rgba(255, 160, 40, 0.07),
			rgba(255, 160, 40, 0.015)
		);
}

.screens-value-strip > div::before {
	content: "";

	display: block;

	width: 34px;
	height: 4px;
	margin-bottom: 18px;

	border-radius: 999px;
}

.screens-value-strip > div:nth-child(1)::before {
	background: linear-gradient(90deg, #0a84ff, #64d2ff);
}

.screens-value-strip > div:nth-child(2)::before {
	background: linear-gradient(90deg, #7d5cff, #bf5af2);
}

.screens-value-strip > div:nth-child(3)::before {
	background: linear-gradient(90deg, #ff9f0a, #ffd60a);
}

.screens-value-strip strong,
.screens-value-strip span {
	display: block !important;
	text-align: left !important;
}

.screens-value-strip strong {
	margin-bottom: 7px;

	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.25;
}

.screens-value-strip span {
	font-size: 0.94rem;
	line-height: 1.45;

	opacity: 0.68;
}


/* ---------------------------------------------------------
   MAIN FEATURE SECTIONS
   --------------------------------------------------------- */

.screens-section {
	margin: clamp(75px, 10vw, 125px) 0;
}

.screens-feature {
	display: grid;
	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(0, 0.92fr);

	align-items: center;

	gap: clamp(45px, 7vw, 90px);
}

.screens-feature-reversed {
	grid-template-columns:
		minmax(0, 0.92fr)
		minmax(0, 1.08fr);
}

.screens-feature-reversed .screens-feature-media {
	order: 2;
}

.screens-feature-reversed .screens-feature-copy {
	order: 1;
}

.screens-feature-media {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
}

.screens-feature-media img {
	width: 100%;
	max-height: 680px;

	object-fit: contain;
}

.screens-feature-copy {
	width: 100%;
	max-width: var(--screens-text-width);

	text-align: left !important;
}

.screens-feature-copy h1,
.screens-feature-copy h2,
.screens-feature-copy h3,
.screens-feature-copy p,
.screens-feature-copy ul,
.screens-feature-copy ol,
.screens-feature-copy li,
.screens-feature-copy .screens-eyebrow {
	text-align: left !important;
}

.screens-eyebrow {
	display: inline-block;

	margin-bottom: 12px !important;

	font-size: 0.76rem;
	font-weight: 750;

	letter-spacing: 0.12em;
	text-transform: uppercase;

	background:
		linear-gradient(
			90deg,
			#bf5af2,
			#8e5cff
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
	color: transparent;
}

.screens-feature-copy h2 {
	margin-bottom: 20px;

	font-size: clamp(2.35rem, 4vw, 3.55rem);
	line-height: 1.07;

	letter-spacing: -0.04em;
}

.screens-feature-copy p {
	margin-bottom: 19px;

	font-size: clamp(1rem, 1.25vw, 1.1rem);
	line-height: 1.62;
}

.screens-feature-copy p:last-child {
	margin-bottom: 0;
}


/* ---------------------------------------------------------
   CHECK LISTS
   --------------------------------------------------------- */

.screens-check-list {
	width: 100%;

	margin: 28px 0 0;
	padding: 0;

	list-style: none;

	text-align: left !important;
}

.screens-check-list li {
	position: relative;

	margin: 11px 0;
	padding-left: 28px;

	font-size: 0.98rem;
	line-height: 1.5;

	text-align: left !important;
}

.screens-check-list li::before {
	content: "✓";

	position: absolute;
	left: 0;
	top: 0;

	font-weight: 700;
}


/* ---------------------------------------------------------
   REMOTE ACCESS MEDIA
   --------------------------------------------------------- */

.remote-access-media {
	position: relative;

	padding: 40px 20px;

	isolation: isolate;
	overflow: hidden;
}

.remote-access-media::before {
	content: "";

	position: absolute;
	inset: 0;

	background-image: url("https://help.edovia.com/images/articles/world-map@2x.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	z-index: -1;
	pointer-events: none;
}

.remote-access-media img {
	position: relative;

	width: 85%;
	max-width: 100%;
	margin: 0 auto;

	z-index: 1;
}


/* ---------------------------------------------------------
   SPOTLIGHT REVIEW
   --------------------------------------------------------- */

.screens-spotlight-review {
	max-width: 820px;

	margin: clamp(75px, 9vw, 115px) auto;
	padding: 0 24px;

	text-align: center !important;
}

.screens-product .screens-spotlight-review blockquote {
	display: block;
	position: static;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	background: none;

	box-shadow: none;

	color: inherit;

	font-family: inherit;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	font-style: normal;
	font-weight: 500;

	line-height: 1.4;
	letter-spacing: -0.02em;

	text-align: center !important;
}

.screens-product .screens-spotlight-review blockquote::before,
.screens-product .screens-spotlight-review blockquote::after {
	display: none;
	content: none;
}

.screens-spotlight-review .stars,
.screens-review-card .stars {
	background:
		linear-gradient(
			90deg,
			#ff9f0a 0%,
			#ffc72c 45%,
			#ffe066 70%,
			#ffb000 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
	color: transparent;
}

.screens-spotlight-review .stars {
	display: inline-block;

	margin: 0 0 22px;

	font-size: 1.25rem;
	font-weight: 700;

	line-height: 1;
	letter-spacing: 0.08em;
}

.screens-spotlight-review > p {
	margin: 22px 0 0;

	font-size: 0.96rem;
	font-weight: 500;

	text-align: center !important;

	opacity: 0.56;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.screens-inline-cta,
.screens-final-cta {
	border: 1px solid var(--screens-border);
	border-radius: var(--screens-radius-large);

	background:
		linear-gradient(
			135deg,
			rgba(0, 122, 255, 0.055),
			rgba(100, 85, 255, 0.028)
		);
}

.screens-inline-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 28px;

	margin: clamp(75px, 10vw, 120px) 0;

	padding: clamp(28px, 4vw, 45px);
}

.screens-product .screens-inline-cta,
.screens-product .screens-inline-cta > div,
.screens-product .screens-inline-cta h2,
.screens-product .screens-inline-cta p {
	text-align: left !important;
}

.screens-product .screens-inline-cta h2,
.screens-product .screens-inline-cta p {
	margin-left: 0;
	margin-right: 0;
}

.screens-inline-cta h2 {
	margin-bottom: 7px;

	font-size: clamp(1.75rem, 2.6vw, 2.35rem);
	letter-spacing: -0.03em;
}

.screens-inline-cta p {
	margin: 0;

	font-size: 0.98rem;

	opacity: 0.7;
}

.screens-final-cta {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: 25px;

	padding: clamp(30px, 4vw, 48px);
}

.screens-final-icon {
	width: 80px;
	height: 80px;

	border-radius: 19px;
}

.screens-final-cta > div,
.screens-final-cta h2,
.screens-final-cta p {
	text-align: left !important;
}

.screens-final-cta h2 {
	margin-bottom: 5px;

	font-size: clamp(1.9rem, 3vw, 2.65rem);

	letter-spacing: -0.035em;
}

.screens-final-cta p {
	margin: 6px 0 0;

	font-size: 0.98rem;

	opacity: 0.7;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

.screens-section-heading,
.screens-apple-heading {
	max-width: 1000px;

	margin: 0 auto 44px;

	text-align: center !important;
}

.screens-section-heading h2,
.screens-apple-heading h2 {
	margin-bottom: 16px;

	font-size: clamp(2.25rem, 3.8vw, 3.35rem);
	line-height: 1.06;

	letter-spacing: -0.04em;

	text-align: center !important;
}

.screens-section-heading > p:last-child,
.screens-apple-heading > p:last-child {
	max-width: 760px;

	margin-left: auto;
	margin-right: auto;

	font-size: 1rem;
	line-height: 1.55;

	text-align: center !important;

	opacity: 0.7;
}


/* ---------------------------------------------------------
   APPLE INTEGRATION
   --------------------------------------------------------- */

.screens-apple-section {
	margin: clamp(85px, 11vw, 135px) 0;
}

.screens-apple-layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr);

	align-items: center;

	gap: 46px;
}

.screens-apple-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.screens-apple-image img {
	width: 100%;
	max-height: 620px;

	object-fit: contain;
}

.screens-mini-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 14px;
}

.screens-mini-card {
	padding: 22px;

	border: 1px solid rgba(90, 115, 255, 0.14);
	border-radius: var(--screens-radius-medium);

	background:
		linear-gradient(
			145deg,
			rgba(80, 140, 255, 0.09) 0%,
			rgba(110, 80, 255, 0.05) 55%,
			rgba(190, 70, 255, 0.025) 100%
		);

	text-align: left !important;
}

.screens-mini-card h3,
.screens-mini-card p {
	text-align: left !important;
}

/* ---------------------------------------------------------
   CARD ICONS
   --------------------------------------------------------- */

.screens-mini-card h3,
.screens-power-grid article h3 {
	display: flex;
	align-items: center;
	gap: 9px;
}

.screens-card-icon {
	display: block;

	width: 20px;
	height: 20px;
	flex: 0 0 20px;

	object-fit: contain;

	/* PNG source is black in light mode */
	filter: none;
}

@media (prefers-color-scheme: dark) {
	.screens-mini-icon {
		/* Black → white */
		filter: invert(1);
	}
	
	.screens-card-icon {
		filter: invert(1);
	}
}

.screens-mini-card p {
	margin: 0;

	font-size: 0.9rem;
	line-height: 1.5;

	opacity: 0.72;
}


/* ---------------------------------------------------------
   POWER FEATURES
   --------------------------------------------------------- */

.screens-power {
	margin: clamp(85px, 11vw, 135px) 0;
}

.screens-power-grid {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 16px;
}

.screens-power-grid article {
	display: block;

	padding: 24px;

	border: 1px solid rgba(75, 115, 255, 0.14);
	border-radius: var(--screens-radius-medium);

	background:
		linear-gradient(
			145deg,
			rgba(62, 142, 255, 0.09) 0%,
			rgba(91, 90, 255, 0.055) 50%,
			rgba(171, 75, 255, 0.025) 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08);

	text-align: left !important;
}

.screens-power-grid article h3,
.screens-power-grid article p {
	width: 100%;
	text-align: left !important;
}

.screens-power-grid article p {
	display: block;
}

.screens-power-grid h3 {
	margin: 0 0 10px;

	font-size: 1rem;
	font-weight: 650;
	line-height: 1.25;
}

.screens-power-grid p {
	margin: 0;

	font-size: 0.9rem;
	line-height: 1.5;

	opacity: 0.74;
}


/* ---------------------------------------------------------
   REVIEWS
   --------------------------------------------------------- */

.screens-reviews {
	margin: clamp(85px, 11vw, 135px) 0;
}

.screens-reviews-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px;

	max-width: 1040px;

	margin: 0 auto;
}

.screens-review-card {
	display: flex;
	flex-direction: column;

	padding: 28px;

	border: 1px solid rgba(220, 160, 20, 0.16);
	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 209, 85, 0.09) 0%,
			rgba(255, 178, 45, 0.045) 48%,
			rgba(255, 245, 190, 0.018) 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.09);

	text-align: left !important;
}

.screens-review-card h3,
.screens-review-card p,
.screens-review-card span,
.screens-review-card .stars {
	text-align: left !important;
}

.screens-review-card .stars {
	display: inline-block;
	align-self: flex-start;

	margin: 0 0 20px;

	font-size: 1.05rem;
	font-weight: 700;

	line-height: 1;
	letter-spacing: 0.06em;
}

.screens-review-card h3 {
	margin: 0 0 14px;

	font-size: 1.06rem;
	font-weight: 650;
	line-height: 1.3;

	letter-spacing: -0.01em;
}

.screens-review-card p {
	margin: 0 0 22px;

	font-size: 0.95rem;
	line-height: 1.55;

	opacity: 0.8;
}

.screens-review-card span {
	display: block;

	margin-top: auto;
	padding-top: 4px;

	font-size: 0.88rem;
	font-weight: 500;

	opacity: 0.55;
}


/* ---------------------------------------------------------
   REQUIREMENTS
   --------------------------------------------------------- */

.screens-requirements {
	max-width: 1040px;

	margin: 70px auto 0;
	padding: 34px 38px;

	border: 1px solid rgba(128, 128, 128, 0.12);
	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			rgba(120, 90, 255, 0.035),
			rgba(0, 122, 255, 0.018)
		);

	color: inherit;
}

.screens-requirements h3 {
	margin: 0 0 12px;

	font-size: 1.15rem;
	font-weight: 650;
	line-height: 1.3;

	text-align: left !important;
}

.screens-requirements .screens-minimum {
	margin: 0 0 26px;

	font-size: 0.96rem;
	line-height: 1.5;

	text-align: left !important;

	opacity: 0.7;
}

.screens-requirements-content {
	padding-top: 24px;

	border-top: 1px solid rgba(128, 128, 128, 0.12);
}

.screens-requirements-content ul {
	margin: 0;
	padding-left: 20px;
}

.screens-requirements-content li {
	margin: 7px 0;

	font-size: 0.88rem;
	line-height: 1.5;

	text-align: left !important;

	opacity: 0.7;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

	.screens-product {
		width: min(100% - 32px, var(--screens-max-width));
	}

	.screens-hero {
		grid-template-columns: 1fr;
	}

	.screens-hero-copy {
		max-width: 760px;
		margin: 0 auto;
	}

	.screens-hero-visual {
		max-width: 760px;
		margin: 0 auto;
	}

	.screens-product-title,
	.screens-hero-actions {
		justify-content: center;
	}

	.screens-value-strip {
		grid-template-columns: 1fr;
	}

	.screens-value-strip > div + div {
		border-left: 0;
		border-top: 1px solid var(--screens-border);
	}

	.screens-feature,
	.screens-feature-reversed {
		grid-template-columns: 1fr;

		gap: 34px;
	}

	.screens-feature-media,
	.screens-feature-reversed .screens-feature-media {
		order: 1;
	}

	.screens-feature-copy,
	.screens-feature-reversed .screens-feature-copy {
		order: 2;

		max-width: 680px;

		margin: 0 auto;
	}

	.screens-feature-media img {
		width: min(100%, 720px);
		max-height: 560px;
	}

	.screens-apple-layout {
		grid-template-columns: 1fr;
	}

	.screens-apple-image {
		max-width: 700px;
		margin: 0 auto;
	}

	.screens-power-grid,
	.screens-reviews-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 600px) {

	.screens-product {
		width: min(100% - 24px, var(--screens-max-width));
		padding-top: 20px;
	}

	.screens-hero {
		padding-top: 24px;

		gap: 34px;
	}

	.screens-hero h1 {
		font-size: clamp(2.9rem, 15vw, 4.25rem);
	}

	.screens-hero-lead {
		font-size: 1.05rem;
	}

	.screens-product-title {
		margin-bottom: 20px;
	}

	.screens-app-icon {
		width: 48px;
		height: 48px;
	}

	.screens-hero-actions {
		flex-direction: column;
	}

	.screens-section {
		margin: 75px 0;
	}

	.screens-feature-copy h2 {
		font-size: clamp(2.1rem, 10vw, 2.75rem);
	}

	.screens-feature-copy p {
		font-size: 1rem;
	}

	.screens-section-heading h2,
	.screens-apple-heading h2 {
		font-size: clamp(2rem, 9vw, 2.7rem);
	}

	.screens-inline-cta {
		align-items: flex-start;
		flex-direction: column;
	}

	.screens-mini-grid,
	.screens-power-grid,
	.screens-reviews-grid {
		grid-template-columns: 1fr;
	}

	.screens-mini-card {
		padding: 21px;
	}

	.screens-power-grid article {
		padding: 22px;
	}

	.screens-review-card {
		padding: 24px;
	}

	.screens-spotlight-review {
		margin: 65px auto;
		padding: 0 8px;
	}

	.screens-product .screens-spotlight-review blockquote {
		font-size: clamp(1.3rem, 6.5vw, 1.7rem);
		line-height: 1.42;
	}

	.screens-spotlight-review .stars {
		margin-bottom: 18px;

		font-size: 1.12rem;
	}

	.screens-final-cta {
		grid-template-columns: 1fr;

		justify-items: center;

		text-align: center;
	}

	.screens-final-cta > div,
	.screens-final-cta h2,
	.screens-final-cta p {
		text-align: center !important;
	}

	.screens-final-icon {
		width: 72px;
		height: 72px;
	}

	.screens-requirements {
		margin-top: 50px;
		padding: 26px 22px;

		border-radius: 20px;
	}

	.screens-requirements-content ul {
		padding-left: 18px;
	}

}


/* ---------------------------------------------------------
   VERY LARGE DISPLAYS
   --------------------------------------------------------- */

@media (min-width: 1500px) {

	.screens-product {
		--screens-max-width: 1320px;
	}

}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	.screens-mini-card,
	.screens-power-grid article {
		background:
			linear-gradient(
				145deg,
				rgba(100, 125, 255, 0.10) 0%,
				rgba(125, 90, 255, 0.07) 55%,
				rgba(190, 80, 255, 0.035) 100%
			);

		border-color: rgba(120, 130, 255, 0.18);
	}

	.screens-mini-card h3,
	.screens-power-grid article h3,
	.screens-review-card h3,
	.screens-requirements h3 {
		color: rgba(255, 255, 255, 0.88) !important;
	}

	.screens-review-card {
		background:
			linear-gradient(
				145deg,
				rgba(255, 190, 60, 0.09) 0%,
				rgba(255, 150, 30, 0.045) 55%,
				rgba(255, 210, 80, 0.025) 100%
			);

		border-color: rgba(255, 190, 60, 0.14);
	}

	.screens-review-card span {
		color: rgba(255, 255, 255, 0.62) !important;
	}

	.screens-requirements {
		background:
			linear-gradient(
				145deg,
				rgba(120, 100, 255, 0.055),
				rgba(70, 120, 255, 0.025)
			);

		border-color: rgba(255, 255, 255, 0.08);
	}

	.screens-requirements .screens-minimum,
	.screens-requirements-content,
	.screens-requirements-content li {
		color: rgba(255, 255, 255, 0.72) !important;
	}

}


.screens-product img.screens-library-light {
	display: block !important;
}

.screens-product img.screens-library-dark {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	.screens-product img.screens-library-light {
		display: none !important;
	}

	.screens-product img.screens-library-dark {
		display: block !important;
	}
}