*{margin:0;padding:0;outline:0;font-weight:normal;font-style:normal;border:0;text-decoration:none;list-style-type:none;font-size:100%;line-height:1;box-sizing: border-box;}
body {display: flex; flex-direction: column; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 400; line-height: 160%; color: #00091A; background: #F1F2E6;}
h1 {line-height: 130%; font-weight: 500; font-size: 3em; letter-spacing: -0.02em;}
h2 {line-height: 160%; font-weight: 400; font-size: 1.5em;}
h3 {line-height: 130%; font-weight: 500; font-size: 2.7em;}
h4 {line-height: 160%; font-weight: 400; font-size: 1.5em;}
a {color: #00091A;}
a:hover {text-decoration: underline;}
u {text-decoration: underline;}
.reduced-opacity {color: rgba(0, 9, 26, 0.5)}
.button {display: inline-block; height: 48px; line-height: 48px; padding: 0 20px; font-size: 1.2em; font-weight: 500; letter-spacing: 0.16em; border-radius: 8px; text-transform: uppercase; background: #fff; white-space: nowrap; cursor: pointer;}
.button:hover {color: inherit; text-decoration: underline;}
.button-primary {background-color: #F2A100; color: #00091A;}
.input {display: inline-block; height: 48px; line-height: 48px; padding: 0 20px; font-size: 1.2em; border-radius: 8px; background: rgba(0, 0, 0, 0.09); border: 1px solid #85898C; font-family: inherit; font-weight: inherit;}
.button s {text-decoration: line-through; opacity: 0.5;}

#snackbar{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#00091A;color:#fff;text-align:center;border-radius:4px;padding:10px;position:fixed;z-index:1;left:50%;top:30px}
#snackbar.show{visibility:visible;animation:fadein .5s,fadeout .5s 2.5s}
@keyframes fadein{from{top:0;opacity:0}to{top:30px;opacity:1}}
@keyframes fadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}

.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext {visibility: hidden; width: 300px; background-color: #00091A; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; bottom: 110%; left: 50%; margin-left: -150px; font-size: 0.7em; position: absolute; z-index: 1;}
.tooltip .tooltiptext::after {content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #00091A transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}

table {width: 100%; border-spacing: 0; background: #fff; border: 2px solid #00091A; border-radius: 8px;}
tr:hover {background-color: #FFD480!important;}
tr:nth-child(odd) {background-color: #f5f5f5;}
th, td {padding: 10px;}
th {text-align: left;}

table tr:first-child th:first-child {border-top-left-radius: 8px;}
table tr:first-child td:last-child {border-top-right-radius: 8px;}
table tr:last-child th:first-child {border-bottom-left-radius: 8px;}
table tr:last-child td:last-child {border-bottom-right-radius: 8px;}

header {width: 630px; margin: 0 20px; padding: 50px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 2px dashed #00091A;}

#hero {width: 960px; margin: 0 20px; padding: 50px 0; display: flex; flex-direction: column; align-items: center;}
#hero h1, #hero h2 {text-align: center;}
#hero h1 span {font-weight: inherit;}
#hero h2 {margin-top: 20px;}
#main-cta {margin-top: 60px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
#main-cta div {margin: 0 10px;}
#main-cta div:first-child {display: flex; flex-direction: row; align-items: center; margin-right: 30px;}
#main-cta div img {margin-right: 5px;}
#main-cta div p {margin-left: 10px;}
#main-cta .available, #main-cta .reduced-opacity {line-height: 160%;}
#main-cta .available {color: #1F9947;}

#preview {width: 960px; margin: 0 20px; overflow: hidden; border: 2px solid #00091A; border-radius: 8px; background: #efefef;}

#video-container {overflow: hidden; position: relative; width:100%;}
#video-container::after {padding-top: 56.25%; display: block; content: '';}
#video-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#message {width: 800px; margin: 0 20px; padding: 100px 0; display: flex; flex-direction: column; align-items: center;}
#message h3, #message h4 {text-align: center;}
#message h4 {margin-top: 40px;}

#features {width: 960px; margin: 0 20px; padding: 100px 0 0 0; border-top: 2px dashed #00091A;}
#features .row {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 100px;}
#features .row > *:first-child {margin-right: 65px;}
#features .row h4 {margin-top: 26px;}

#banner {width: 800px; margin: 0 20px 100px 20px; padding: 50px; text-align: center; background-color: #F2A100; border-radius: 8px;}
#banner .button {margin-top: 20px;}

#tiers {width: 960px; margin: 0 20px 100px 20px; padding: 50px 0; display: flex;  text-align: left; background-color: #F2A100; border-radius: 8px;}
#tiers > div {flex: 1; padding: 0 50px; border-right: 2px dashed rgba(0, 0, 0, 0.16);}
#tiers > div h3 {margin-bottom: 10px;}
#tiers > div ul {margin-bottom: 20px;}
#tiers > div ul li {line-height: 200%;}
#tiers > div:last-child {border: none;}

#subscribe-form {display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 100px;}
#subscribe-form form {margin-top: 20px;}

#page-layout {width: 630px; margin: 0 20px; padding: 50px 0;}

footer {width: 960px; margin: 0 20px; padding: 30px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-top: 2px dashed #00091A;}
footer p:first-child {flex-grow: 1; flex-basis: 0;}
footer p:last-child {flex-grow: 1; flex-basis: 0; text-align: right;}

#header-banner {display: block; width: 100%; background: rgba(0, 0, 0, 0.09); padding: 15px; text-align: center; vertical-align: middle; font-size: 1em;}
#header-banner img {vertical-align: middle;}

.img-container {width: 100%; overflow: hidden; border: 2px solid #00091A; border-radius: 8px; background: #efefef; margin: 20px 0;}
.img-container img {width: 100%;}

.fullscreen-img-container {width: 960px; margin: 0 20px; overflow: hidden; border: 2px solid #00091A; border-radius: 8px; background: #efefef;}
.fullscreen-img-container img {width: 100%;}

.logo-figma {filter: grayscale(100%); opacity: 0.25;}
.logo-figma:hover {filter: grayscale(0%); opacity: 1;}

#gumroad-container {width: 992px; margin: 0 20px;}
.gumroad-product-embed {text-align: center;}

.banner-discount {display: flex; background-color: #fff; padding: 15px 20px; margin-bottom: 20px; border-radius: 6px; font-size: 1.5em; line-height: 150%; box-shadow: 0 1px 2px 0px rgba(0,0,0,.1);}
.banner-discount i {margin-right: 20px;}
.banner-discount > * {line-height: 160%;}

@media only screen and (max-width: 1000px) {
	body {font-size: 12px;}
	header, #hero, #preview, #message, #features, #banner, footer, #page-layout, .fullscreen-img-container, #gumroad-container, #tiers {width: 90%; margin: 0 5%}
	#hero h1 span {display: inline-block;}
	#main-cta {flex-direction: column;}
	#main-cta div {margin: 0 0 30px 0;}
	#message h3, #message h4 {text-align: left;}
	#features .row {flex-direction: column; margin-bottom: 50px;}
	#features .row img {max-width: 100%;}
	#features .row-odd img {order: 2;}
	#features .row-odd div {order: 1}
	#features .row > *:first-child {margin-right: 0; margin-bottom: 10px;}
	#features .row-odd > *:first-child {margin-bottom: 0;}
	#features .row-odd > *:last-child {margin-bottom: 10px;}
	#banner {margin-bottom: 100px;}
	#tiers {margin-bottom: 100px; flex-direction: column; padding: 0 50px;}
	#tiers > div {border-right: none; padding: 50px 0; border-bottom: 2px dashed rgba(0, 0, 0, 0.16);}
	footer {flex-direction: column; padding: 30px 0 60px 0;}
	footer * {margin-bottom: 20px;}
	footer img {order: 1;}
	footer p:first-child {order: 2;}
	footer p:last-child {order: 3; text-align: center;}
	#subscribe-form {flex-direction: column; text-align: center; width: 90%; margin: 0 5% 100px 5%;}
	#subscribe-form input {margin-bottom: 20px;}
}