@require '~styles/variables'
@require '~styles-lib/mixins'

.route-landing-client
	overflow-x: hidden
	overflow-y: hidden

	.highlight-rows
		@media $media-sm-up
			section
				padding: 60px 0

		.jolticon
			theme-prop('color', 'highlight', true)
			margin-left: 0
			margin-right: 10px
			vertical-align: middle

		p
			theme-prop('color', 'lightest')
			font-size: 1.2em
			line-height: 1.6
			font-weight: 300

		img
			rounded-corners-lg()
			border: 2px solid $white

	section.client-presentation
		position: relative

		.container
			position: relative

	.client-presentation-mascot
		display: block
		position: absolute
		top: 20px
		right: 40px
		margin-top: -(130px)
		z-index: 2

	.client-presentation-inner
		position: relative
		overflow: hidden

		&::before
			change-bg('dark')
			content: ''
			display: block
			position: absolute
			top: 0
			left: -30%
			width: 160%
			height: 400px
			z-index: 0
			transform: rotate(-8deg)

		.container
			z-index: 1

		img
			theme-prop('border-color', 'gray')
			margin-top: 20px
			border-width: $border-width-large
			border-style: solid
			rounded-corners-lg()

	section.features-stripe
		margin-top: 150px
		margin-bottom: 90px
		position: relative
		z-index: 2

		&, h5
			theme-prop('color', 'highlight-fg')

		h5
			margin-top: 0

		&::before
			change-bg('highlight')
			content: ''
			display: block
			position: absolute
			top: -60px
			bottom: -60px
			left: -30%
			width: 160%
			z-index: 0
			transform: rotate(8deg)

		.container
			position: relative
			z-index: 1

	@media $media-xs
		.features-stripe-col
			margin-bottom: $grid-gutter-width

			&:last-child
				margin-bottom: 0

	section.download-footer
		margin-top: 120px
		margin-bottom: 70px
		position: relative
		z-index: 1

		&, h5
			color: $white

		&::before
			change-bg('darkest')
			content: ''
			display: block
			position: absolute
			top: -80px
			bottom: -40px
			left: -30%
			width: 160%
			z-index: 0
			transform: rotate(-8deg)

		.container
			position: relative
			z-index: 1

	@media $media-xs
		.download-footer-col
			margin-bottom: $grid-gutter-width

			&:last-child
				margin-bottom: 0

.header-download-buttons
	display: flex
	justify-content: center
	flex-direction: column
	margin: 0 auto
	max-width: 370px

	@media $media-md-up
		max-width: 100%
		flex-direction: row

	> *
		display: block
		margin: 5px 10px

		@media $media-md-up
			margin: 0 10px
