/* details ..-. - .... --

fathom analytics frontend site

version:					1.0.0

font sizes:				14 (-0.001), 19 (-0.009), 34 (-0.016), 68 (-0.016)
fonts: 						Inter UI 500, 600

spacing:					4, 16, 32, 48, 96, 128
grid:							60 (12) = 72

green							#88ffc6
dark green				#56e3a0
purple						#533feb
grey							#222
med grey					#888
light grey				#ddd
lighest grey			#f6f6f6

*/










/* = fonts ..-. - .... -- */


@import url('https://rsms.me/inter/inter-ui.css');











/* = itty, bitty reset ..-. - .... -- */

* { margin: 0; padding: 0; border: none; outline: none; list-style: none; box-sizing: border-box; text-decoration: none; font-size: 100%; vertical-align: baseline; line-height: 1.2; }










/* = animations ..-. - .... -- */

@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(24px); }
	100% { opacity: 1; transform: translateY(0); }
	}

@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-24px); }
	100% { opacity: 1; transform: translateY(0); }
	}

@keyframes fadeOutUp {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(24px);}
	}

.animated { animation-duration: .4s; animation-fill-mode: both; }

.delayed_01s { animation-delay: .1s; }
.delayed_02s { animation-delay: .2s; }
.delayed_03s { animation-delay: .3s; }
.delayed_04s { animation-delay: .4s; }
.delayed_05s { animation-delay: .5s; }
.delayed_06s { animation-delay: .6s; }


.fadeInUp { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeOutUp { animation-name: fadeOutUp; }










/* = structure .--. .. -.-. --- */

html, body { height: 100%; }
body { font: 500 19px "Inter UI", sans-serif; color: #222; text-align: center; letter-spacing: -0.009em; }

.rapper { }

.inner { align-self: center; max-width: 1152px; text-align: left; margin: 0 auto; padding: 64px 16px; }

header { background: #fff; }
	header h3 { color: #533feb; }

article { max-width: 864px; }


.socialproof { background: #f6f6f6; }
	.socialproof .inner { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 12px; padding-top: 32px; }

.features { background: #222; color: #fff; }
	.features svg { width: 32px; margin-bottom: 12px; }
	.features .inner div { margin-bottom: 32px; }

.about { background: #533feb url("fathom-back.svg") center center no-repeat; background-position: 120% 50%; color: #fff; background-size: auto 60%; }
	.about ul { padding-bottom: 32px; margin-left: 32px; }
	.about li { list-style: circle; padding-left: 32px; padding-bottom: 16px; }

.pricing { background: #fff; }
	.pricing li { color: #888; }
	.pricing-grid { font-size: 14px; letter-spacing: -0.001em; margin: 68px 0; }
	.pricing-grid div { margin-bottom: 68px; display: block; }
	.pricing .pricing-grid h3 { font-weight: 700; color: #533feb; font-size: 32px; }
	.pricing-grid .free h3 { color: #56e3a0; }	
	.pricing-grid h2 { margin-bottom: 32px; color: #533feb; font-weight: 700; }
	.pricing-grid .free h2 { color: #56e3a0; }	
	.pricing-grid ul { margin-bottom: 32px; }
	.pricing-grid li { line-height: 1.6; }
	.pricing h3 { color: #888; }
	.pricing a { color: #222; text-decoration: underline; }
	
.pricing-details { background: #f6f6f6; }
	.pricing-details h3 { color: #533feb; }
	
footer { background: #222; color: #f6f6f6; }
	footer p a { text-decoration: underline; color: #fff; }


.highlight { background: #fcfccc; padding: 2px; display: inline-block; font-weight: 500; color: #222; }





/* = navigation .--. .. -.-. --- */

header nav { margin-bottom: 68px; }
nav li { padding: 4px 0; }
nav li a { color: #888; transition: ease color .2s; }
nav li.active a { color: #533feb; text-decoration: underline; }
nav li a:hover { color: #533feb; }


footer .main a { color: #56e3a0;  }






/* = typography .--. .. -.-. --- */

h1, h2 { font-size: 34px; letter-spacing: -0.016em; }
	h2 span { font-size: 14px; letter-spacing: -0.001em; vertical-align: middle; font-weight: 500; display: inline-block; padding: auto 4px; }
h3 { font-size: 14px; font-weight: 500; letter-spacing: -0.001em; padding-bottom: 16px; }

p { padding-bottom: 32px; }

small { font-size: 14px; display: block; letter-spacing: -0.001em; color: #888; }

article small { margin-bottom: 32px; }
article small a { color: #888; text-decoration: underline; }

article h1 { margin-bottom: 64px; }
article h2 { margin-bottom: 32px; }
article h3 { font-size: 34px; letter-spacing: 0.016em; margin-bottom: 32px; font-weight: 600; }
article h4 { font-weight: 600; font-size: 19px; letter-spacing: -0.009em; margin: 64px 0 32px 0; background: #56e3a0; padding: 4px 16px; color: #fff; display: inline-block; }

article p, article ol, article ul, article blockquote { font-weight: 400; font-size: 19px; letter-spacing: -0.009em; line-height: 1.66; margin-bottom: 32px !important; padding: 0 !important; }
article ol, article ul { margin-left: 32px; }
article li { padding: 0 0 16px 8px; list-style: circle; line-height: 1.66; }

article a { color: #533feb; text-decoration: underline; }



/* = forms .--. .. -.-. --- */

form {}

input, button, .button { font-size: 14px; padding: 12px; letter-spacing: -0.001em; border-radius: 2px; }

.buttons { margin-top: 32px; }

.button { margin-right: 12px; display: inline-block; text-decoration: none !important; width: 100%; margin-bottom: 12px; text-align: center; transition: ease all .2s; }
.button-main { background: #533feb; color: #fff !important; padding: 12px 32px; }
.button-alt { background: #fff; color: #888; padding: 10px 28px; border: 2px solid #ddd; }

.button-main:hover { background: #222; color: #fff !important;}
.button-alt:hover { background: #fff; color: #222; border: 2px solid #222; }


.about .button-main { background: #fff; color: #533feb !important; }
.about .button-alt { color: #fff; border-color: #fff; background: transparent; }
.about .button-main:hover { background: #88ffc6; color: #533feb !important; }
.about .button-alt:hover { color: #88ffc6; border-color: #88ffc6; background: transparent; }


.free .button-alt { color: #56e3a0; border-color: #56e3a0; }
.free .button-alt:hover { color: #222; border-color: #222; }








/* = media .--. .. -.-. --- */
@media screen and (min-width: 720px) {
	body { font-size: 34px; letter-spacing: -0.016em; }
	article { margin: 128px auto; }
	
	.home header, section, footer { min-height: 98vh; display: flex; width: 100%; padding: 32px 0; }
	.content header { margin: 68px 0; }
	.home header { background: #fff url("graph-colour.svg") center center no-repeat; background-position: 0 90%; }
	footer { background: #222 url("graph-bw.svg") center center no-repeat; background-position: 0 90%; }

	nav li { display: inline-block; font-size: 14px; letter-spacing: -0.001em; margin-right: 12px; }

	h1, h2 { font-size: 68px; letter-spacing: -0.016em; line-height: 1; }
	h3 { font-size: 19px; letter-spacing: -0.009em; }

	.buttons { margin-top: 96px; }
	.button { width: auto; margin-bottom: 0; }
	.features .inner { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 72px; }
	.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 12px; }
	.pricing .pricing-grid h3 { font-size: 19px; }

	}
	
@media screen and (min-width: 1152px) {
	.pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 12px; margin-top: 128px; }
	.pricing-grid div { margin-bottom: 0; }
	.inner { padding: 0; }

	header nav, header .buttons { margin-bottom: 128px; }
	footer nav { margin-top: 128px; }
	
	}