*{margin:0; padding:0;}
[v-cloak]{ display: none!important; }
html{
	background-color: var(--color-base);
	color:var(--color-ink);
}
html, input, select, button, textarea{
	font-family: 'Space Grotesk', sans-serif;
	font-size:14pt;
	font-weight:300;
}
input, textarea, select, button, .btn{
	font-size:1rem;
}

/* ==========
TYPO, INPUT, CONTROLS
========== */
h1, h2, h3{ 
	/*maybe make h2, h3 semibold 600*/
	font-weight:700;
	font-size: 2em;
}
h1{ text-transform:uppercase;}
h2{ font-size: 1.5em; }
h3, h4{ font-size:1.2em; }
h4{ font-weight:400; }
h5{ font-weight:400; font-size:1.1em; }
h6{ font-weight:700; font-size:1em; }

h1, body.index h2{
	 color:var(--color-headline);
}
.inverted-base h1, body.index .inverted-base h2,
.inverted-base{
	color:var(--color-ink-inverted-base);
}
.normal-base h1, body.index .normal-base h2,
.normal-base{
	color:var(--color-ink);
}

b{ font-weight:400; }
b b, b.strong{ font-weight:700; }

h1, h2, h3, h4, h5, h6, p, li{
	margin-bottom:1em;
}
p.last{ margin-bottom:0; }
.content > h2{ margin-bottom:0.5em; }
input, textarea, .textbox, select, button, .btn{
	margin-bottom:1rem;
}
input, textarea, .textbox, select{ margin-top:0.5rem; }
form .group{
	margin-top:0.5em;
}

img{ max-width:100%; }
ol, ul{
	list-style-position:outside;
	padding-left:1.24em;
}
ul.semantic{
	list-style:none;
	padding:0;
}
hr{ 
	border:0;
	border-top:var(--layout-border);
	margin:1em 0;
}
a{
	color:var(--color-link);
	text-decoration:underline;	 
}
.dark a, .footer a{ color:var(--color-link-inverted-base); }
a.disabled{
	pointer-events: none;
	opacity: 0.75;
}
a.loading{
	animation: loadingglow ease-in-out 1s infinite;
}
@keyframes loadingglow {
	0% { opacity: 0.5; }
	50% { opacity: 1; }
	100% { opacity: 0.5; }
}
.nowrap{ white-space:nowrap; }
.rel{ position:relative; }
.invisible{ opacity:0; }
.visible{ opacity:1; }
.transitionable{ transition:all 0.2s linear; }
.present-invisible{ position: absolute; top:0; left:0; opacity:0; }
.hide-belowtablets{ display:none; }
.hide-belowregulardesktops{ display:none; }
.nooverflow{ overflow:hidden }

.preload{
	position:absolute;
	width:1px; height:0px;
	opacity:0;
	pointer-events:none;
}

.softcorner,
.checklabel .checkbox,
.ico, .iconed:before,
.menu .profile .actions,
.how .example .image{
	border-radius:var(--border-radius-control);
}
input, textarea, .textbox,
.btn, button,
.app-search-list,
.pricing-table .ribbon .highlight,
.bookademo, .bookademo .inside{
	border-radius:var(--border-radius-inputs);
}
.card,
.how .page,
.status-message,
.tab, .tab:before{
	border-radius:var(--border-radius-layout);
}
.app-message .box,
.pricing-table li .inside,
.pricing-table li .in-popular,
html.auth .card{
	border-radius: var(--border-radius-layout-large);
}
.gradientcontainer,
html.dashboard .tutorial .step4{
	background: var(--adspawn-gradient); 
	background-size:200% auto;
	animation: gradientmove linear 10s infinite;
}
.gradientcontainer.smallobject{
	background-size:1600% auto;
	animation-name:gradientmovebig;
	animation-duration:150s;
}

input, textarea, .textbox, .btn, a.btn, button{ 
	border: none;
	outline: none;
	/*padding:0.65em 1em;*/
	padding:0.5em 1em;
	box-sizing:border-box;
	line-height:1.5;
	vertical-align:middle;
}
textarea{ vertical-align:top; }
input[type="file"]{
	height:2.5em;
}

input, textarea, .textbox{
	max-width:100%;
	background:var(--color-base);
	color:var(--color-ink);
	transition:all 0.1s cubic-bezier(0.7, 0, 1, 1);
	outline: var(--input-border-width) solid var(--color-input-border);
	box-shadow: var(--color-box-shadow-input) 0 0 1.5em 0.1em;
}
input::placeholder{ 
	/*font-weight:400;*/
	color:rgba(var(--color-ink-soft-rgb), 0.65);
	font-style:normal;
	transition:all 0.2s linear;
}
input:focus::placeholder{
	color:rgba(var(--color-ink-soft-rgb), 0.4);
}
input:placeholder-shown { text-overflow: ellipsis; }
/*regular*/
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="email"]:focus, input[type="email"]:active,
input[type="number"]:focus, input[type="number"]:active,
input[type="tel"]:focus, input[type="tel"]:active,
textarea:focus, textarea:active,
.textbox:focus, .textbox:active{
	outline: var(--input-border-width) solid var(--color-input-border-focus);
	box-shadow: var(--color-box-shadow-input-focus) 0 0 1em 0.2em;
	transition-timing-function:cubic-bezier(0, 0, 0.3, 1);
}

input.error, textarea.error, .textbox.error,
input.touched:invalid, textarea.touched:invalid{
	outline-color: var(--color-error); 
}

input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="tel"]:disabled, textarea:disabled,
input[type="text"]:read-only, input[type="password"]:read-only, input[type="email"]:read-only, input[type="number"]:read-only, input[type="tel"]:read-only, textarea:read-only,
.textbox:read-only{
	box-shadow:none;
	background: var(--color-input-disabled-background);
	cursor:default;
	caret-color: transparent;
}

.checklabel{ 
	position:relative; 
	cursor:pointer;
}
.checklabel.inactive{ pointer-events:none; }
.checklabel input[type="checkbox"]{
	width:0; height:0; opacity:0; position:absolute;
}
.checklabel .checkbox{
	position:relative;
	box-sizing:border-box;
	
	vertical-align: baseline;
	margin-bottom: -0.1em;
	margin-right:0.25em;
	
	content:" ";display:inline-block;
	width:1em; height:1em;
	outline: 1px solid var(--color-checkable-border);
	
	transition: background 250ms cubic-bezier(0.4,0,0.23,1), box-shdow 0.1s cubic-bezier(0.7, 0, 1, 1);
}
.checklabel input[type="checkbox"]:focus ~ .checkbox{
	box-shadow: var(--color-box-shadow-input-focus) 0 0 1em 0.2em;
}
.checklabel input[type="checkbox"]:not(:disabled):hover ~ .checkbox{
	background:var(--color-checkable-fill-hover);
}
.checklabel input[type="checkbox"]:checked ~ .checkbox{
	background:var(--color-checkable-fill-marked);
}
.checklabel input[type="checkbox"]:disabled ~ .checkbox{
	background:var(--color-checkable-fill-disabled);
	outline-color:var(--color-checkable-fill-disabled);
}
.checklabel input[type="checkbox"]:checked ~ .checkbox:after,
.checklabel input[type="checkbox"]:not(:disabled):hover ~ .checkbox:before{
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0.2em;
	border-right: 0.15em solid transparent;
	border-bottom: 0.15em solid transparent;
	transform: rotate(45deg);
	transform-origin: 0% 100%;
	animation: checkbox-check 0.15s cubic-bezier(.4,.0,.23,1) forwards;
}
.checklabel input[type="checkbox"]:not(:disabled):hover ~ .checkbox:before{
	animation: none;
	width: .2em;
	height: .5em;
	border-color: var(--color-checkable-mark);
	transform: translate3d(0,-.5em,0) rotate(45deg);
}
.checklabel input[type="checkbox"]:checked ~ .checkbox:before{
	display: none;
}
@keyframes checkbox-check{
	0%{
		width: 0;
		height: 0;
		border-color: var(--color-checkable-mark);
		transform: translate3d(0,0,0) rotate(45deg);
	}
	33%{
		width: .2em;
		height: 0;
		transform: translate3d(0,0,0) rotate(45deg);
	}
	100%{
		width: .2em;
		height: .5em;
		border-color: var(--color-checkable-mark);
		transform: translate3d(0,-.5em,0) rotate(45deg);
	}
}
.checklabel input[type="checkbox"]:checked:not(:disabled):hover ~ .checkbox:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 0.2em;
	width: 0.47em;
	height: 0.03em;
	background-color: var(--color-checkable-mark);
	transform: translateY(-50%);
	animation: none;
}

/* inverted base colors for form elements*/
.inverted-form,
input.light, textarea.light, .textbox.light{
	--color-input-disabled-background: var(--color-inverted-input-disabled-background);
	--color-input-border: var(--color-inverted-input-border);
	--color-input-border-focus: var(--color-inverted-input-border-focus);
	--color-box-shadow-input: var(--color-inverted-box-shadow-input);
	--color-box-shadow-input-focus: var(--color-inverted-box-shadow-input-focus);

	--color-checkable-fill-disabled: var(--color-inverted-checkable-fill-disabled);
	--color-checkable-fill-marked: var(--color-inverted-checkable-fill-marked);
	--color-checkable-fill-hover: var(--color-inverted-checkable-fill-hover);
	--color-checkable-border: var(--color-inverted-checkable-border);
	--color-checkable-mark: var(--color-inverted-checkable-mark);
}
.inverted-unsaturated-form{
	--color-input-disabled-background: var(--color-inverted-unsaturated-input-disabled-background);
	--color-input-border: var(--color-inverted-unsaturated-input-border);
	--color-input-border-focus: var(--color-inverted-unsaturated-input-border-focus);
	--color-box-shadow-input: var(--color-inverted-unsaturated-box-shadow-input);
	--color-box-shadow-input-focus: var(--color-inverted-unsaturated-box-shadow-input-focus);

	--color-checkable-fill-disabled: var(--color-inverted-unsaturated-checkable-fill-disabled);
	--color-checkable-fill-marked: var(--color-inverted-unsaturated-checkable-fill-marked);
	--color-checkable-fill-hover: var(--color-inverted-unsaturated-checkable-fill-hover);
	--color-checkable-border: var(--color-inverted-unsaturated-checkable-border);
	--color-checkable-mark: var(--color-inverted-unsaturated-checkable-mark);
}

button, .btn, a.btn, input[type="submit"]{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	
	position:relative;
	overflow:hidden;
	font-weight:400;
	cursor:pointer;
	
	background:	var(--color-main-button-intensive);
	background: var(--main-button-intensive-gradient);
	background-size:200%;
	background-position: 100%;
	--current-ink-color: var(--color-main-button-text);
	color: var(--current-ink-color);
	
	transition: all 0.13s linear;
	transition-property:background, box-shadow;
}
.btn.minsize, button.minsize{ min-width:6em; }
button.inactive, .btn.inactive, a.btn.inactive, input[type="submit"].inactive{
	pointer-events:none;
	opacity:0.7;
}
button.inactive_eventable, .btn.inactive_eventable, a.btn.inactive_eventable, input[type="submit"].inactive_eventable{
	opacity:0.7;
	cursor:default;
}
button.red-blank, .btn.red-blank, a.btn.red-blank, input[type="submit"].red-blank{
	background: var(--color-main-button-intensive-light);
	--current-ink-color: var(--color-main-button-intensive-light-text);
	outline: 2px solid var(--color-main-button-intensive-light-border);
}
button.pink, .btn.pink, a.btn.pink, input[type="submit"].pink{
	background-color: var(--color-main-button-calm);
	background-image: var(--main-button-calm-gradient);
}
button.pink.to-red, .btn.pink.to-red, a.btn.pink.to-red, input[type="submit"].pink.to-red{
	background-color: var(--color-main-button-calm);
	background-image: var(--main-button-calm-gradient-reversed);
}
button.black, .btn.black, a.btn.black, input[type="submit"].black{
	background: var(--color-base-inverted-desaturated);
	--current-ink-color: var(--color-ink-inverted-base);
}
button.white, .btn.white, a.btn.white, input[type="submit"].white{
	background: var(--color-base);
	--current-ink-color: var(--color-ink);
}
button.pink-plain, .btn.pink-plain, a.btn.pink-plain, input[type="submit"].pink-plain{
	background:var(--color-main-button-calm);
	--current-ink-color: var(--color-ink-inverted-base);
}
button.transparent, .btn.transparent, a.btn.transparent, input[type="submit"].transparent{
	background: rgba(var(--color-base-rgb), 0.5);
	outline:1px solid var(--color-base-stronger);
	padding:calc(0.5em - 1px) 1em; /*nitpicking*/
	--current-ink-color: var(--color-ink);
}
button.transparent.stronger, .btn.transparent.stronger, a.btn.transparent.stronger, input[type="submit"].transparent.stronger{
	outline-color:var(--color-layout-border); 
}
button > *, .btn > *, input[type="submit"] > *{ vertical-align:middle; }

button:not(.inactive_eventable):hover, .btn:not(.inactive_eventable):hover, input[type="submit"]:not(.inactive_eventable):hover,
button:not(.inactive_eventable):focus, .btn:not(.inactive_eventable):focus, input[type="submit"]:not(.inactive_eventable):focus{
	background-position:0%;
	transition:background 0.2s cubic-bezier(0.29, 0.01, 0.41, 1.02);
}
button.red-blank:not(.inactive_eventable):hover, .btn.red-blank:not(.inactive_eventable):hover, a.btn.red-blank:not(.inactive_eventable):hover, input[type="submit"].red-blank:not(.inactive_eventable):hover,
button.red-blank:not(.inactive_eventable):focus, .btn.red-blank:not(.inactive_eventable):focus, a.btn.red-blank:not(.inactive_eventable):focus, input[type="submit"].red-blank:not(.inactive_eventable):focus{
	background: var(--color-main-button-intensive-light-hover);
	--current-ink-color: var(--color-main-button-intensive-light);
}
button.white:not(.inactive_eventable):hover, .btn.white:not(.inactive_eventable):hover, input[type="submit"].white:not(.inactive_eventable):hover,
button.white:not(.inactive_eventable):focus, .btn.white:not(.inactive_eventable):focus, input[type="submit"].white:not(.inactive_eventable):focus{
	background-color:var(--color-base-grayer);
}
button.black:not(.inactive_eventable):hover, .btn.black:not(.inactive_eventable):hover, input[type="submit"].black:not(.inactive_eventable):hover,
button.black:not(.inactive_eventable):focus, .btn.black:not(.inactive_eventable):focus, input[type="submit"].black:not(.inactive_eventable):focus{
	background-color:var(--color-base-grayer);
	--current-ink-color: var(--color-ink);
}
button.pink-plain:not(.inactive_eventable):hover, .btn.pink-plain:not(.inactive_eventable):hover, a.btn.pink-plain:not(.inactive_eventable):hover, input[type="submit"].pink-plain:not(.inactive_eventable):hover,
button.pink-plain:not(.inactive_eventable):focus, .btn.pink-plain:not(.inactive_eventable):focus, a.btn.pink-plain:not(.inactive_eventable):focus, input[type="submit"].pink-plain:not(.inactive_eventable):focus{
	background:var(--color-ink-inverted-base);
	--current-ink-color: var(--color-main-button-calm);
}
button.transparent:not(.inactive_eventable):hover, .btn.transparent:not(.inactive_eventable):hover, input[type="submit"].transparent:not(.inactive_eventable):hover,
button.transparent:not(.inactive_eventable):focus, .btn.transparent:not(.inactive_eventable):focus, input[type="submit"].transparent:not(.inactive_eventable):focus{
	background: rgba(var(--color-base-rgb), 0.8);
}
/*simple transition to monochrome red, with exception of .pink gradiented calm buttons, because they transform with background to it*/
button:not(.pink).to-red:not(.inactive_eventable):hover, .btn:not(.pink).to-red:not(.inactive_eventable):hover, a.btn:not(.pink).to-red:not(.inactive_eventable):hover, input[type="submit"]:not(.pink).to-red:not(.inactive_eventable):hover,
button:not(.pink).to-red:not(.inactive_eventable):focus, .btn:not(.pink).to-red:not(.inactive_eventable):focus, a.btn:not(.pink).to-red:not(.inactive_eventable):focus, input[type="submit"]:not(.pink).to-red:not(.inactive_eventable):focus{
	background:var(--color-main-button-intensive);
	--current-ink-color: var(--color-ink-inverted-base);
}
button.transparent.stronger:not(.inactive_eventable):hover, .btn.transparent.stronger:not(.inactive_eventable):hover, a.btn.transparent.stronger:not(.inactive_eventable):hover, input[type="submit"].transparent.stronger:not(.inactive_eventable):hover{
	background:var(--color-transparent-button-hover);
}
button:not(.inactive_eventable):active, .btn:not(.inactive_eventable):active, input[type="submit"]:not(.inactive_eventable):active{
	box-shadow: inset 0.075em 0.075em 0 0.005em rgba(0,0,0,0.2);
	padding:0.55em 0.93em 0.45em 1.07em;  
}
button.transparent:not(.inactive_eventable):active, .btn.transparent:not(.inactive_eventable):active, input.transparent[type="submit"]:not(.inactive_eventable):active{
	box-shadow: inset 0.075em 0.075em 0 0.005em rgba(0,0,0,0.05);
	padding:calc(0.55em - 1px) 0.93em calc(0.45em - 1px) 1.07em;
}
button.prefix-diamond:before, .btn.prefix-diamond:before, a.btn.prefix-diamond:before, input[type="submit"].prefix-diamond:before{
	content:"";
	display: inline-block;
	width: 0.707106781em; height: 0.707106781em;
	box-sizing: border-box;
	border:2px solid var(--current-ink-color);
	transform: rotate(45deg);
	margin-right: 0.5em;
}

.form-errors{
	list-style:none; 
	padding:0;
	color:var(--color-error);	
	margin-top: -0.6rem;
	text-align: right;
	max-height:4em; /*for animation*/
	overflow:hidden;
	
	transition:opacity 0.2s linear 0.4s, max-height 0.8s ease-in;
}
.form-errors.hidden{ 
	opacity:0;
	max-height:0; 
}
.form-note{
	display: block;
	font-size: 0.9em;
	text-align: right;
	margin-top: -0.6em;
}
.form-note-error{
	display: block;
	margin-top: 0;
}
.status-message{
	padding:1em;
	background:rgba(var(--color-main-button-calm-rgb), 0.1);
	background:linear-gradient(90deg, rgba(var(--rainbow-2-rgb), 0.15), rgba(var(--rainbow-4-rgb), 0.15));
}
.status-message.error{
	background:var(--color-error);
	color:var(--color-ink-inverted-base);
}
.status-message.error a{
	color:var(--color-ink-inverted-base);
}
.external-circle{
	display:inline-block;
	width:1.5em; height:1.5em;
	border-radius:1em;
	margin-left: 0.8rem;
	
	background:var(--color-base) url('/img/arrow-gradient.svg') center center no-repeat;
	background-size:35%;
}


.highlightwrap{
	position:relative;
}
/* rainbow text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.rainbow{
		background: linear-gradient(90deg, var(--rainbow-1), var(--blue));
		-webkit-background-clip: text;
		background-clip:text;
		-webkit-text-fill-color: transparent;
		text-fill-color:transparent;
		color:transparent;
	}
	.rainbow.animated{
		background-image:var(--adspawn-gradient);
		background-size:200% auto;
		background-attachment:fixed;
		animation: gradientmove linear 10s infinite;
	}
	.rainbow.animated.darker{
		background-image:var(--adspawn-gradient);
	}
	.rainbow.unicorn{
		background: linear-gradient(113deg, #FF7676 0%, #F27487 55%, #9F6AF5 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		color: transparent;
	}
}
/* inline highlighter */
.highlight{
	position:relative;
	display: inline;
	padding:0 0.2em;
}
.highlight:not(.tilted),
.highlight.btn:not(.tilted),
.highlight.tilted:before{
	color: var(--color-ink-inverted-base);
	background: var(--adspawn-gradient);
	background-size:200% auto;
		/*other gradients*/
		/*background: url('/img/noisy-background-gradient.jpg'); background-size:100% auto;*/
		/*background: url('/img/noisy-background-gradient.svg'); animation: fixgradientmove linear 60s infinite;*/
		/*background: url('/img/noisy-background-gradient-repeating.jpg'); animation: fixgradientmove linear 60s infinite; */ 
	background-attachment: fixed;
	animation: gradientmove linear 10s infinite;

	/*white-space: pre-wrap;*/
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.highlight.smallobject{
	background-size:1600% auto;
	animation-name:gradientmovebig;
	animation-duration:113s;
}
@keyframes gradientmove {
	0% { background-position: 0 0; }
	100% { background-position: 200% 0; }
}
@keyframes gradientmovebig {
	0% { background-position: 0 0; }
	100% { background-position: 1600% 0; }
}

@keyframes fixgradientmove {
	0% { background-position: 0 0; }
	100% { background-position: -1200px 0; }
}
.highlight.less{
	background:var(--soft-violet);
}
/*noisy version works only work on a single line*/
.highlight.noisy{
	position:relative;
	white-space:nowrap;
}
.highlight.noisy:before{ 
	content:""; position:absolute; left:0; top:0; width:100%; height:100%;
	background:var(--noise) repeat;
	background-size:var(--noise-size);
	mix-blend-mode:overlay; 
}
/*tilted highlight, also works only on a single line/block. requires extra span so the background would not cover the text*/
.highlight.tilted{
	position:relative;
	display: inline-block;
	color: var(--color-ink-inverted-base);
}
.highlight.tilted:before{
	content:""; position:absolute;
	/* left:0; top:0; width:100%; height:100%; safari does not like this*/
	top:0; right:0; bottom:0; left:0;
	transform: rotate(-1deg);
}
.highlight.tilted span{ position:relative; }


/* ==========
LAYOUT, MENU
========== */
.section{ 
	position:relative;
	padding:2em 0;
}
.content{
	padding:1em; 
	max-width:1024px;
	margin:auto;
}
.section.preface .content{
	max-width:896px;
}
.main-menu-items .item,
.footer-items .item{ margin-bottom:0.25em; }
.header{
	padding:2em;
	max-width:1500px;
	margin-left:auto; margin-right:auto;
}
.header a{ text-decoration:none; }
.header .logo.full{ display:none; }
.header .logo{ height:2rem; }
.footer{
	background: var(--adspawn-gradient-purple);
}
.footer a:not(.btn){ text-decoration:none; }
.footer a:not(.btn):hover{ text-decoration:underline; }
.footer .logo{ 
	height:1.6em;
	margin-bottom:1em; 
}
.footer .main-menu{ 
	margin:1em auto;
}
.footer .title, .footer .logo, .footer .copyright{
	margin-top:2rem;
}
.footer .title{
	display: inline-block;
	text-transform: none;
	font-size: 1em;
}
.footer .title + p{
	display: inline-block;
	font-weight: 900;
}
.footer .social{
	margin-top:0.5em;
	margin-bottom: 0;
}
.footer .social img{
	height: 1em;
}
.footer .eu{
	height: 1.1em;
	vertical-align: middle;
	margin-top: -0.2em;
	border-radius: 0.1em;
	overflow: hidden;
}

.menu .main-menu-items{ margin-bottom:2em; }
.footer .main-menu-items,
.footer .footer-items,
.dashboard-menu-items ul,
.menu ul{
	list-style:none;
	padding:0;
	font-weight:400; 
}
.menu ul ul,
.dashboard-menu-items ul ul, .dashboard-menu-items ul .level2{
	font-weight:300;
	font-size:0.9em;
}
.sidebar ul ul a:not(.btn){ font-weight:300; }

.main-menu-items .new{
	display: inline-block;
	margin-left: 0.2em;
	margin-top: -0.2em;
	font-size:0.75em;
	vertical-align:super;
	color:var(--color-error);
}

.main-menu-items .hiring-item a{
	position: relative;
}
.main-menu-items .hiring-item a:after{
	content: '';
	position: absolute;
	top: -0.05em;
	right: -0.55em;
	width: 0.4em;
	height: 0.4em;
	transform: rotate(45deg);
	background-size: 1600% auto;
    animation-name: gradientmovebig;
    animation-duration: 150s;
    background: var(--adspawn-gradient);
    background-size: 200% auto;
    animation: gradientmove linear 6s infinite;
}

.menutoggle{
	position:fixed;
	right:2em;
	top:2.05em;  
	height:1.8em;
	width:2em;
	cursor:pointer;
	z-index:9;
}
.menutoggle .line{
	width:100%;
	height:6px;
	background:var(--adspawn-gradient-ambient-strong);
	position:absolute;
	left:0;
	transition: all 0.2s ease-in-out;
	transform-origin:0 100%;
}
.menutoggle .line:before{
	content:"";display:block;
	width:100%; height:100%; top:0; left:0;
	background:var(--color-ink);
	opacity:0;
	transition:all 0.2s linear;
}
.menutoggle .line:nth-of-type(1){
	top:0;
}
.menutoggle .line:nth-of-type(2){
	top:50%; margin-top:-3px;
}
.menutoggle .line:nth-of-type(3){
	bottom:0;
}
.menutoggle .line:last-of-type{
	margin-bottom:0;
}
.menu-active .menutoggle .line:nth-of-type(1){
	transform:rotate(45deg);
}
.menu-active .menutoggle .line:nth-of-type(2){
	transform: translateX(50%);
	opacity: 0;
}
.menu-active .menutoggle .line:nth-of-type(3){
	transform:rotate(-45deg);
	transform-origin:0 0;
}
.menu-active .menutoggle .line:before{ 
	opacity:1;
}
.menu{
	position:fixed;
	right:0; top:0; bottom:0;
	overflow:hidden;
	/*width:100%;
	max-width:0;*/
	width:0;
	background:var(--color-base) url('/img/gradient-spheres-noisy.jpg') center center no-repeat;
	color:var(--color-ink);
	/*opacity:0.4;*/
	
	transition:all 0.25s cubic-bezier(0.35, 0, 0.4, 1);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	
	overflow-y:auto;
}
.menu-active .menu{                                            
	transition: all 0.35s cubic-bezier(0, 0, 0.3, 1);
	width:100%;
	opacity:1;
	z-index:10;
}
.menu-active .menutoggle{ z-index: 11; }
.menu-active, .menu-active body{
	overflow:hidden;
}
.menu .inside{ 
	width:100vw; /*to keep the items from jumping when menu opens up*/
	height:100%;
	box-sizing:border-box;
	padding:2em;
	overflow-y: auto;
	overflow-x: hidden;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between; 
}
.menu .logo{
	max-height:1.7em; margin-top:0.05em;
	max-width:calc(100vw - 7.5em);
	display:block;
	margin-bottom:3em;
}
.menu a:not(.btn){
	color:var(--color-ink);
	text-decoration:none;
}
.menu ul{ list-style:none; padding:0; }
.menu .nav .item, .menu .nav .add-app,
.menu .profile .actions a:not(.btn){ 
	font-size:1.1em;
	margin-bottom:0.5em;
}
.menu .nav .apps{
	margin-bottom:0;
}
.menu .item:last-of-type{
	margin-bottom:0;
	margin-right:0;
}
.menu .item.active a{ 
	font-weight:bold;
}
.menu .auth{
	margin-top:2em;
}
.menu .auth .btn{
	width:100%;
	margin-bottom:0;
}

/* ==========
SYSTEM/SHARED COMPONENTS
========== */
.badinput{
	animation: shake 0.39s ease-out both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
@keyframes shake {
	87.5% { transform: translate3d(-1px, 0, 0); }
	75% { transform: translate3d(2px, 0, 0); }
	12.5%, 37.5%, 62.5% { transform: translate3d(-4px, 0, 0); }
	25%, 50% { transform: translate3d(4px, 0, 0); }
}
.loading-image{
	height:2em;
	margin-left:0.1em;
}
.app-message{
	position:fixed;
	left:0; top:0;
	width:0; height:100%;
	/*overflow:hidden;*/
	overflow: auto;
	display:flex;
	align-items:center;
	justify-content:center;
	
	transition:width 0s linear;
	transition-delay:0.15s;
	
	z-index:30;
}
.app-message .cover{
	position:absolute;
	width:100%; height:100%; left:0; top:0;
	background:rgba(0,0,0,0);
}
.app-message .box{
	position:relative;
	background:var(--color-base);
	border:var(--layout-border);
	box-shadow:var(--shadow-large);
	text-align:center;
	
	box-sizing:border-box;
	margin:auto;
	padding:1em;
	padding-bottom:0; /*buttons/image take care of this*/
	width:32em;
	max-width:90vw;
	/*max-height:80vh;*/
	
	transition:all 0.15s ease-in;
	transition-property:transform, opacity;
	
	opacity:0;
	transform:translateY(2em);
}
.app-message .box > .inside{
	position:relative;
	overflow:auto;
}
.app-message.wide .box{
	width: 52em;
	max-height: 90vh;
}
.app-message .title{ font-size:1.2rem; }
.app-message .actions{ margin-top:1.5em; }
.app-message .actions .confirmation{ display:none; }
.app-message.confirmation .actions .confirmation{ display:inline-block; }
.app-message.confirmation .actions .notice{ display:none; }
.app-message .actions .btn{ margin-bottom:1.2rem; }
.app-message .btn{
	margin-left:0.5em;
	margin-right:0.5em;
}
.message-active .app-message{
	width:100%;
	transition-delay:0s;
}
.message-active body{ overflow:hidden; }
.message-active .app-message .box{
	transform:translateY(0);
	opacity:1;
	transition-timing-function:ease-out;
	overflow:auto;
}
.message-active .main, .message-active .header, .message-active .footer, .message-active .menu, .message-active .menutoggle{
	filter:blur(3px);
}
.app-message .app{ font-weight:bold; }

.expander .top{
	position:relative;
	cursor:pointer;
}
.expander .top .label{ display:block; }
.expander .handle, .datepick .handle{
	position:absolute;
	right:0.35em;
	top:50%;
	margin-top:-0.5em;
	height:1em; width:1em;
	background:url('/img/dropdown.svg') center center no-repeat;
	background-size:contain;
	transform:rotate(-90deg);
	transition:all 0.15s cubic-bezier(0.6, 0.01, 1, 1);
}
.expander .target{
	overflow:hidden;
	max-height:0; 
	transition:all 0.15s cubic-bezier(0.6, 0.01, 1, 1);
}
.add-spawn .expander .target{
	transition-duration:0.4s;
}
.expander .target .contents{ padding-top:0.5em; }
.expander.open .handle, .datepick.open .handle, .dropdown.open .expander .handle{
	transform:rotate(0.001deg);
	transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
}
.expander.open .target, .dropdown.open .expander .target{ 
	max-height:none; 
	transition-timing-function: cubic-bezier(0, 0, 0.4, 1);
}
.expander.inactive .handle{ display:none; }
.expander.inactive{ pointer-events:none; }

.app-searchable{ position:relative; }
.app-searchable:after{
	content: "";
	display: block;
	position: absolute;
	left: 0.65em; top: 0.65em;
	background: url(/img/search.svg?v=1) center center no-repeat;
	background-size: contain;
	width: 1.2em;
	height: 1.2em;
}
.app-searchable.loading:after,
.app-searchable.preselected:after{
	display:none;
}
.app-search-input{
	display:block;
	padding-left: 2.4em;
	padding-right: 1em;
	margin-top:0;
	width:100%;
}
.app-searchable .stores{
	position: absolute;
	right: 0;
	top: 100%;
}
.app-searchable .stores .store{
	margin-top: 0.35em;
	height:0.8em;
	opacity:0.8;
	margin-left:0.1em;
}
.app-search-list{
	position:absolute;
	left:0; right:0;
	top:100%;
	background:var(--color-base);
	text-align:left;
	z-index:1;
}
.app-search-list ul{
	list-style:none;
	padding:0;
}
.app-search-list li,
.app-search-list .status{
	position:relative;
	margin:0;
	padding:0.3em 0.6em; margin:0;
}
.app-search-list li:first-of-type{ padding-top:0.6em; }
.app-search-list li:last-of-type{ padding-bottom:0.6em; }
.app-search-list li.marked{
	background:var(--color-list-mark);
}
.app-search-list .app{ cursor:pointer; }
.app-search-list .app:after{ content:"";display:block;width:0;height:0;clear:both; }
.app-search-list .img{
	width:2em; height:2em;
	margin-right:0.4em;
	display:inline-block;
	border-radius:var(--border-radius-tiny);
	float:left;
}
.app-search-list .status{
	font-size:0.9em;
	max-height:0;
	overflow:hidden;
	padding:0.5em 0.75em;
}
.app-search-list .status .loading-image{
	width: 1.3em;
	height: 1.3em;
	padding-right: 0.4em;
	opacity: 0.8;
	vertical-align: top;
}
.app-search-list .status .text{
	vertical-align:top;
}
.app-search-list .status:not(.shown){
	padding-top:0; padding-bottom:0;
}
.app-search-list .status.shown{
	max-height:3rem;
	transition:all 0.2s ease-out;
} 
.app-search-list .title,
.app-search-list .developer{
	font-size:0.8em;
	vertical-align: top;
	line-height:1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.app-search-list .findhint{
	padding: 0.6em;
	font-size: 0.9em;
	border-top:var(--control-border);
	display:none;
}
.app-search-list .findhint.shown{ display:block; }
.app-search-list .title{ font-weight:400; }
.app-search-list .developer{ transform: translateY(0.2em); }
.app-search-list .store{
	height: 1em;
	vertical-align: inherit;
	margin-right: 0.15em;
}

/* ==========
SUBPAGE GENERICS
========== */
.ico, .iconed:before{
	display:inline-block;
	vertical-align:bottom;
	
	width:2em; height:2em;
	margin-right:0.5em;
	
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.iconed:before{ content:""; }

.softshadow, .ico, .iconed:before,  
.how .steps .title:after{
	box-shadow:0 0.4rem 0.6rem 0.1rem rgba(107, 40, 255, 0.16);
}

.card, .how .page{
	background:var(--color-base);	
	box-shadow:var(--shadow-medium);
	padding:1em;
	box-sizing:border-box;
}
.card{ margin-bottom:1em; }
a.post-try, .post-try{ display:none; }

.info-pop{
	display:block;
	position:absolute;
	width:1em; height:1em;
	top:1em;right:1em;
	background:url('/img/info-plain.svg') center center no-repeat;
	background-size:contain;
}
.info-pop .details{
	position: absolute;
	width: 12em;
	max-width:calc( 100vw - 6.5rem );
	top: 100%;
	right: 0;
	padding: 0.5em 1em;
	border-radius: var(--border-radius-control);
	font-size: 0.8em;
	text-align: left;
	background: var(--color-base-inverted);
	color: var(--color-ink-inverted-base);
	transition:all 0.075s ease-in;
	pointer-events:none;
	opacity:0;
}
.info-pop:hover .details{
	margin-top: 0.7em;
	opacity:1;
	transition-timing-function: ease-out;
	z-index:5;
}
.info-pop .details > span{
	display:block;
}

/* ==========
SPECIFIC PAGES AND FRONTEND SECTIONS
========== */
body.index h1, body.index h2{
	text-transform:uppercase;
}
body.index .head-main{
	overflow:hidden; /*for diamonds*/
}

.section.intro{
	position: relative;
	text-align:center;
	padding-top:0;
}
.intro .content{
	padding-top:0;
	position: relative;
}
.intro h1{ 
	margin:auto;
	max-width:20em;
	font-size:1.7em;	
}
.intro .subheadline{ 
	max-width:37em;
	margin: 1.5em auto;
	margin-bottom: 1.9em;
}
.intro .actions{
	position: relative;
	margin-bottom: 3em;
	min-height: 4em;
}
.intro .actions .buttons{
	padding-bottom: 0;
	max-height: 0;
	overflow: hidden;
	transition: all 0.2s ease-in;
}
.intro .actions .btn{
	font-size: 0.9em;
	font-weight: 900;
}
.intro .actions .buttons.shown{
	max-height: 5em;
	padding-bottom: 0.5em;
}
.intro .bookademo{
	max-width:30em;
	margin:auto;
	padding:0px;
	box-shadow:0 1em 3em -1em rgba(0,0,0,0.25);
	background:white; /*gradient bg*/

	overflow: hidden;
	max-height: 0;
	opacity: 0; visibility: hidden; /* safari */

	transition: max-height 0.6s ease-out;
	transition-delay: 0.15s;
}
.intro .bookademo.shown{
	max-height: 9em;
	margin-bottom:3em;
	opacity: 1; visibility: visible; /* safari */
}
.intro .bookademo .inside{
	position:relative;	
	
	/*regular adspawn gradient but softer*/
	background: linear-gradient(90deg, rgba(var(--rainbow-1-rgb), 0.56), rgba(var(--rainbow-2-rgb), 0.56), rgba(var(--rainbow-3-rgb), 0.56), rgba(var(--rainbow-4-rgb), 0.56), rgba(var(--rainbow-1-rgb), 0.56));
	background-attachment: fixed;
	background-size:200% auto;
	animation: gradientmove linear 10s infinite; 
	
	padding:1em;
}
.intro .bookademo h2{
	font-size:1.2em;
	text-transform: none;
	margin-top:0;
	color: var(--color-ink-inverted-base);
	text-shadow: 0 0 1.5em rgba(67, 0, 165, 0.75);
}
.intro .bookademo .email{
	text-align:left;
	background:rgba(255,255,255,0.5);
	box-shadow: 0 0.2em 1.3em 0 rgba(0,0,0,0.05);
	margin:0;
	margin-bottom: 0.75em;
	margin-top: 0.75em;
	
	font-weight:400;
	text-align:left;
	vertical-align: middle;
	width: 100%;
}
.intro .bookademo .email::placeholder{
	font-style:normal;
	text-align:left;
}
.intro .bookademo button{
	min-width: 6em;
	margin-bottom:0; 
	vertical-align:middle;
	background: var(--coral-red);
	background-position: center center;
	transition:background-color 0.2s linear;
	text-transform: none;
}
.intro .bookademo button:hover{
	background: var(--color-main-button-intensive-gradient-1);
}
.intro .bookademo.progress input, 
.intro .bookademo.progress button{
	pointer-events:none;
}
.intro .bookademo.progress button{
	background-color: rgba(255,255,255,0.5);
	background-image: url(/img/loading-dark.svg);
	background-repeat:no-repeat;
	background-size: auto 55%;
	color:transparent;
	transition:background-color 0.3s linear;
}
.intro .bookademo .aftersubmit{
	font-weight: 400;
	margin-top:1.3rem; margin-bottom: 1.3rem;
	height:1.4rem;
	opacity:0;
	display:none;
}
@media screen and (min-width:600px){
	.intro .bookademo.shown{
		margin-bottom:4em;
	}
	.intro .bookademo .inputwrap{
		display:flex;
	}
	.intro .bookademo .email{
		flex:1;
	}
	.intro .bookademo button{
		margin-top:0.75em;
		margin-bottom: 0.75em;
		margin-left: 0.5em;
	}
}

.intro .app-searchable{
	margin-left:auto;
	margin-right:auto;
	max-width:30em;
}
.intro .getfreecreatives .inputwrap{
	position:relative;
}
.intro .inputborder{
	position: relative;
	display: block;
	/*background: var(--main-button-calm-gradient);*/
	padding:1.0px;
	border-radius:var(--border-radius-inputs);
	margin-bottom:1em;
}
.intro .getfreecreatives .pre-input button b{
	font-size:1.08em;
}
.intro .getfreecreatives .childmovable .arrow{
	display: none;
}
.intro .storelink,
.intro .email{ 
	display:block; 
	width:100%;
	margin:0;
	text-align:center;
	background: var(--color-base);
	color: var(--color-ink-soft);
	/*box-shadow: rgba(0,0,0,0.05) 0 0 1.5em 0.1; */
	box-shadow: var(--color-box-shadow-input) 0 0 1.5em 0.1em;
	
	font-weight:400;
	text-align:left;
}
.intro .storelink::placeholder,
.intro .email::placeholder{
	font-style:normal;
	text-align:left;
	/*padding-left:0.15em;*/
}
.intro .storelink{
	padding-left:2.45em;
}
.intro .storelink::placeholder{
	font-size:0.8em;
}
.intro .movable.incoming,
.intro .childmovable.incoming .movable{
	opacity:0;
	transform:translateX(-2rem);
}
.intro .movable.inplace,
.intro .childmovable.inplace .movable{
	opacity:1;
	transform:translateX(0);
	transition:all 0.21s cubic-bezier(0, 0.63, 0.3, 0.63);
}
.intro .movable.leaving,
.intro .childmovable.leaving .movable{
	transition:all 0.21s cubic-bezier(0.63,0,0.63,0.29);
	opacity:0;
	transform:translateX(2rem);
}
.intro .movable.away,
.intro .childmovable.away{
	display:none;
}
/*platform demo is animated bottom up*/
.intro .childmovable.leaving .platform-demo,
.intro .childmovable.incoming .appimg,
.intro .childmovable.incoming .appname{
	transform:translateY(-2rem);
}
.intro .childmovable.incoming .platform-demo,
.intro .childmovable.leaving .appimg,
.intro .childmovable.leaving .appname{
	transform:translateY(2rem);
}
.intro .childmovable.inplace .platform-demo,
.intro .childmovable.inplace .appimg,
.intro .childmovable.inplace .appname{
	transform:translateY(0);
}
.intro .childmovable .appimg{
	transition-delay:0.17s;
}
.intro .headlines.away h1,
.intro .headlines.away p{
	display:none;
}
.intro .headlines.leaving h1,
.intro .headlines.leaving p{
	transition:all 0.21s cubic-bezier(0.63,0,0.63,0.3);
	opacity:0;
	transform:translateY(-3rem);
	transition-delay:0.17s;
}
.intro .headlines.leaving p{
	transition-delay:0.25s;
}

.intro .getfreecreatives .enter-email.childmovable p,
.intro .getfreecreatives .post-email.childmovable p{
	transition-delay:0.06s;
}
.intro .getfreecreatives .enter-email.childmovable form,
.intro .getfreecreatives .post-email.childmovable form{
	transition-delay:0.10s;
}
.intro .getfreecreatives .post-email.childmovable .platform-demo{
	transition-delay:0.18s;
	transition-duration:0.5s;
	transition-timing-function:cubic-bezier(0.2, 0.6, 0.33, 0.95);
}
.intro .getfreecreatives h2{
	margin-bottom:1rem;
}
.intro .selected-storelink{
	/*display:none;*/
}
.intro .selected-storelink .appimg{
	display:inline-block;
	width:6em;
	background:var(--main-button-calm-gradient);
	padding:2px;
	border-radius:6px;
	overflow:hidden;
}
.intro .selected-storelink img{
	display:block;
}
.intro .selected-storelink .appname span{
	display:inline-block;
	background:var(--adspawn-gradient-simple);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; 
	font-weight:900;
}
.intro .enter-email form{
	margin:0 auto;
	max-width:15em;
}
.intro .enter-email .precache{
	width:1px;
	height:0;
	opacity:0.001;
	display:block;
}
.intro .enter-email button{
	margin-bottom:0;
}
.intro .platform-demo,
.intro .platform-demo img{
	position:relative;
	display:block;
	border-radius:var(--border-radius-layout);
	overflow:hidden;
}
.intro .platform-demo{
	padding:1px;
	padding-bottom:0;
	margin-top:2em;
}
.intro .platform-demo .topborder{
	position:absolute;
	top:0; left:0;
	width:100%; height:5px;
	background: linear-gradient(90deg, var(--rainbow-4) 0%, var(--rainbow-2) 50%, var(--rainbow-2) 100%);
}
.intro .platform-demo:before,
.intro .platform-demo:after{
	content:""; display:block;
	position:absolute;
	left:0; top:4px;
	width:1px; height:100%;
	background: linear-gradient(180deg, var(--rainbow-4) 0%, var(--rainbow-4) 50%, rgba(var(--rainbow-4-rgb), 0) 100%);
}
.intro .platform-demo:after{
	left:auto; right:0;
	background: linear-gradient(180deg, var(--rainbow-2) 0%, var(--rainbow-2) 50%, rgba(var(--rainbow-2-rgb), 0) 100%);
}
.intro .app-search-list{
	z-index:6;
}

body.index .botaction{
	text-align: center;
}
body.index .botaction .scrolledfar{
	position:relative;
	padding-bottom: 0.5em;
}
.jumpstart img{
	height: 1em;
	margin-left: 0.2em;
	vertical-align: middle;
	transform: translateY(-0.1em) translateX(0.1em);
}
.platform-showcase .btn.white{
	--current-ink-color:var(--color-headline);
}
.platform-showcase .btn img{
	display: inline-block;
}
#advantages .botaction .white.btn{
	color:var(--rainbow-1);
}
#advantages .botaction .white.btn:hover{
	background: var(--color-layout-border);
}

.platform-showcase{
	position:relative;
	background:var(--adspawn-gradient-simple);
}
.platform-showcase .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

	background: url('/img/diamond-gradient.png') calc( 40vw - 48em ) 40% no-repeat;
	background-size: auto 75em;
}
.platform-showcase .content{
	position:relative;
	padding-bottom:1em;
	padding-top:1em;
}
.whitebox{
	position:relative;
	display: inline-block;
}
.whitebox:before{
	content:""; position:absolute; left:-0.5em; top:0; right:-0.5em; height:100%;
	display:block;
	background:white;
	/*white-space: pre-wrap;*/
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transform: rotate(-1deg);
}
.whitebox span{
	position: relative;
	color:var(--color-ink);
	background: var(--adspawn-gradient-simple);

	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}
.platform-showcase .subheadline{
	text-transform: uppercase;
	font-size: 1.25em;
	margin: 0.5em auto 1em auto;
}
.platform-showcase .feature-controls{
	position:absolute;
	top: 2em;
	text-align: left;
	left: 1em; right:1em;
	overflow:hidden;
	color: white;
	text-align: center;
	font-weight:700;
	font-size:1.25em;
	margin-bottom:0.5em;
	z-index:5;
}
.platform-showcase .btn{
	font-weight: 700;
}
.platform-showcase .btn span{
	/*background-image: var(--adspawn-gradient);*/
	background-image: var(--main-button-calm-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
	padding-bottom: 0.25em;
}
.platform-showcase .feature-controls .btn{
	display: none;

}
.platform-showcase .dropgradient{
	position:absolute;
	width:100%; height:40em;
	top:0; left:0;
	overflow:hidden;
	pointer-events:none;
	z-index:4;
}
.platform-showcase .dropgradient:before{
	content:""; display:block;
	position:absolute;
	width: 200%;
	height: 200%;
	top: -80%;
	left: -80%;
	background:radial-gradient(circle, rgba(var(--rainbow-1-rgb), 0.87) 0%, rgba(var(--rainbow-4-rgb),0) 50%);
}
.platform-showcase .visuals-wrap{
	position: relative;
	margin-top:12em;
}
.platform-showcase video,
.platform-showcase img{
	max-width:100%;
	max-height:100%;
	display:block;
}
.platform-showcase .sizer{
	pointer-events:none;
	opacity:0;
}
.platform-showcase .visuals{
	position:absolute;
	left: 5%;
	width: 90%;
	top: 5%;
	height: 100%;
}
.platform-showcase .visual{
	position:absolute;
	border-radius:4px;
	overflow:hidden;
	transition:all 0.2s ease-out;
	opacity:0;
	filter: blur(3px);
	pointer-events: none;
}

.platform-showcase .visual.prev{
	transform: translate(-10vw, 0) scale(0.9);
	opacity: 0.5;
	z-index: 2;
}
.platform-showcase .visual.next{
	transform:translate(10vw, 0) scale(0.9);
	opacity: 0.5;
	z-index: 2;
}
.platform-showcase .visual.awayprev{
	transform: translate(-20vw, 0) scale(0.8);
	opacity:0;
	z-index:1;
}
.platform-showcase .visual.awaynext{
	transform: translate(20vw, 0) scale(0.8);
	opacity:0;
	z-index:1;
}
.platform-showcase .visual.active{
	transform: translate(0, 0) scale(1);
	opacity: 1;
	z-index: 3;
	filter: blur(0);
	cursor: pointer;
	pointer-events: auto;
}

.platform-showcase .prompt{
	position: absolute;

	background: rgba(var(--color-base-rgb), 0.8);
	border-radius: var(--border-radius-inputs);
	padding: 0.75em 0.8em;

	bottom: 2em;
	z-index: 3;
	font-size: 0.8em;
	max-width: 30em;
	margin: auto;
	left: 0;
	right: 0em;
	box-shadow: 0 1em 1em -1em rgba(0,0,0,0.3);
	text-align: left;
}

.autotype .word{
	display: inline-block;
}
.autotype .word .hidden{
	opacity: 0;
}
.autotype .cursor{
	position: absolute;
	display: inline-block;
}
/*.autotype .cursor:before{
	content: "_";
	display: inline-block;
	height: 100%;
	width: 0.3em;
	width: 1ch;
	background: var(--color-ink);
	color: transparent;
}
*/

.showcase-details-active .showcase-details{
	width:100%;
	transition-delay:0s;
}
.showcase-details-active body{ overflow:hidden; }
.showcase-details-active .steps{
	filter: blur(3px);
}
.showcase-details-active .showcase-details .box{
	transform:translateY(0);
	opacity:1;
	transition-timing-function:ease-out;
	overflow:auto;
}
.showcase-details-active .main, .showcase-details-active .header, .showcase-details-active .footer, .showcase-details-active .menu, .showcase-details-active .menutoggle{
	filter:blur(3px);
}

.showcase-details{
	position:fixed;
	left:0; top:0;
	width:0; height:100%;
	/*overflow:hidden;*/
	overflow: auto;
	display:flex;
	align-items:center;
	justify-content:center;
	
	transition:width 0s linear;
	transition-delay:0.15s;
	
	z-index:30;
}
.showcase-details .cover{
	position:absolute;
	width:100%; height:100%; left:0; top:0;
	background:rgba(0,0,0,0);
}
.showcase-details .box{
	position:relative;
	background:var(--color-base);
	border:var(--layout-border);
	border-radius:6px;
	box-shadow:var(--shadow-large);
	text-align:center;

	display: flex;
	max-width: 90vw;
	max-height: 90vh;
	flex-direction: column;

	box-sizing:border-box;
	margin:auto;
	
	transition:all 0.15s ease-in;
	transition-property:transform, opacity;
	
	opacity:0;
	transform:translateY(2em);
}
.showcase-details .inside{
	padding: 1em 1.5em 1em 1.5em;
}
.showcase-details .navigational.arrows{
	display: block;
}
.showcase-details .navigational .arrow{
	right:0.5rem;
	background-position: center 0.2em;
}
.showcase-details .navigational .arrow.left{
	left:0.5rem;
}
.showcase-details .inside{
	overflow:auto;
}
.showcase-details .box > .inside{
	position:relative;
	display: flex;
	height: 100%;
}
.showcase-details .preview{
	height: 100%;
	display: none;
	margin-bottom: 0;
}
.showcase-details .preview.active{ display: block; }
.showcase-details .preview > .wrap{
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.showcase-details .video{
	flex: 1;
	display: flex;
}
.showcase-details video{
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
}
.showcase-details p{
	width: 100%;
	max-width: 20rem;
	margin:1em auto;
	margin-bottom: 0;
	font-size: 0.8em;
	flex-shrink: 0;
}

.section.preface{
	background: var(--radial-gradient-soft);
}
.section.about-us .stats > *{
	background: var(--adspawn-gradient-ambient-strong);
}
.section.pricing{
	background: var(--adspawn-gradient-simple);
}

.section.how .iconed:before{
	margin-left: -2em;
}
.step0 .iconed:before{ background-image:url('/img/ico-upload.svg?v=2'); }
.step1 .iconed:before{
	background-image:url('/img/ico-identify.svg?v=2');
	background-image: url('/img/ico-identify.svg?v=2'), linear-gradient(90deg, var(--rainbow-1), var(--rainbow-1) 100%);
}
.step2 .iconed:before{ background-image:url('/img/ico-brain.svg'); }
.step3 .iconed:before{ background-image:url('/img/ico-wand-sparkles.svg'); }

.section.how{
	padding-top: 0;
}
.how .steps{
	position:relative;
	list-style:none;
	padding-left:3em; /*1em regular "content" padding + 2em*/
	padding-right:1em;
	margin-bottom:2em;
}
.how .steps:before,
.how .steps:after{
	content:""; display:block;
	position:absolute;
	background: rgba(var(--rainbow-3-rgb), 1);
	width:0.3em;
	left:1.65em;
	top:1.5em;
	bottom:5em;
	z-index: -1;
}
.how .steps:after{
	top:auto;
	height:5em;
	bottom:0;
	background:linear-gradient(180deg, rgba(var(--rainbow-3-rgb), 1), rgba(var(--rainbow-3-rgb), 0));
}
.how .steps .title{ position:relative; }
.how .steps .iconed:before{
	background-color: var(--color-main-button-calm);
	margin-right:0.775em; /*0.93 * [1/1.2 ~ title size reduction to 1rem]*/
}

.navidots{
	list-style:none;
	padding-left: 0;
		
	display: flex;
	/*justify-content: space-evenly;*/
	justify-content:center;
	gap:4vw;
	margin-top: 1em;
}
.navidots .dot{
	position:relative;
	list-style: none;
	color: transparent;
	display:inline-block;
	width: 2vw; height: 2vw;
	border-radius: 1.5em;
	background: var(--color-control-border);
	font-size: 0.4em;
	transition:all 0.2s linear;
}
.navidots .dot.active{
	background: var(--color-highlight-backdrop);
}

.how .page .bottom{
	margin-top:2em;
	text-align:center;
}

.section.revenue{
	background: var(--adspawn-gradient-purple);
}
.section.revenue h2{
	margin-bottom:0.25em;
}
.revenue .casewrap{
	margin-top:1em;
	margin-bottom:1em;
}
.revenue .based{ 
	font-size:0.8em;
	font-weight:400;
	margin-top: 1rem;
	margin-bottom: 0;
}
.revenue .bottom{ margin-top:1em; }
.revenue .half img{ width:100%; }
.revenue .results{
	list-style:none;
	padding-left:0;
	margin-top:1rem;
}
.revenue .results li{
	display:flex;
	margin-bottom:0.5em;
}
.revenue .results .highlight{
	font-weight:700;
	font-size:2em;
	margin-right:0.25em;
	background-image:var(--adspawn-gradient-purple-repeating);
}
.revenue .results .rest{
	align-self: end;
	margin-bottom: 0.4em;
	line-height: 1.2;
	font-weight: 400;
}

.advantages{
	color:var(--color-ink);
	margin-top: 3rem;
}
.advantages .iconed:after{ content:"";display:block;clear:both;height:0; }
.advantages .iconed:before{
	background-color: var(--color-main-button-calm);
	width:2.5em; height:2.5em;
	float:left;
	margin-right:1.25rem;
}
.advantage0 .iconed:before{
	background-image:url('/img/ico-network.svg');
}
.advantage1 .iconed:before{
	background-image:url('/img/ico-smartphone.svg');
}
.advantage2 .iconed:before{
	background-image:url('/img/ico-graph.svg?v=2');
}
.advantage3 .iconed:before{
	background-image:url('/img/ico-users.svg');
}
.advantages .card p{ margin-bottom:0; }

.testimonials .content{ position:relative; }
.testimonials .bg, .testimonials .bg div{ 
	position:absolute;
	left:0; top:0; width:100%; height:100%;
} 
.testimonials .bg .layer1{
	background: var(--radial-gradient-soft);
}
.testimonials .bg .layer2{
	background:var(--noise) repeat;
	background-size:var(--noise-size);
	mix-blend-mode:soft-light; /* hard-light/screen also decent*/ 
}

.pricing-table{
	position:relative;
	list-style:none;
	padding:0;
}
.pricing-table li{
	position:relative;
	margin-bottom:2em;
	padding:0.5em;
}
.pricing-table li:first-child{ padding-left: 0; }
.pricing-table li:last-child{ padding-right: 0; }
.pricing-table .inside{
	padding: 1em;
	background:var(--color-base);
}
.pricing-table .in-popular{
	position: relative;
	background: linear-gradient(90deg, var(--color-main-button-calm-gradient-2), var(--color-main-button-calm-gradient-1));
	padding: 2px;
	padding-top: 2em;
	margin-top: -2em;
}
.pricing-table .popular-label{
	display: flex;
	position: absolute;
	top:0; left:0; width:100%;
	height: 2em;
	align-items: center; justify-content: center;
	color: var(--color-ink-inverted-base);
	font-weight: 400;
}
.pricing-table .top{ 
	box-sizing:border-box; 
}
.pricing-table .top .preprice b{ font-weight: 900; }
.pricing-table .top .postprice{ font-size:0.8em; }
.pricing-table .top .shortdesc{
	font-weight: 700;
	margin-top:0.5rem;
	max-width:25em;
}
.pricing-table .title{
	font-weight:700;
	font-size:1.5em;
	margin-bottom:0.5rem;
}
.pricing-table .price{
	font-weight:700;
	font-size:2em;
	line-height:1;
	color: var(--color-headline);
	display: inline-block;
	text-transform: uppercase;
}
.pricing-table .period{
	display: inline-block;
}
.pricing-table tbody,
.pricing-table .top .shortdesc{
	font-size: 0.8em;
}
.pricing-table table{
	width:100%;
	border-collapse: collapse;
	margin-top:1em;
	table-layout: fixed;
}
.pricing-table th, .pricing-table td{
	vertical-align: top;
	padding:1em 0;
	text-align: left;
}
.pricing-table td{
	text-align: center;
}
.pricing-table .misc{
  font-size: 0.8em;
}
.pricing-table .misc th {
  font-weight: normal;
}
.pricing-table .outputs{ position:relative; }
.pricing-table .outputs .info-pop{
	display: inline-block;
	position: relative;
	top: 0.25em;
	right: auto;
	margin-left: 0;
	font-weight: normal;
}
.pricing-table .bottom{
	position:relative;
	margin-top:1.5em;
	text-align:center;
}
.pricing-table .bottom .btn{
	margin-bottom:0.5rem;
}
.pricing-table .bottom .overbot{
	position:absolute;
	margin-bottom: 0.35em;
	bottom:100%;
	left:0;
	width:100%;
}
.pricing-table .cancelled{
	text-decoration:line-through;
	opacity:0.75;
}
.pricing-table .ribbon .highlight{
	font-size: 0.9em;
	padding: 0.5em 1em;
	text-transform: uppercase;
	line-height: 1;
	display:inline-block;
}
.pricing-table .ribbon{
	position:absolute;
	top:0;left:0;right:0;margin:auto; 
	margin-top:-0.4em; 
	text-align:center;
}
.pricing-table .yes, .pricing-table .no{
	display:inline-block;
	width:1em; height:1em;
	background:url('/img/check.svg') center center no-repeat;
	background-size:contain;
}
.pricing-table .no{
	background-image:url('/img/no.svg');
	opacity:0.3;
}
.pricing-table .emphasized{ font-weight:700; }
.pricing-table .emphasized.more{ color:var(--color-headline); }
.pricing-table .free-conditions{ font-size:0.9em; }
.pricing-table .points{ vertical-align:top; }
.pricing-table .info-pop{ margin-top: 0.1em; right:0; }
.pricing-table .info-pop .details{ width:16em; }
.pricing-table .app_icon{
	display:inline-block;
	margin-top:1em;
}

.pricing-table .equivalent{
	font-size: 0.8em;
}
.pricing-table .equivalent th,
.pricing-table .equivalent td{
	font-weight: normal;
	padding-top: 0;
}
.pricing-table .equivalent td.emphasized{ font-weight: 700; }
.pricing-table .equivalent th{ padding-left:1rem; }
.pricing-table .equivalent td{ padding-left:1rem; }
.pricing-table .tier-enterprise .equivalent td{ padding-left:1em; }

.pricing-table .outlined .inside{
	outline:2px solid var(--color-checkable-fill-marked);
}

.section.pricing{overflow:hidden;} /*because of the badge overflow on mobiles*/
.pricing-table .badge{
	position: absolute;
	top: -3em; right: -1em;
	width: 8em; height: 8em;
	
	background: var(--color-error); border-radius: 50%;
	background: url(/img/badge-star.svg);
	background-size:100% 100%;
	color: var(--color-ink-inverted-base);
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align:center;
	
	font-size:0.8em;
	
	transform: rotate(15deg);
	z-index:1;
}
.pricing-table .num{
	font-size:1.8em;
	font-weight:900;
	line-height:1.1;
}
.pricing-table .text{
	font-size:0.85em;
	font-weight:500;
}
.pricing-table .contact-content{
	display:none;
}

.about-us .people,
.testimonials .people{
	margin-top:2em;
}
.about-us .people,
.testimonials .people,
.about-us .skills,
.companies{
	list-style:none;
	padding:0;
}
.about-us .photo,
.testimonials .photo{
	max-width:10em;
	margin:auto;
	display:block;
	margin-bottom:1em;
	border-radius:50%;
	overflow:hidden;
}
.about-us .description{
	max-width:830px;
	margin-left:auto;
	margin-right:auto;
}
.about-us .name{
	text-align:center;
	font-weight:bold;
	margin-bottom:0;
}
.about-us .position,
.about-us .social{
	text-align:center;
	margin-bottom: 0.5em;
}
.about-us .social img{
	height: 1em;
}

.about-us .person{
	margin-bottom:4em;
}
.about-us .person:last-of-type{
	margin-bottom:0;
}
.about-us .people .person{
	max-width:25em;
	margin-left:auto;
	margin-right:auto;
}
.about-us .stats{
	border:var(--layout-border);
	padding:0;
	overflow:hidden;
}
.about-us .stats .head{
	margin-bottom:0;
	text-align:center;
	padding-top:1em;
}
.about-us .stats .skills,
.about-us .stats .textual{
	padding:1em;
}
.about-us .stats .skill,
.about-us .stats .group{
	display:flex;
	flex-direction:row;
}
.about-us .stats .skill:last-of-type,
.about-us .stats .group:last-of-type{
	margin-bottom:0;
}
.about-us .label{ 
	width:55%;
	padding-right:0.5em;
	box-sizing:border-box;
}
.about-us .textual .label{
	width:49%;
	width:calc(55% - 1em);
}
.about-us .stats .rating{
	white-space: nowrap;
}
.about-us .star{
	position: relative;
	color:transparent;
}
.about-us .star:before{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
}
.about-us .star:after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 0.607106781em;
	height: 0.607106781em;
	box-sizing: border-box;
	border: 2px solid var(--color-ink-inverted-base);
	left: 0.2em;
	top: 0.1em;
	transform: rotate(45deg);
}
.about-us .star.filled:after{
	background: var(--color-ink-inverted-base);;
}
.about-us .stats .icon{
	display:inline-block;
	width:1em;height:1em;
	background:url(/img/icon-gamepad-light.svg) center center no-repeat;
	background-size:contain;
	vertical-align:top;
	margin-top:0.1em;
}
.about-us .stats .icon.writing{
	background-image:url(/img/icon-gauge-light.svg);
}
.about-us .stats .icon.creativity{
	background-image:url(/img/icon-telescope-light.svg);
}
.about-us .stats .icon.development{
	background-image:url(/img/icon-code-light.svg);
}
.about-us .stats .icon.visuality{
	background-image:url(/img/icon-image-light.svg);
}

.testimonials{
	padding-top:0;
	border-top:1px solid var(--color-base-stronger)
}
.testimonials .title{
	margin-bottom:0;
}
.testimonials .people-wrap{
	padding-left:0;
	padding-right:0;
}
.testimonials .person{
	margin-bottom:1em;
}
.testimonials .name, .testimonials .position{
	color: var(--color-headline);
}
.testimonials .name{
	font-weight:bold;
	text-align:right;
	margin-top:1em;
	margin-bottom:0.25em;
}
.testimonials .position{
	text-align: right;
	font-style: italic;
	margin-bottom:0;
}
.testimonial{
	box-sizing:border-box;
	padding-left:1em;
	padding-right:1em;
}
.testimonial .quote:before{
	content: "\201C";
	margin-right:0.1em;
}
.testimonial .quote:after{
	content: "\201D";
	margin-left:0.1em;
}
.testimonial .quote:before,
.testimonial .quote:after{
	position:relative;
	display:inline-block;
	font-weight:bold;
	vertical-align:bottom;
	font-size:2.5em;
	line-height:1rem;
	top:0.15em;
}
.navigational.arrows{
	display:none;
}
.navigational .arrow{
	position: absolute;
	right: 0.35em;
	top: 40%;
	margin-top: -0.5em;
	height: 1em;
	width: 1em;
	background: url(/img/dropdown.svg) center center no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
	cursor:pointer;
}
.navigational .arrow.left{
	transform: rotate(90deg);
	right:auto;
	left:0.35em;
}

.experience{ position:relative; }
.experience .showcase{
	position:relative;
	width:100%;
	overflow:hidden;
}

.experience .title{
	font-size:1.15em;
	font-weight:normal;
	text-transform:none;
	margin-bottom:2rem;
	text-align:center;
	color:var(--color-ink);
}
.experience .companies{
	/*
	text-align:center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	*/
	display:flex;
	flex-direction:row;
	white-space:nowrap;
	text-align:left;
	margin-bottom:4em;
	/*animation: logoslidee linear 5s infinite;*/
}
/*
@keyframes logoslide {
	from { transform: translateX(0); }
	to { transform: translateX(-200%); }
}
*/
.experience .company{
	list-style:none;
	display:inline-block;
	margin: 0 1em;
}
.experience .company:last-of-type{
	margin-right:0;
}
.experience .company img{
	max-height:3em;
	max-width:10em;
	display:block;
	transition:all 0.2s linear;
}.auth

html.auth, html.auth body{ min-height:100vh; }
html.auth body{
	display: flex;
	align-items: center;
	justify-content: center;
	
	background: var(--adspawn-gradient-purple);
}
html.auth .main{position:relative;}
html.auth .logo{
	display: block;
	height:4em;
	margin: auto;
	margin-bottom: 2em;
}
html.auth .card{
	max-width:30em;
}
html.auth input:not([type=checkbox]){
	display:block;
	width:100%;
}
html.auth .bot{
	margin-top:2em;
	text-align:center;
}
html.auth .bot.social{
	margin-top: 1em;
}
html.auth .social-login{
	text-align:center;
}
html.auth .btn-google{
	margin: 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.6em;
	width:100%;
	font-weight:400;
}
html.auth .google-icon{
	height: 1.1em;
	flex-shrink:0;
}
html.auth .social-divider{
	display:flex;
	align-items:center;
	gap:1em;
	margin:1.5em 0;
	color:var(--color-ink-soft);
	font-size:0.85em;
}
html.auth .social-divider::before,
html.auth .social-divider::after{
	content:'';
	flex:1;
	border-top:var(--layout-border);
}
html.auth .already-registered{
	text-align: center;
	margin-bottom: 2em;
}
ul.articles{
	list-style:none;
	padding:0;
}
.articles a{
	text-decoration:none;
	color:var(--color-ink);
}
.articles .body, .articles .meta{
	display:block;
}
.articles .card{
	display:block;
	border:var(--layout-border);
	overflow:hidden;
}
.article .link{
	color:var(--color-link);
	text-decoration:underline;
}
.articles a:hover .link{ text-decoration:none; }
.articles .published{ float:right; }
.articles .meta:after{ content:"";clear:both;display:block; }
.articles .title{ font-size:1.25em; }
.articles .image{
	margin: -1em;
	margin-bottom:1em;
}
.articles .image > div{
	height:60vw;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.articles .image .desktop{ display:none; }
article .tags, .article .tags{
	list-style:none; padding:0;
}
article .tags li, .article .tags li{
	position:relative;
	display:inline-block;
	margin:0;
	margin-right:0.5em;
	margin-bottom:0.5em;
	padding:0.25em;
	border-radius:0.25em;

	background-color: var(--color-highlight-backdrop);

	font-size:0.875em;
	font-weight:500;
	line-height:1;
}
.article .tags li a{
	color:var(--color-highlight-front);
	text-decoration:none;
}
article .tags li{
	background-color:var(--color-base);
}
article .tags li a{
	text-decoration:none;
	color:var(--color-highlight-backdrop);
}

/*detail*/
article .detail .content,
body.tos .detail .content,
body.privacy-policy .detail .content{ 
	max-width:37em; 
}
article .detail .image{
	width:100%;
	margin-bottom:2em;
}
article .meta{
	text-align:right;
	margin-bottom:1em;
}
.article .preface .lead{
	margin-bottom:1em;
}
.article .preface .lead p:last-of-type{
	margin-bottom:0;
}
/*unfortunate RichEditor classname*/
.blog-article .body .lead {
	font-size: 1.4em;
}

/* ==========
HIRING
========== */

.hiring .preface {
	/* background: none; */
}

.hiring .preface h1{
	font-size: 2.5em;
	line-height: 1.1;
	text-align: center;
	isolation: isolate;
	margin-bottom: 0;
}
.hiring .preface .hiring-highlight{
position: relative;
  display: inline-block; /* ← ::before sizes to THIS, not the h1 */
  padding: 4px 16px;
  color: white;
}

.hiring-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--adspawn-gradient-simple);
  transform: rotate(-1deg);
  z-index: -1;
  }

.job-offers{
	display: grid;
	grid-template-columns: repeat(auto-fit, 8em);
	gap: 2em;
	justify-content: center;
}
a.job-offer{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--color-ink);
}
a.job-offer .job-image{
	transition: transform 0.2s;
}
a.job-offer:hover .job-image{
	transform: scale(1.05);
}
a.job-offer:hover .title{
	text-decoration: underline;
}
.job-offer .job-image{
	margin-bottom: 1.5em;
	width: 100%;
}
.job-offer img{
	display: block;
	aspect-ratio: 1;
    object-fit: contain;
}
.job-offer .diamond-placeholder{
	height: 0;
	padding-bottom: 100%;
	background: var(--adspawn-gradient-simple);
    transform: rotate(45deg) scale(0.7);
}
.job-offer .title{
	font-size: 1.25em;
	text-align: center;
	color: var(--color-link);
	transition: color 0.2s;
	margin-bottom: 0;
}

/*hiring detail*/
.hiring-detail .preface {
	/* background: none; */
}

.hiring-detail .preface p{
	color: var(--color-ink-soft);
	margin-bottom: 0;
}
.hiring-detail .detail {
	padding: 0;
}

.hiring-detail .detail .content{
	max-width: 37em;
}
.hiring-detail .detail .image{
	width: 100%;
	margin-bottom: 2em;
}
.hiring-detail .body h2{
	color: var(--color-link);
}
.hiring-detail .body .lead {
	font-size: 1.4em;
}
.hiring-detail .body ul{
	list-style: none;
	padding-left: 1.5em;
}
.hiring-detail .body ul li{
	position: relative;
}
.hiring-detail .body ul li::before{
	content: "";
	position: absolute;
	left: -1.2em;
	top: 0.45em;
	width: 0.5em;
	height: 0.5em;
	background: var(--color-link);
	transform: rotate(45deg);
}

/*hiring application form*/
.application-form-section {
	padding: 0;
}
.application-form-section .content {
	max-width: 37em;
}
.application-form-card{
	margin: 0 auto;
	background: var(--adspawn-gradient-simple);
	border-radius: var(--border-radius-layout-large);
	padding: 2em;
}
.application-form-card h2{
	text-align: center;
	margin-top: 0;
	font-size: 1.8em;
}
.application-form-card .text-center{
	text-align: center;
}

.application-form-card label{
	display: block;
	font-size: 0.85em;
	margin-bottom: 0.3em;
}
.application-form-card input:not([type="submit"]),
.application-form-card input:not([type="checkbox"]),
.application-form-card textarea{
	width: 100%;
}
.application-form-card .success-message p {
	text-align: center;
}
.application-form-card .form-group{
	flex: 1;
}
.application-form-card .form-row{
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
.application-form-card .form-row > .form-group{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.application-form-card .form-errors{
	background: rgba(255,255,255,0.96);
	border-radius: 0.6em;
	padding: 0.9em 1.1em;
	margin-bottom: 1.5em;
}
.application-form-card .form-errors ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.application-form-card .form-errors li{
	font-size: 0.875em;
	color: #c0392b;
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	line-height: 1.4;
	margin-bottom: 0;
	text-align: left;
}
.application-form-card .form-errors li::before{
	content: '!';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	min-width: 1.1em;
	height: 1.1em;
	background: #FE5858;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	position: relative;
	top: -0.05em;
}
.application-form-card .file-upload-wrapper{
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1rem;
}
.application-form-card .file-upload-wrapper input[type="file"]{
	display: none;
}
.application-form-card .file-upload-btn{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: rgba(255,255,255,0.15);
	border: 1px dashed rgba(255,255,255,0.25);
	color: white;
	padding: 0.6em 0.8em;
	border-radius: 0.5em;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0;
	margin-top: 0.5rem;
	cursor: pointer;
	font-size: 0.9em;
	white-space: nowrap;
	line-height: 1.5;
}
.application-form-card .file-upload-btn:hover{
	background: rgba(255,255,255,0.3);
}
.application-form-card .file-selected{
	display: inline-flex;
	align-items: center;
	background: rgba(255,255,255,0.15);
	border: 1px dashed rgba(255,255,255,0.25);
	border-radius: 0.5em;
	padding: 0.6em 0.8em;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.5rem;
}
.application-form-card .file-name{
	flex: 1;
	min-width: 0;
	font-size: 1em;
	color: rgba(255,255,255,0.8);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.application-form-card .file-remove{
	flex-shrink: 0;
	background: none;
	border: none;
	color: rgba(255,255,255,0.6);
	font-size: 1.1em;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	margin: 0;
}
.application-form-card .file-remove:hover{
	color: #fff;
}

.application-form-card .file-remove:active{
	padding: 0;
	box-shadow: none;
}

.application-form-card .checklabel{
	color: rgba(255,255,255,0.9);
	font-size: 0.9em;
}
.application-form-card .checklabel .checkbox{
	border-color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.1);
}
.application-form-card .form-actions{
	text-align: center;
	margin-top: 1.5em;
}
.application-form-card .required{
	color: rgba(255,255,255,0.6);
}
.application-form-card .form-actions .btn{
	min-width: 8em;
	font-size: 1.1em;
}
.application-form-card .btn-loader{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.application-form-card .spinner{
	animation: spin 0.8s linear infinite;
}
.application-form-card.is-submitting,
.application-form-card.is-submitting *{
	cursor: wait;
}
@keyframes spin{
	to{ transform: rotate(360deg); }
}

.application-form-section {
	padding: 0;
}