/* Common */
html {
 	scroll-behavior: smooth;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
	background: #F0F4F7;
	color: #1F2429;
}

body.using-mouse *:not(.button):focus {
	box-shadow: none;
}

header, section, footer {
	width: 100%;
}

.main-content-link:not(:focus-within) {
	position: absolute;
	top: -40px;
}

.main-content-link .section-container {
	padding-top: 8px;
	padding-bottom: 8px;
}

.main-content-link a {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.section-container {
	max-width: 1232px;
	margin: 0 auto;
	padding: 120px 24px;
}

.grey-end {
	background-image: linear-gradient(to top, rgb(240, 244, 247) 0px, rgb(255, 255, 255) 360px);
}

.grey-start {
	background-image: linear-gradient(to bottom, rgb(240, 244, 247) 0px, rgb(255, 255, 255) 360px);
}

.grey-start-end {
	background: linear-gradient(to bottom, rgb(240, 244, 247) 0px, rgba(255, 255, 255, 0) 360px), linear-gradient(to top, rgb(240, 244, 247) 0px, rgba(255, 255, 255, 0) 360px), white;
}

.grey {
	background: #F0F4F7;
}

.white {
	background: white;
}

.blue-to-black {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%), #215991;
}

.center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.center p, .center h2 {
	text-align: center;
}

h1 {
	font-family: "Chivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 46px;
	line-height: 54px;
	letter-spacing: -0.02em;
	color: #1F2429;
	margin: 0 0 24px 0;
	max-width: 688px;
	text-align: center;
}

h2 {
	font-family: "Chivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 38px;
	letter-spacing: -0.02em;
	color: #1F2429;
	margin: 0 0 4px 0;
}

.section-container > h2 {
	margin-bottom: 16px;
}

h3, .minor-heading {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #556676;
	margin: 0 0 16px 0;
}

.blue-to-black h1 {
	color: #F5FAFF;
}


.blue-to-black h3 {
	color: #C5D8EB;
}

p, ul, ol {
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.04em;
	color: #556676;
	margin: 0 0 40px 0;
	max-width: 688px;
}

p:last-child {
	margin-bottom: 0;
}

.blue-to-black .section-container > p {
	color: #C5D8EB;
}

a {
	font-weight: bold;
	text-decoration: none;
	color: #215991;
	transition: 0.1s ease-out;
}

.blue-to-black a:not(.button) {
	color: #85C2FF;
}

a:hover:not(.current-page) {
	color: #00275F;
}

.blue-to-black a:not(.button):hover {
	color: #98D6FF;
}

a:focus, a:active {
	outline: none;
}

a:focus {
	box-shadow: 0 0 0 4px rgba(33, 89, 145, 0.25);
	border-radius: 4px;
}

.blue-to-black a:not(.button):focus {
	box-shadow: 0 0 0 4px rgba(153, 214, 255, 0.25);
}

a:active {
	color: #215991!important;
}

.blue-to-black a:not(.button):active {
	color: #85C2FF!important;
}

nav a {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Buttons */

.button {
	display: inline-block;
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: none;
	transition: 0.1s ease-out;
}

.button:focus {
	outline: none;
}

.button svg, .button img {
	margin: 0 0 -2px 8px !important;
	width: 16px !important;
	height: 16px !important;
	float: none !important;
	background: none !important;
	border: none !important;
}

.button-small, .button-small:focus {
	padding: 8px 16px;
	border-radius: 20px;
}

.button-large, .button-large:focus {
	padding: 12px 20px;
	border-radius: 24px;
}

.button-white {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F0F4F7;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #1F2429;
}

.blue-to-black .section-container > .button-white {
	box-shadow: 0px 4px 8px rgba(31, 36, 41, 0.45), 0px 20px 40px rgba(31, 36, 41, 0.25);
}

.button-white:hover {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.25) 100%), #F0F4F7;
	box-shadow: 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
	color: #1F2429!important;
}

.blue-to-black .section-container > .button-white:hover {
	box-shadow: 0px 6px 12px rgba(31, 36, 41, 0.45), 0px 30px 60px rgba(31, 36, 41, 0.25);
}

.button-white:focus {
	box-shadow: 0px 0px 0px 4px rgba(188, 196, 204, 0.45), 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
}

.blue-to-black .section-container > .button-white:focus {
	box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.25), 0px 6px 12px rgba(31, 36, 41, 0.45), 0px 30px 60px rgba(31, 36, 41, 0.25);
}

.button-white:active {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F0F4F7;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #1F2429!important;
}

.blue-to-black .section-container > .button-white:active {
	box-shadow: 0px 4px 8px rgba(31, 36, 41, 0.45), 0px 20px 40px rgba(31, 36, 41, 0.25);
}

.button-white path {
	fill: #1F2429;
}

.button-grey {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #556676;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #FFFFFF;
}

.button-grey:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), #556676;
	box-shadow: 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
	color: #FFFFFF!important;
}

.button-grey:focus {
	box-shadow: 0px 0px 0px 4px rgba(188, 196, 204, 0.95), 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
}

.button-grey:active {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #556676;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #FFFFFF!important;
}

.button-grey path {
	fill: #FFFFFF;
}

.button-blue {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #215991;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #FFFFFF;
}

.button-blue:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), #215991;
	box-shadow: 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
	color: #FFFFFF!important;
}

.button-blue:focus {
	box-shadow: 0px 0px 0px 4px rgba(33, 89, 145, 0.25), 0px 3px 12px rgba(188, 196, 204, 0.65), 0px 12px 30px rgba(188, 196, 204, 0.45);
}

.button-blue:active {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #215991;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	color: #FFFFFF!important;
}

.button-blue path {
	fill: #FFFFFF;
}

/* Cards */
.card-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 32px;
	margin: 40px 0 120px 0;
}

.card {
	background: linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px), #FFFFFF;
	box-shadow: 0px 4px 8px rgba(188, 196, 204, 0.65), 0px 20px 40px rgba(188, 196, 204, 0.45);
	border-radius: 8px;
	padding: 40px;
	position: relative;
}

.faqs {
	padding-top: 40px;
	grid-gap: 80px;
}

.faqs .card {
	background: none;
	box-shadow: none;
	padding: 0;
}

.faqs .card p {
	margin-bottom: 40px;
	color: #1F2429;
}

.faqs .card p:last-child {
	margin-bottom: 0;
}

.blue-to-black .card {
	box-shadow: 0px 4px 8px rgba(31, 36, 41, 0.45), 0px 20px 40px rgba(31, 36, 41, 0.25);
}

.card img {
	height: 66px;
	width: 66px;
	margin-right: 24px;
	border-radius: 4px;
	float: left;
	margin-bottom: 24px;
	background: #F0F4F7;
}

.card h2 {
	text-align: left;
}

.card p {
	text-align: left;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.04em;
	margin-bottom: 72px;
}

p.subheading {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: #556676;
	margin-bottom: 24px;
}

.card h2 + p:not(.subheading) {
	margin-top: 20px;
}

.subheading span:not(.bullet) {
	font-weight: bold;
	color: #1F2429;
}

span.bullet {
	color: rgba(85, 102, 118, 0.45);
	margin: 0 2px;
}

.pricing .card {
	justify-content: flex-start;
}

.pricing .card .minor-heading {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

.pricing .card h1 {
	margin-bottom: 16px;
}

.pricing .card .subheading {
	margin-bottom: 40px;
}

.pricing .card div:not(.card-actions) {
	border-radius: 8px;
	background: #F0F4F7;
	padding: 24px;
	width: 100%;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	letter-spacing: -0.04em;
	color: #556676;
	box-sizing: border-box;
}

.pricing .card div:not(.card-actions):nth-child(odd) {
	background: white;
}

.pricing .card div:nth-last-child(2) {
	margin-bottom: 88px;
}

.pricing .card div span {
	font-weight: bold;
	color: #1F2429;
}

.pricing button {
	background: none;
	border: none;
	padding: 0;
	margin: 12px 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-decoration: none;
	color: #215991;
	transition: 0.1s ease-out;
	letter-spacing: 0.04em;
	text-transform: uppercase;	
}

.pricing button:hover {
	color: #00275F;
}

.pricing button:focus, .pricing button:active {
	outline: none;
}

.pricing button:focus {
	box-shadow: 0px 0px 0px 4px rgba(33, 89, 145, 0.25);
	border-radius: 4px;
}

.pricing button:active {
	color: #215991;
}

.card-actions {
	position: absolute;
	bottom: 40px;
}

.card .button {
	display: inline-block;
	margin-right: 16px;
}

.card .button:last-child {
	margin-left: 0;
}

.card.create-apps {
	background: url("/kinesis-website/images/create-apps-backdrop.png"), linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px), #FFFFFF;
}

.card.offer-services {
	background: url("/kinesis-website/images/offer-services-backdrop.png"), linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px), #FFFFFF;
}

.card.create-apps, .card.offer-services {
	background-repeat: no-repeat;
	background-size: 120px 120px, auto auto, auto auto;
	background-position: calc(100% - 24px) 24px, 0 0, 0 0;
}

.no-padding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.no-padding .card-grid {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.no-padding-top {
	padding-top: 0 !important;
}

.no-padding-top .card-grid {
	margin-top: 0 !important;
}

/* Quote blocks */
.quote-block {
	max-width: 688px;
	text-align: center;
}

.quote-block p {
	font-family: "Chivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 900;
	font-size: 30px;
	line-height: 38px;
	letter-spacing: 0.001em;
	color: #1F2429;
	position: relative;
	z-index: 1;
}

.blue-to-black .quote-block p {
	color: #F5FAFF;
}

.quote-block p:first-child::before {
	content: "\201C";
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translate(-50%, 0);
	font-family: "Chivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 900;
	font-size: 160px;
	line-height: 190px;
	color: #D7DCE0;
	z-index: -1;
}

.blue-to-black .quote-block p:first-child::before {
	color: #4B77A3;
}

.organisation-logo {
	width: 80px;
	height: 80px;
	background: linear-gradient(180deg, #FFFFFF 50%, #F0F3F7 100%);
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 20px 40px rgba(105, 122, 138, 0.45);
	border-radius: 8px;
	margin: 0 auto 16px;
}

.blue-to-black .organisation-logo {
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
}

.organisation-logo img {
	height: 80px;
	width: 80px;
}

p.speaker {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.04em;
	color: #556676;
	margin-bottom: 0;
}

.blue-to-black p.speaker {
	color: #C5D8EB;
}

p.speaker span {
	font-weight: bold;
}

/* Header */
@keyframes showMenu {
	from {top: -88px; opacity: 0;}
	to {top: 0; opacity: 1;}
}

header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	transition: 0.1s ease-in;
	background: white;
	z-index: 2;
}

header.sticky {
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
}

header .section-container {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	padding: 24px;
}

.header-logo {
	grid-column: 1;
	place-self: center start;
}

.header-logo, .header-logo img {
	display: block;
	width: 160px;
	height: 40px;
}

header nav {
	grid-column: 2;
	place-self: center center;
}

.header-actions {
	grid-column: 3;
	place-self: center end;
}

header nav a, header nav a:focus, header nav a:active {
	border-radius: 20px;
	padding: 8px 12px;
	display: inline-block;
}

header nav a.current-page {
	background-color: #F0F4F7;
}

.header-actions a {
	margin-right: 16px;
}

.header-actions a:nth-last-child(2) {
	margin-right: 0;
}

section:first-of-type .section-container {
	padding-top: 96px;
}

.hamburger-button {
	display: none;
}

/* Footer */
footer .section-container {
	padding: 84px 24px 80px 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer .section-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	width: calc(100% - 48px);
	height: 4px;
	background: rgba(188, 196, 204, 0.45);
	border-radius: 2px;
}

.blue-to-black + footer .section-container {
	padding-top: 80px;
}

.blue-to-black + footer .section-container::before {
	display: none;
}

footer nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

footer nav:last-of-type {
	margin-bottom: 80px;
}

footer nav a {
	margin: 0 0 8px 0;
	text-align: center;
}

footer nav a:last-child {
	margin: 0;
}

footer img {
	width: 54px;
	height: 40px;
	margin-bottom: 16px;
}

footer p {
	font-weight: bold;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

/* Dialogs */
@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}

body.show-dialog {
	height: 100%;
	touch-action: none;
	-webkit-overflow-scrolling: none;
	overflow: hidden;
}

.dialogs-container {
	visibility: hidden;
	opacity: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 0px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(31, 36, 41, 0.65);
	overflow: auto;
	z-index: 3;
	transition: 0.1s;
}

body.show-dialog .dialogs-container {
	visibility: visible;
	opacity: 1;
}

.dialog-container {
	visibility: hidden;
	opacity: 0;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	flex: 1 0 auto;
	margin-top: 24px;
	margin-bottom: 24px;
	transition: 0.1s;
}

.dialog-container.show-dialog {
	visibility: visible;
	opacity: 1;
}

.dialog {
	background: linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px), #FFFFFF;
	box-shadow: 0px 4px 8px rgba(31, 36, 41, 0.45), 0px 20px 40px rgba(31, 36, 41, 0.25);
	border-radius: 8px;
	padding: 40px;
	width: calc(100% - 128px);
	max-width: 480px;
	position: relative;
}

.dialog::after {
	content: "";
	position: absolute;
	height: 24px;
	width: 100%;
	left: 0;
	bottom: -24px;
}

.dialog h2 {
	margin: 0;
}

.dialog p {
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.04em;
	color: #556676;
	margin: 24px 0 0 0;
}

.contact-subject {
	display: none;
}

.contact-subject.has-subject {
	display: block;
	overflow: hidden;	
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 12px;
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.04em;
	color: #1F2429;
}

.contact-subject::before {
	content: "Re: ";
	font-weight: 500;
}

form * {
	display: block;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

form label {
	font-weight: bold;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #556676;
	margin-top: 24px;
	padding-bottom: 8px;
	cursor: pointer;
}

form input[type="text"], form input[type="email"], form textarea {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.04em;
	color: #1F2429;
	border-radius: 8px;
	padding: 8px 16px;	
	border: 2px solid rgba(188, 196, 204, 0.45);
	box-shadow: 0 0 0 0 rgba(33, 89, 145, 0);
	transition: box-shadow 0.1s ease-out;
	box-sizing: border-box;
}

form input[type="text"]:hover, form input[type="email"]:hover, form textarea:hover {
	border: 2px solid #215991;
}

form input[type="text"]:focus, form input[type="email"]:focus, form textarea:focus {
	border: 2px solid #215991;
	outline: none;
	box-shadow: 0 0 0 4px rgba(33, 89, 145, 0.25) !important;
}

form input[type="text"]::placeholder, form input[type="email"]::placeholder, form textarea::placeholder {
	color: rgba(85, 102, 118, 0.45);
	opacity: 1;
}

form textarea {
	height: 160px;
}

.secondary-label {
	font-size: 16px;
	line-height: 24px;
	color: rgba(85, 102, 118, 0.65);
	margin-top: 24px;
	letter-spacing: -0.02em;
}

.secondary-label a {
	display: inline;
}

form button {
	display: inline-block;
	margin-top: 32px;
	width: auto;
	min-width: 0;
	transition: 0.1s ease-out;
}

form button:first-of-type {
	margin-right: 16px;
}

@keyframes spin {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

form button.loading {
	position: relative;
	overflow: hidden;
}

form button.loading span {
	opacity: 0;
}

.button.loading::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url("/kinesis-website/images/spinner.svg");
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	animation: spin 1s linear infinite;
}

/* Toasts */
@keyframes slideDown {
	from {top: -64px; opacity: 0;}
	to {top: 0; opacity: 1;}
}

.toasts {
	display: none;
	position: fixed;
	top: 0;
	z-index: 4;
	width: 100vw;
	transition: opacity 0.3s ease-out;
}

.toasts, .toasts * {
	cursor: pointer;
}

.toasts.show-toast {
	display: block;
}

.toasts.slide-down {
	animation: slideDown 0.3s ease-out;
}

.toasts.fade-out {
	opacity: 0;
}

.toast {
	background: linear-gradient(to top, #F0F4F7 0px, #FFFFFF 24px), #FFFFFF;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	margin: 21px auto;
	padding: 12px 16px;
	display: none;
	box-sizing: border-box;
	width: -moz-fit-content;
	width: fit-content;
	max-width: calc(100vw - 48px);
}

.toast.show-toast {
	display: flex;
}

.toast p {
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.04em;
	color: #556676;
	margin: 0;
	max-width: none;
}

.toast img {
	height: 22px;
	width: 22px;
	margin-right: 8px;
}

/* Homepage tabs */
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes countDown {
	from {width: 100%;}
	to {width: 0%;}
}

.tabs {
	margin: 120px 0 40px;
	text-align: center;
}

.tab {
	background-color: inherit;
	border: none;
	outline: none;
	margin: 0 24px 0 0;
	padding: 0;
	position: relative;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #556676;
}

.tab:last-child {
	margin: 0;
}

.tab:not(.current-tab):hover {
	color: #2D3E4E;
}

.tab:focus::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 0px;
	width: 100%;
	height: 4px;
	background-color: rgba(188, 196, 204, 0.65);
	border-radius: 2px;
	animation: fadeIn 0.1s ease-in 0s;
}

.tab:active {
	color: #556676 !important;
}

.tabs .current-tab::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 0px;
	width: 100%;
	height: 4px;
	background-color: rgba(85, 102, 118, 0.9);
	border-radius: 2px;
	animation: fadeIn 0.1s ease-in 0s, countDown 9s linear 1s;
}

.no-animation .current-tab::after {
	animation: fadeIn 0.1s ease-in 0s !important;
}

.homepage-tabs {
	width: 100%;
	position: relative;
}

.tab-container {
	background: url("/kinesis-website/images/tab-background.png"), linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px);
	background-position: top 28px left 8px, 0 0;
	background-repeat: no-repeat;
	background-size: calc(100% - 16px), 100%;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 8px;
	position: absolute;
	width: calc(100% - 16px);
}

.window-chrome {
	display: block;
	width: 48px;
	height: 12px;
	margin-bottom: 8px;
}

.tab-content {
	display: block;
	width: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.tab-content:not(:last-child) {
	position: absolute;
	width: calc(100% - 16px);
}

.homepage-tabs .current-tab {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.tabs-offset {
	height: 316px;
}

.tabs-offset + section .section-container {
	padding-top: 240px;
}

.tab-arrows {
	display: none;
}

.tab-indicators {
	display: none;
}

/* Homepage fixed sections */
.how-it-works {
	display: flex;
	margin-top: 16px;
	width: 100%;
}

.how-it-works .screenshot {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 100vh;
	width: calc(50% - 16px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.how-it-works .screenshot-container {
	background: url("/kinesis-website/images/screenshot-background.png"), linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px);
	background-position: top 28px left 8px, 0 0;
	background-repeat: no-repeat;
	background-size: calc(100% - 16px), 100%;
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);
	border-radius: 8px;
	padding: 8px;
	width: 100%;
	margin-right: 40px;
	position: relative;
}

.how-it-works .screenshot-content {
	width: 100%;
	display: block;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.how-it-works .screenshot-content:not(:last-child) {
	position: absolute;
	width: calc(100% - 16px);
	top: 28px;
	left: 8px;
}

.how-it-works .current-screenshot {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.how-it-works .arrow {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 32px;
	height: 100vh;
	background: url("/kinesis-website/images/arrow-segment.svg");
	background-position: top 0 left 14px;
	background-repeat: repeat-y;
}

.how-it-works .steps {
	width: calc(50% - 16px);
}

.how-it-works .step {
	width: 100%;
	margin-bottom: 240px;
	display: flex;
	flex-direction: column;
	align-items: left;
	transform: translateY(-50%);
}

.how-it-works .step:first-child {
	margin-top: 50vh;
}

.how-it-works .step h2 {
	margin: 0 40px 16px 40px;
	text-align: left;
}

.how-it-works .step p {
	margin: 0 40px 16px 40px;
	text-align: left;
}

.how-it-works .step p:not(.minor-heading) {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 28px;
}

.steps .screenshot-container {
	visibility: hidden;
	height: 0px;
}

.steps .screenshot-container .screenshot-content {
	display: none;
}

.call-to-action {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.call-to-action > img {
	margin: 4px 0 40px 0;
}

.call-to-action a {
	margin-bottom: 16px;
}

.call-to-action p {
	max-width: 304px;
	margin: 0;
	color: rgba(85, 102, 118, 0.65);
}

/* Logo grid */
.logo-grid {
	margin: 24px -10px 100px -10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: calc(100% + 20px);

}

.logo-grid img {
	height: 88px;
	width: 88px;
	background: linear-gradient(180deg, #FFFFFF 50%, #F0F3F7 100%);
	box-shadow: 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 20px 40px rgba(105, 122, 138, 0.45);
	border-radius: 8px;
	margin: 0 10px 20px 10px;
}

/* Contact us */
.office-map {
	background: url("/kinesis-website/images/map.png");
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	width: 100%;
	height: 320px;
	margin-top: 56px;
	display: block;
  	background-position: center;
  	background-size: auto 320px;
}

.office-map:focus {
	box-shadow: 0 0 0 4px rgba(153, 214, 255, 0.25), 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
}

.contact-details {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 32px;
	margin: 80px 0;
}

.contact-details div {
	text-align: center;
}

.contact-details div p {
	font-size: 20px;
	line-height: 28px;
	color: #F5FAFF;
}

/* 404 */
.page-not-found {
	margin-bottom: 24px;
}

/* Text */
.text h2, .text h3 {
	max-width: 688px;
	width: 100%;
	text-align: left;
}

.text h2 {
	margin: 40px 0 24px;
}

.text h2:first-child {
	margin-top: 0;
}

.text p, .text ul, .text ol {
	text-align: left;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 24px;
	width: 100%;
}

.text ul, .text ol {
	padding-left: 22px;
	width: calc(100% - 22px);
	max-width: 666px;
}

.text li {
	margin-left: -4px;
}

.text li:last-child, .text p:last-child {
	margin-bottom: 0;
}

.text li span {
	font-weight: bold;
	color: #1F2429;
}

.text figure {
	margin: 56px 0 80px 0;
	width: 100%;
}

.text figure:first-child {
	margin-top: 0;
}

.text figure:last-child {
	margin-bottom: 0;
}

.text figure > *:first-child {
	width: 100%;
	height: 500px;
	border-radius: 8px;
	background: linear-gradient(to top, #F0F4F7 0px, #FFFFFF 80px), #FFFFFF;
	box-shadow: 0px 4px 8px rgba(188, 196, 204, 0.65), 0px 20px 40px rgba(188, 196, 204, 0.45);
}

.text figure > iframe {
	border: none;
}

.text figcaption {
	width: 100%;
	text-align: center;
	margin-top: 16px;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: -0.02em;
	color: rgba(85, 102, 118, 0.65);
}

.post-print {
	margin-top: -40px;
}

.post-print .button {
	margin-bottom: 80px;
}

.post-print p {
	color: rgba(85, 102, 118, 0.65);
}

.post-print span {
	font-weight: bold;
	color: rgba(31, 36, 41, 0.65);
}

/* Blog */
.post-list * {
	max-width: 688px;
	margin-left: auto;
	margin-right: auto;
}

.post-list h2 {
	margin-bottom: 4px;
}

.post-list p:not(.subheading) {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.04em;
	margin-bottom: 80px;
}

.post-list p:not(.subheading):last-child {
	margin-bottom: 0;
}

/* Breakpoints */
@media (max-width: 1200px) {
	/* Reduce fonts */
	body, h3, .minor-heading, .button, p.subheading {
		font-size: 14px;
		line-height: 22px;
	}
	
	h1 {
		font-size: 38px;
		line-height: 46px;
	}
	
	h2, .quote-block p {
		font-size: 24px;
		line-height: 32px;
	}
	
	p, p.speaker {
		font-size: 20px;
		line-height: 28px;
	}
	
	.card p, .how-it-works .step p:not(.minor-heading) {
		font-size: 16px;
		line-height: 24px;
	}
	
	footer p {
		font-size: 12px;
		line-height: 20px;
	}

	.dialog p {
		font-size: 16px;
		line-height: 24px;
	}

	.contact-subject.has-subject {
		font-size: 14px;
		line-height: 22px;
	}
	
	form label {
		font-size: 12px;
		line-height: 20px;
	}

	form input[type="text"], form textarea {
		font-size: 14px;
		line-height: 22px;
	}

	.secondary-label {
		font-size: 14px;
		line-height: 22px;
	}
	
	/* Layout tweaks */
	.card p:last-of-type{
		margin-bottom: 70px;
	}
	
	.pricing .card div:not(.card-actions) {
		padding: 20px 24px;
	}

	.header-logo, .header-logo img {
		width: 152px;
		height: 38px;
	}
	
	.card-grid {
		grid-gap: 20px;
	}

	.faqs {
		grid-gap: 40px;
	}
	
	.card img {
		height: 60px;
		width: 60px;
	}

	.pricing .card .minor-heading, .pricing .card .subheading {
		font-size: 14px;
		line-height: 22px;
	}

	.pricing .card div:not(.card-actions) {
		font-size: 16px;
		line-height: 24px;
	}

	.pricing button {
		font-size: 14px;
		line-height: 22px;
	}

	.how-it-works .screenshot {
		width: calc(50% - 10px);
	}

	.how-it-works .arrow {
		width: 20px;
		background-position: top 0 left 8px;
	}

	.how-it-works .steps {
		width: calc(50% - 10px);
	}
	
	.button svg {
		margin-bottom: -3px;
	}

	.contact-subject.has-subject {
		margin-bottom: 8px;
	}
	
	form label {
		padding-bottom: 4px;
	}
	
	form input[type="text"], form textarea {
		padding: 8px 12px;
	}
	
	.dialog {
		padding: 32px;
	}
	
	.dialog {
		width: calc(100% - 112px);
	}

	.toast p {
		font-size: 14px;
		line-height: 20px;
	}

	.toast img {
		height: 20px;
		width: 20px;
	}

	.contact-details {
		grid-gap: 20px;
	}

	.contact-details div p {
		font-size: 16px;
		line-height: 24px;
	}

	.post-list p:not(.subheading) {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 1120px) {
	/* Hamburger nav */
	header .section-container {
		display: grid;
		grid-template-columns: 1fr 2fr;
		position: relative;
	}
	
	.header-actions {
		grid-column: 2;
	}
	
	.hamburger-button, .hamburger-button:focus {
		display: inline-block;
		margin-left: 52px;
		position: relative;
		height: 38px;
		width: 38px;
		padding: 12px;
	}
	
	.hamburger-button::before {
		content: "";
		position: absolute;
		top: 0;
		left: -28px;
		width: 4px;
		height: 100%;
		background-color: rgba(188, 196, 204, 0.45);
		border-radius: 2px;
		pointer-events: none;
	}
	
	.hamburger-button .icon-bar {
		background-color: #1F2429;
		border-radius: 2px;
		height: 2px;
		width: 14px;
		margin-bottom: 3px;
		transition: 0.2s;
		display: block;
	}
	
	.hamburger-button .icon-bar:last-child {
		margin-bottom: 0;
	}
	
	header nav {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 78px;
		right: 24px;
		background: white;
		padding: 8px;
		width: 280px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 20px 40px rgba(0, 0, 0, 0.15);
		border-radius: 8px;
		transition: opacity 0.1s ease-in, visibility 0.1s ease-in, transform 0.15s ease-in;
		overflow: hidden;
		transform: translateY(-50%) scaleY(0.5);
	}

	header nav.show-menu {
		visibility: visible;
		opacity: 1;
		transition: opacity 0.1s ease-out, visibility 0.1s ease-out, transform 0.15s ease-out;
		transform: none;
	}
	
	header nav.show-menu + .header-actions .hamburger-button {
		box-shadow: 0px 0px 0px 4px rgba(188, 196, 204, 0.45), 0px 2px 8px rgba(188, 196, 204, 0.65), 0px 8px 20px rgba(188, 196, 204, 0.45);	
	}
	
	header nav.show-menu + .header-actions .hamburger-button .icon-bar:nth-child(1) {
		transform: rotate(45deg);
		transform-origin: 10% 10%;
		width: 18px;
	}
	
	header nav.show-menu + .header-actions .hamburger-button .icon-bar:nth-child(2) {
		opacity: 0;
	}
	
	header nav.show-menu + .header-actions .hamburger-button .icon-bar:last-child {
		transform: rotate(-45deg);
		transform-origin: 10% 90%;
		width: 18px;
	}
	
	header nav a, header nav a:focus {
		display: block !important;
		border-radius: 4px !important;
		padding: 8px !important;
	}
	
	header nav a:focus {
		border-radius: 2px!important;
		box-shadow: 0px 0px 0px 4px rgba(33, 89, 145, 0.25);
		z-index: 1;
	   	transform: translateZ(0);
	}
}

@media (max-width: 1120px) {
	/* Rearrange cards */
	.card img {
		float: none;
	}

	.card p:last-of-type {
		margin-bottom: 116px;
	}

	.card.one-action p:last-of-type {
		margin-bottom: 70px;
	}
	
	.card .button {
		display: block;
		margin: 8px 0 0 0;
		width: -moz-fit-content;
		width: fit-content;
	}
	
	.card .button:first-child {
		margin: 0;
	}
}

@media (max-width: 640px) {
	/* Full mobile layout time */
	header .section-container {
		grid-template-columns: 2fr 1fr;
		padding: 16px 24px;
	}
	
	.header-logo, .header-logo img {
		width: 144px;
		height: 36px;
		margin: 1px 0;
	}
	
	.header-actions *:not(button) {
		display: none;
	}
	
	.hamburger-button {
		margin-left: 0;
	}
	
	.hamburger-button::before {
		display: none;
	}
	
	header nav {
		top: 70px;
		right: 24px;
		width: calc(100vw - 64px);
	}
	
	header.sticky nav {
		top: 86px;
		right: 16px;
		width: calc(100vw - 48px);
	}
	
	.section-container {
		padding: 80px 24px;
	}
	
	section:first-of-type .section-container {
		padding-top: 64px;
	}
	
	.tabs {
		margin: 80px 0 16px;
	}
	
	.tab {
		margin: 0;
		animation: fadeIn 0.1s ease-in 0s
	}
	
	.tab::after {
		display: none!important;
	}
	
	.tab:not(.current-tab) {
		display: none;
	}
	
	.tabs-offset + section .section-container {
		padding-top: 148px;
	}
	
	.tab-arrows {
		position: absolute;
		height: 22px;
		top: 80px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.tab-arrows button {
		padding: 3px 2px 3px 4px;
		border: none;
		background: none;
	}
	
	.tab-arrows svg {
		width: 16px;
		height: 16px;
		fill: #556676;
	}
	
	.tab-arrows button:first-child {
		transform: rotate(180deg);
	}
	
	.tab-arrows button:focus {
		box-shadow: 0px 0px 0px 4px rgba(188, 196, 204, 0.65);
		border-radius: 4px;
		outline: none;
	}
	
	.tab-arrows button:hover svg {
		fill: #2D3E4E;;
	}
	
	.tab-arrows button:active svg {
		fill: #556676;
	}
	
	.tab-indicators {
		display: block;
		position: absolute;
		margin-top: 16px;
		width: 68px;
		padding: 0 calc((100% - 68px) / 2);
	}
	
	.tab-indicator {
		display: inline-block;
		height: 12px;
		width: 12px;
		border-radius: 6px;
		background: #4B77A3;
		margin-right: 16px;
		transition: background 0.3s ease-out!important;
		cursor: pointer;
	}
	
	.tab-indicator:last-child {
		margin-right: 0;
	}
	
	.tab-indicator.current-tab {
		background: #F5FAFF;
	}
	
	.card-grid {
		grid-template-columns: 1fr;
	}

	.faqs {
		padding-top: 0;
	}

	.faqs .card, .faqs .card p {
		text-align: center!important;
	}

	.how-it-works .screenshot {
		display: none;
	}

	.how-it-works .arrow {
		display: none;
	}

	.how-it-works .steps {
		width: 100%;
	}

	.how-it-works .step {
		margin-bottom: 40px;
		transform: none;
	}

	.how-it-works .step:first-child {
		margin-top: 0;
	}
	
	.how-it-works .step .minor-heading {
		display: none;
	}

	.how-it-works .step h2 {
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}

	.how-it-works .step p {
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}
	
	.steps .screenshot-container {
		visibility: visible;
		margin: 0 0 24px 0;
		height: auto;
		width: auto;
	}
	
	.steps .screenshot-container .screenshot-content {
		display: block;
		opacity: 1;
	}
	
	.steps {
		margin-bottom: 40px;
	}
	
	#step-5 {
		margin-bottom: 0!important;
	}

	.call-to-action img {
		display: none;
	}

	.dialog-container.show-dialog {
		margin: 0;
	}

	.dialog {
		border-radius: 0;
		padding: 24px 24px 40px;
		width: calc(100% - 48px);
		max-width: 640px;
		min-height: calc(100vh - 64px);
	}

	.dialog::after {
		display: none;
	}

	form button {
		display: block;
		margin-top: 8px;
		width: 100%;
	}

	form button:first-of-type {
		margin-top: 32px;
	}

	.toast {
		margin: 16px auto;
	}

	.contact-details {
		grid-template-columns: 1fr;
		grid-gap: 40px;
	}

	.text figure {
		margin: 16px 0 40px 0;
	}

	.post-print {
		margin-top: 0;
	}

	.post-list p:not(.subheading) {
		margin-bottom: 40px;
	}
}

/* Notch handling */
@supports(padding-left: env(safe-area-inset-left)) {
	div.section-container {
		padding-left: max(24px, env(safe-area-inset-left));
		padding-right: max(24px, env(safe-area-inset-right));
	}

	@media (max-width: 1120px) {
		header nav {
			right: max(24px, env(safe-area-inset-right));
		}
	}

	.toast {
		max-width: calc(100vw - max(24px, env(safe-area-inset-left) - max(24px, env(safe-area-inset-right));
	}
}