/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Landinpage */

* {
	font-family: 'Jost', sans-serif;
}

html, body {
	background: var(--bg-body);
}

html {
	scroll-behavior: smooth;
}

body {
	font-size: var(--text-m);
}

a:link,
a:visited {
	text-decoration: none;
	color: var(--primary);
}

a:active,
a:hover {
	text-decoration: none;
	color: var(--text-body);
}

h1, h2, h3, h4, h5, h6, p {
	margin-bottom: var(--space-s);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-title);
	text-transform: uppercase;
}

h3 {
	color: var(--primary);
}



a.btn {
	color: #fff;
	display: inline;
}

.container {
	max-width: 1000px;
}


.site-main {

}



.section {	
	padding: var(--space-3xl) var(--space-3xl);
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
}

/* Hero */

.section.section__hero {
	background: var(--dark);
	color: var(--light);
background: rgb(0,172,199);
	background: radial-gradient(circle, rgba(0,172,199,1) 0%, rgba(0,0,0,1) 75%);
}

.hero__content {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-s);
}

.section.section__guide {
	
	
}

/* Guide */





.mail {
	margin-top: 40px;
	border: 1px solid var(--border-primary);
	background-color: var(--bg-surface);
	border-radius: var(--radius-s);
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

.mail__body {
	padding: var(--space-l);
	line-height: 1.6;
	color: var(--text-body);
}




.mail span {
	border: 0px dashed var(--primary);
	background-color: var(--primary-10);
	border-bottom: 1px dashed var(--primary);
	cursor: pointer;

}

.mail__header {
	background-color: var(--bg-surface);
	padding: var(--space-xs);
	border-bottom: 1px solid var(--border-primary);
	color: var(--text-body);
}




.powered {
	padding-top: var(--space-xl);
	text-align: center;
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
}


.powered img {
	margin: auto;
	width: 100px;
}

			.mail__body * {
	all: revert; 
}

.visual img {
	width: 200px;
	height: 200px;
	margin: auto;
}

.container {
	max-width: 1000px;
	margin: auto;
	
}




.mail__header--controls {
	display: flex;
	column-gap: var(--space-3xs);
}



.site-footer {
	font-size: var(--text-m);
	padding: 0 var(--space-m) var(--space-2xl) var(--space-m);
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	color: var(--text-body);
	text-align: center;
}



/* Intro JS */

.introjs-progress {
	border-radius: var(--radius-s) !important;
	background-color: var(--border-primary) !important;
}

.introjs-tooltip {
	background-color: var(--bg-surface) !important;
	min-width: 350px !important;
	max-width: 400px !important;
	border-radius: var(--radius-s) !important;
}

.introjs-tooltip-title {
	text-transform: none;
	font-size: var(--text-m);
}



.introjs-tooltiptext {
	font-size: var(--text-s);
}

.introjs-progressbar {
	background-color: var(--primary)!important;
}

.introjs-button {
	padding: var(--space-3xs) var(--space-xs) !important;
	border: none !important;
	text-shadow: none !important;
	font-size: 14px;
	color: var(--light) !important;
	background-color: var(--primary) !important;
	border-radius: var(--radius-s) !important;
}

.introjs-button:hover {
	outline: 0;
	text-decoration: none;
	border-color: var(--primary) !important;
	background-color: var(--primary) !important;
	color: var(--light) !important;
}

.introjs-button:focus {
	background-color: var(--primary) !important;
	box-shadow: none !important;
	border: none !important;
	color: var(--light) !important;
}

.introjs-button:active {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--light) !important;
}