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

padding						5, 10, 20, 30, 90
font sizes				15, 18, 28, 46
font family				system sans 400, 600, 700, 900

dark
medium			#4a5568
alt						#718096
light					#a0aec0
lightest			#edf2f7 or #e2e8f0
purple				#6C5FF5
green				#8efdd2
red						#eb3f5f

*/







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

/* @font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  font-display: fallback;
  src: url("/assets/inter.var.woff2") format("woff2");
}

html { font-family: sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
} */


.alert { background: #8efdd2; padding: 5px 15px; border-radius: 5px; color: #1a202c; font-size: 15px; line-height: 1.6; margin: 20px 0 40px 0; font-weight: 600; }


* { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border: none; outline: none; box-sizing: border-box; text-decoration: none; font-size: 100%; font-weight: 440; vertical-align: baseline; font-optical-sizing: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

html, body { background: #fff; }
body { font-size: 19px; line-height: 1.5; color: #333B4B; text-align: center; }

.interface { text-align: left; max-width: 715px; margin: 0 auto; }
.section { margin-bottom: 90px; }

header { margin-top: 90px; display: grid; grid-gap: 10px; grid-template-columns: 1fr 2fr; align-items: center; }
	header svg { transition: ease transform 0.2s; margin: 7px 0 0 0; }
	header svg a { display: block; text-align: left; }
	header svg path { transition: ease fill 0.2s; }
	header svg:hover path { fill: #9187ff; }
	header a span { display: inline-block; text-indent: -9999em; }
	header div { text-align: right; }

.newsbit { margin-bottom: 20px; }
.newsbit span { font-size: 14px; border: 2px solid #b4ffe1; border-radius: 15px; display: inline-block; color: #4a5568; padding: 3px 20px; }
.newsbit span a { text-decoration: none; }

.enviro { display: grid; grid-gap: 10px; grid-template-columns: 20px 1fr; margin-top: 45px; }
	.enviro svg { width: 20px; height: auto; }
	.enviro small { color: #718096; font-size: 12px; margin-top: 1px; }
	.enviro small a { text-decoration: underline; color: #718096; }

article {}

.callout { background: #1a202c url("/assets/above.jpg") center center no-repeat; background-size: cover; border-radius: 5px; padding: 90px; }

.grid { display: grid; grid-gap: 30px 90px; }
	footer .grid { grid-gap: 0 90px; }
	footer .grid-three { grid-gap: 30px; }
	.pricing .grid-three { grid-gap: 30px; }
	.grid-two { grid-template-columns: repeat(2, 1fr); }
	.grid-two .pag { grid-column: span 2; }
	.grid-two .col-first { grid-column: span 2; margin-bottom: 60px; }
	footer .grid-two { grid-template-columns: repeat(2, 1fr); grid-gap: 30px; }
	.col1 { order: 2; }
	.col2 { order: 3; }
	.col3 { order: 1; }
	.grid-three { grid-template-columns: repeat(3, 1fr); }
	.grid-cat { grid-template-columns: 1fr 90px; align-items: center; }
	.grid-map { grid-template-columns: 1fr 180px; align-items: center; }
	.grid-map img { max-width: 200px; }
	.callout.grid-two { grid-template-columns: 1fr 4fr; align-items: center; }
	.span-all { grid-column: 1/4; }
	.grid-one .col { margin-bottom: 30px; }
	.blog-posts .col { margin-bottom: 60px; }

.brand-grid { display: grid; grid-gap: 20px; align-items: center; }
.brand-grid div { padding: 90px 30px; border-radius: 5px; text-align: center; }

.logos { margin: 20px 0; text-align: center; }
.logos img { text-align: center; margin: 0 20px; max-width: 150px; }

.buttons { margin: 40px 0; }

footer:before { content: ""; background: #edf2f7; width: 100%; height: 5px; display: block; border-radius: 5px; }
	footer .col { margin-top: 90px; }

hr { margin: 20px 0 30px 0; }
hr:before { content: ""; background: #edf2f7; width: 100%; height: 2px; display: block; border-radius: 5px; }

.pag { margin-top: 40px; }
.pag a { color: #4a5568; }

.blog-img { margin: 40px -80px; }


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

h1, h2, h3 { color: #0C0C0D; }
h1 a, h2 a, h3 a, h4 a { font-weight: inherit !important; }
h1 { font-size: 65px; line-height: 1; font-weight: 900; margin-bottom: 30px; letter-spacing: -0.03em; }

h2 { font-size: 29px; line-height: 1; font-weight: 700; margin-bottom: 40px; letter-spacing: -0.015em; }
	.callout h2 { color: #fff; }
	.post h2 { margin: 40px 0 20px 0; }
	.pricing .grid h2 { margin: 10px 0; }
	article h2 { margin: 30px 0 20px 0; }
	.brand article h2 { margin-top: 90px; }

article h2 a { color: inherit !important; font-weight: inherit; }

h3 { font-size: 21px; line-height: 1.2; margin: 30px 0 10px 0; font-weight: 700; position: relative; }
	.home-cats h3 { margin-top: 10px; }
	footer h3 { display: inline-block; margin: 10px 0; }
	article h3 a { color: #1a202c; }
	footer h3 a { font-weight: 700; color: #1a202c; }
	footer h3 a:hover { color: #6C5FF5; }
	/* footer h3:after { content: ""; background: url("/assets/fathom-analytics.svg") center center no-repeat; background-size: 16px auto; width: 16px; height: 16px; position: absolute; right: -24px; top: 2px; } */
	.changelog h3 { margin-top: 30px; }

h4 { color: #1a202c; margin: 10px 0 10px 0; font-weight: 700;  }

blockquote { border-left: 3px solid #edf2f7; padding: 0 20px; margin: 30px 0; color: #4a5568; }
	article blockquote p { padding: 0; font-size: 19px; }
	article blockquote a { font-weight: 700; }
	blockquote cite { display: block; margin: 10px 0 20px 0; }

h5 { font-size: 12px; font-weight: 700; color: #a0aec0; letter-spacing: 1px; text-align: center; text-transform: uppercase; margin: 60px 0 0 0; }

p {}
	article p, article ul, article ol { padding-bottom: 20px; }
	.grid p { font-size: 15px; line-height: 1.6; }
	article.callout p { color: #a0aec0; padding: 0; }

small { font-size: 14px; color: #697387; display: block; font-weight: 500; }
	small.no-space { margin-top: -10px; }
	footer small { margin-bottom: 10px; font-size: 15px; color: #697387; }
	form small { margin: 10px 0; }
	article small a { color: #697387; font-weight: 500; text-decoration: underline; }
	article small a:hover { color: #a0aec0; }

u { font-weight: inherit; text-decoration: underline; }
s { text-decoration: line-through; }
pre { background: #edf2f7; padding: 15px; margin-bottom: 20px; display: block; border-radius: 5px; word-wrap: break-word; page-break-inside: avoid; overflow: auto; line-height: 1; }
code { font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; font-size: 12px; }
p code, li code { display: inline-block; padding: 2px 5px; background: #edf2f7; border-radius: 5px; }

b, strong { font-weight: 600; color: #1a202c; }
i, em { font-style: italic; font-variation-settings: 'ital' 1; }

iframe { margin-bottom: 20px; }

img { max-width: 100%; }
	img.bio { max-width: 180px; }
	img.testim { border-radius: 100px; overflow: hidden; width: 60px; height: 60px; margin: 20px 0 0 0; }
	img.cat { transition: ease transform 0.2s; height: 130px; }
	img.cat:hover { transform: rotate(4deg) scale(1.1); }
	img.round { border-radius: 5px; }
	img.img-center { width: 60%; display: block; margin: 20px auto; max-width: auto; }
.podcastimg { width: 40%; float: right; margin: 0 0 40px 60px; }

a { transition: ease color 0.2s; }
	article a { font-weight: 600; color: #6C5FF5; text-decoration: underline; }
	article a:hover { color: #9187FF; }
	.callout a { color: #a0aec0; }
	.callout a:hover { color: #fff; }
	a.button, button { padding: 12px 30px; border-radius: 5px; font-size: 15px; line-height: 1.6; font-weight: 500; margin-right: 10px; text-decoration: none; transition: ease background 0.2s; display: inline-block; }
	.main { background: #6C5FF5; color: #fff; }
	.main:hover { background: #718096; color: #fff; }
	.alt { background: #edf2f7; color: #4a5568; }
	.alt:hover { background: #cbd5e0; color: #4a5568; }
	article h2 a { color: #1a202c; }
	article h2 a:hover { color: #718096 !important; }



table { width: 100%; margin: 20px 0; border-spacing: 0; }
	table th { font-size: 19px; line-height: 1.2; font-weight: 700; color: #1a202c; padding: 20px; border-bottom: 3px solid #edf2f7; }
	table td { padding: 20px; font-size: 15px; line-height: 1.6; border-bottom: 1px solid #edf2f7; }
	table.smaller td { padding: 10px; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #edf2f7; }
	table td:first-of-type, table th:first-of-type { padding-left: 0; }

.right { text-align: right; }

ul, ol { list-style: none; }
	article li ul, article li ol { margin-bottom: 5px; padding-bottom: 0; }
	article ul li { list-style: disc; margin-bottom: 5px; }
	article li ul li { list-style: circle; margin-bottom: 5px; }
	article ol li { list-style-type: decimal; margin-bottom: 20px; }
	article li { margin-left: 20px; padding-left: 10px; margin-bottom: 5px; }
	article li li { margin-left: 40px; padding-left: 10px; margin-bottom: 5px; }
	article ol ol li { list-style: lower-alpha; }

	footer ul { font-size: 14px; color: #1a202c; line-height: 1.89; }
	footer li span { font-weight: 600; }
	footer li a { font-weight: 500; color: #718096; }
	footer li.active a { color: #6C5FF5; }
	footer li a:hover { color: #6C5FF5; }

article ul.checked { margin-left: 0; margin-right: 40px; }
	article ul.checked li { list-style: none; background: url("/assets/check-circle-regular.svg") left 3px no-repeat; background-size: 16px auto; margin-left: 0; margin-bottom: 10px; padding-left: 30px; font-size: 15px; }

.highlight { background-image: linear-gradient(120deg, rgba(142,253,210,.4) 0%, rgba(142,253,210,.4) 100%); background-repeat: no-repeat; background-size: 100% 6px; background-position: 0 65%; transition: ease background-size .2s; padding: 0 4px; margin: 0 -2px; }

.meta { margin-top: 30px; }

.tag { background: #F2F5F7; border-radius: 5px; color: #333B4B; font-size: 10px; font-weight: 600; margin-right: 10px; display: inline-block; padding: 2px 8px; text-transform: uppercase; }
	article .tag a { text-decoration: none !important; font-weight: 600 !important; }

.signin { background: #F2F5F7; border-radius: 15px; color: #333B4B; font-size: 14px; font-weight: 500; margin-right: 10px; display: inline-block; padding: 5px 20px; transition: ease .4s background; }
.signin:hover { background: #D3DBE6; color: #333B4B; }

.signup { background: #4a5568; border-radius: 15px; color: #fff; font-size: 14px; font-weight: 500; margin-right: 10px; display: inline-block; padding: 5px 20px; transition: ease .4s background; }
.signup:hover { background: #1a202c; }

.author { display: grid; grid-template-columns: 70px 1fr; align-items: center; grid-column-gap: 20px; margin-bottom: 20px; }
	article .author * { padding: 0; margin: 0; }
	article .author p { font-weight: 500; }
	article .author small { margin-bottom: 5px; }
	article .author a { color: inherit; font-weight: 500; }
	article .author img { border-radius: 40px; }





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

form { display: grid; grid-template-columns: 1fr 90px; max-width: 530px; grid-gap: 10px; }
input { background: #edf2f7; color: #1a202c; padding: 12px; border-radius: 5px; font-size: 15px; line-height: 1.6; font-weight: 500; margin-right: 10px; width: 100%; }
::-webkit-input-placeholder { color: #718096; opacity: 1; }
::-moz-placeholder { color: #718096; opacity: 1; }
:-ms-input-placeholder { color: #718096; opacity: 1; }
:-moz-placeholder { color: #718096; opacity: 1; }

.form-full { display: grid; grid-template-columns: 1fr 3fr; width: 100%; max-width: 100%; align-items: center; }
.form-full label { display: block; font-weight: 500; font-size: 15px; margin-top: -4px; }
.form-full input { margin-bottom: 10px; }



/* = media queries	..-. .- - .... --- -- */

@media screen and (max-width: 880px) {
.blog-img { margin: 40px 0; }
.form-full { display: block; }


}

@media screen and (max-width: 730px) {
	body { padding: 20px; font-size: 15px; }
	header { margin-top: 0; }
	.section { margin-bottom: 30px; }
	footer .col { margin-top: 30px; }

	.col { margin-bottom: 30px; width: 100%; clear: both; }
	.callout { padding: 30px; }
	.grid, form { display: block; max-width: 100%; }
	.hide { display: none; }
	footer .grid-three { grid-gap: 30px; display: grid; grid-template-columns: repeat(3, 1fr); }

	h1 { font-size: 28px; font-weight: 700; }
	h2 { font-size: 19px; }
	h3 { font-size: 15px; }
	a.button, button, input { width: 100%; margin-bottom: 10px; display: block; text-align: center;}
	img.cat { float: right; margin: 0 0 30px 30px; }
	.ftp { margin-top: 15px; max-width: 50px; }

	img.img-center { width: 100%; display: block; margin: 20px auto; max-width: auto; }

.podcastimg { display: none; }
.blog-img { margin: 40px 0; }

.shop-col { margin-bottom: 40px; }

.brand-grid div { margin-bottom: 15px; }
footer li a { display: block; padding: 3px 0; }

.logos img { text-align: center; margin: 0 20px; max-width: 90px; }

}