@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.17;
}

:root {
	/* fixed values (base values) */
	--primary: #d7006e;
	--secondary: #715781;
	--header-color: rgba(255, 255, 255, 0.8);

	--header-text-color: #000;
	--body-text-color: #54595f;
	--lander-heading-text-color: #fff;
	--why-heading-text-color: #000;

	--font-size-1: 16px;
	--line-height-1: 20px;

	--font-size-2: 24px;
	--line-height-2: 28px;

	--font-size-3: 48px;
	--line-height-3: 52px;

	--font-size-lander: 18px;
	--line-height-lander: 100%;

	--heading-font-weight: 600;

	--header-height: 96px;

	--lander-padding-horizontal: 40px;
	--lander-content-max-width: 500px;

	/* dynamic values */
	--header-position: absolute;

	--section-horizontal-padding: 0px;
	--section-vertical-padding: unset;
	--section-content-flex-direction: unset;

	--lander-bg: unset;
	--lander-padding-top: unset;
	--lander-padding-bottom: unset;
	--lander-gap: unset;
	--lander-button-gap: unset;

	--media-kit-padding: unset;
	--media-kit-tile-max-width: 440px;
	--media-kit-tile-gap: unset;

	--why-padding: unset;
	--why-tile-max-width: unset;

	--app-button-gutter: unset;
	--call-to-action-gutter: unset;

	--footer-justify-content: flex-end;

	/* virtual - these are computed */
	--media-kit-desktop-horizontal-padding: calc((100% - (var(--media-kit-tile-max-width) * 2 + var(--media-kit-tile-gap))) / 2);
}

/* let's set variables here so we don't need to blow up this css file. Limit the amount of @media needed */

/** all mobile and tablet views */
@media screen and (max-width: 1299px) {
	:root {
		--header-padding: 16px;
		--bg-lander: url("./assets/BG_Mobile_and_Tablet-Block_1.jpg");
		--call-to-action-gutter: 80px;
		--section-content-flex-direction: column;
		--why-tile-max-width: 500px;
		--lander-button-gap: 10px;
	}
}

/* mobile */
@media screen and (max-width: 744px) {
	:root {
		--section-horizontal-padding: 40px;
		--lander-vertical-padding: 208px 80px;
		--header-position: fixed;
		--header-height: 80px;
		--lander-padding-top: 208px;
		--lander-padding-bottom: 80px;

		--media-kit-padding: 80px 40px;
		--media-kit-tile-gap: 40px;
		--why-padding: 80px 40px;
		--section-base-gap: 40px;

		--font-size-3: 32px;
		--line-height-3: 32px;
		--heading-font-weight: 900;
		--footer-justify-content: flex-start;
	}

	body > main {
		margin-top: var(--header-height);
	}

	body,
	body > header,
	#lander,
	#media-kit {
		font-size: var(--font-size-1);
		line-height: var(--line-height-1);
	}
}

/* tablet mini - we drop the horizontal pad in favor of a fixed max-width sizing */
@media screen and (min-width: 745px) and (max-width: 1023px) {
	:root {
		--section-horizontal-padding: 0;

		--lander-padding-top: calc(208px + var(--header-height));
		--lander-padding-bottom: 160px;

		--media-kit-padding: 80px;
		--media-kit-tile-gap: 64px;
		--section-base-gap: 64px;

		--why-padding: 197px 80px;
	}
}

/* tablet big */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
	:root {
		--lander-padding-top: calc(208px + var(--header-height));
		--lander-padding-bottom: 160px;

		--media-kit-padding: 192px 80px;
		--media-kit-tile-gap: 64px;
		--section-base-gap: 64px;

		--why-padding: 339px 80px;
	}
}

/* all desktop views */
@media screen and (min-width: 1300px) {
	:root {
		--header-padding: 16px 32px;
		--bg-lander: url("./assets/BG_Desktop-Block_1.jpg");
		--section-content-flex-direction: row;

		--lander-button-gap: 16px;
		--media-kit-tile-gap: 80px;
		--section-base-gap: 80px;
		--why-tile-max-width: 300px;
	}
}

/* desktop small */
@media screen and (min-width: 1300px) and (max-width: 1919px) {
	:root {
		--lander-padding-top: calc(208px + var(--header-height));
		--lander-padding-bottom: 160px;

		--media-kit-padding: 146px var(--media-kit-desktop-horizontal-padding);
		--why-padding: 194px 0;

		--media-kit-tile-gap: 80px;
		--section-base-gap: 80px;
	}
}

/* desktop medium */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
	:root {
		--lander-padding-top: calc(208px + var(--header-height));
		--lander-padding-bottom: 160px;

		--media-kit-padding: 270px var(--media-kit-desktop-horizontal-padding);
		--why-padding: 318px 0;

		--media-kit-tile-gap: 80px;
		--section-base-gap: 80px;
	}
}

/* desktop large */
@media screen and (min-width: 2560px) {
	:root {
		--lander-padding-top: calc(208px + var(--header-height));
		--lander-padding-bottom: 160px;

		--media-kit-padding: 450px var(--media-kit-desktop-horizontal-padding);
		--why-padding: 498px 0;

		--media-kit-tile-gap: 80px;
		--section-base-gap: 80px;
	}
}

/* with the variables above - not much needs to be done now except scaffolding */
html,
body {
	width: 100%;
	height: 100%;
}

body {
	position: relative;
	background: #fff;
	color: var(--body-text-color);
	font-family: Roboto, sans-serif;
	font-size: var(--font-size-2);
	line-height: var(--line-height-2);
}

body > header {
	z-index: 1;
	position: var(--header-position);
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	padding: var(--header-padding);
	background: var(--header-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

body > header > nav {
	display: flex;
	gap: 40px;
}

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

a {
	text-decoration: none;
}

body > header a {
	color: #000;
}

main a {
	color: var(--primary);
	font-weight: 600;
}

a:not([class*="-button"]):hover {
	text-decoration: underline;
}

main h1,
main h2 {
	font-size: var(--font-size-3);
	line-height: var(--line-height-3);
	text-transform: uppercase;
	font-weight: var(--heading-font-weight);
	text-align: center;
	color: var(--secondary);
}

main p {
	opacity: 0.8;
}

main > section {
	display: flex;
	align-items: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	gap: var(--section-base-gap);
}

#lander {
	position: relative;
	text-align: center;
	background-image: var(--bg-lander);
	padding: var(--lander-padding-top) var(--lander-padding-horizontal) var(--lander-padding-bottom);
	color: var(--lander-heading-text-color);
}

#lander:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 500px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

#lander > * {
	z-index: 1;
}

#lander h1 {
	color: var(--lander-heading-text-color);
}

#lander > div:first-child {
	max-width: var(--lander-content-max-width);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#media-kit {
	background: #f5f0f7;
	padding: var(--media-kit-padding);
}

#media-kit > div {
	display: flex;
	flex-direction: var(--section-content-flex-direction);
	gap: var(--media-kit-tile-gap);
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#media-kit article {
	max-width: var(--media-kit-tile-max-width);
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

#media-kit article > div {
	display: flex;
	gap: 40px;
}

#why {
	padding: var(--why-padding);
}

#why > div {
	display: flex;
	flex-direction: var(--section-content-flex-direction);
	gap: var(--media-kit-tile-gap);
	flex-wrap: wrap;
	justify-content: center;
	align-items: top;
}

#why h3 {
	font-size: var(--font-size-2);
	line-height: var(--line-height-2);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--why-heading-text-color);
}

#why article {
	max-width: var(--why-tile-max-width);
	font-size: var(--font-size-1);
	line-height: var(--line-height-1);
	padding-left: 64px;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 48px;
}

#why article[data-why-1] {
	background-image: url("./assets/setting-2-svgrepo-com_1.svg");
}

#why article[data-why-2] {
	background-image: url("./assets/setting-2-svgrepo-com_2.svg");
}

#why article[data-why-3] {
	background-image: url("./assets/performance-dashboard-svgrepo-com_1.svg");
}

#why article p {
	padding-top: 8px;
}

.lander-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
	margin-top: 16px;
	gap: var(--lander-button-gap);
}

.lander-button {
	display: flex;
	width: 100%;
	max-width: 280px;
	height: 52px;
	border-radius: 52px;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lander);
	line-height: var(--line-height-lander);
	font-weight: bold;

	border-width: 2px;
	border-style: solid;

	--lander-button-bg: var(--primary);
	--lander-button-fg: #fff;

	border-color: var(--primary);
	background-color: var(--lander-button-bg);
	color: var(--lander-button-fg);
}

.lander-button.lander-button--inverse {
	--lander-button-bg: #fff;
	--lander-button-fg: var(--primary);
}

body > footer {
	padding: 24px 40px;
	background-color: var(--secondary);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
}

body > footer address {
	display: block;
	font-style: normal;
	font-size: 12px;
	line-height: 16px;
	opacity: 0.8;
}

.footer-canada {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: var(--footer-justify-content);
	flex: 1;
}

.footer-canada p {
	position: relative;
	font-size: 11px;
	max-width: 182px;
	line-height: 100%;
	opacity: 0.8;
}

.footer-canada__divider {
	height: 42px;
	width: 1px;
	background-color: #fff;
}