:root {
	--color-neutral: #f2eedd;
	--color-marinade: #c36235;
	--color-aqua: #02b2ad;
	--color-vert: #113a3a;
	--color-blank: #ffffff;
	--color-happy: #ffd546;
	--color-heart: #e2451e;
	--color-ink: #1a304e;
	--color-black: #191407;
	--color-button: #d9a13f;
	--font-size-mobile: calc(0.5em + 2.5vw);
	--font-size-desktop: min(2.5em, 3vw);
} 
@font-face {
	font-family: "Alfarn2";
	src:url(Alfarn2.woff) format("woff"),
		url(Alfarn2.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: block;
}
/* scrollbars */
@media (min-width:768px) {
	html {
		scrollbar-gutter: stable;
		overflow-y:scroll;
	}
}
* {
	scrollbar-width: thin;
}
::-webkit-scrollbar {
	width: 8px;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}
::-webkit-scrollbar-track {
	width:8px;
	border-radius:4px; 
}
::-webkit-scrollbar-thumb {
	border-radius:4px; 
	width:8px;
}
::-webkit-scrollbar-thumb:hover {
}
html{
	font-family:K2D;
	margin:0;padding:0;
	background:var(--color-neutral);
}
body {
	margin:0;
	padding:0;
	color:var(--color-ink);
}
header, main, footer {
	max-width:75rem;
	margin:auto;
	padding:0 1em;
}
section {
	outline:0.1em solid;
	border:0.4em solid var(--color-neutral);
	border-radius:2em;
	margin:0 -0.5em 2em;
	position:relative;
	background:var(--color-neutral);
}
section.noborder {
	outline:none;
	border:none;
	padding:0 1em 1em;
	background:none;
}

h1, .pretend-h1 {
	font-family:Alfarn2;
	margin:0;
	font-size:1.25em;
	line-height:1;
	text-transform:uppercase;
}
h2, .pretend-h2 {
	font-family:Alfarn2;
	font-size:2em;
	line-height:1;
}
img {
	display:block;
	width:100%;
}

header,
footer {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
h1,.pretend-h1 {
	max-width:4em;
	margin-bottom:0.33em;
}
header {
	padding-top:1em;
	height:3.5em;
	position:relative;
	z-index:9999;
}
header a,
footer a {
	color:var(--color-ink);
	text-decoration:none;
}
header img,
header svg {
	width:3em;
}

svg path { transform-origin: 50% 50%; } 
.nav-button .buddy-eye {
	transition:transform 0.2s;
}
.nav-button-clicked:hover .buddy-eye {
	animation: lilbuddyblink 0.15s 0.05s ;
}
.nav-button-clicked:hover .buddy-smile {
	animation: lilbuddyblink2 0.15s 0.05s ;
}
.nav-button .buddy-smile,
.nav-button .buddy-body,
.nav-button .buddy-side {
	transition:transform 0.2s, fill 0.4s; 
}
.nav-button:hover .buddy-smile {
	transform:translate(3%, -2% ) scalex(1.2);
}
.nav-button:hover .buddy-eye {
	transform:scaley(0.9) translate(0%,-4%);
}
.nav-button:hover .buddy-body {
	fill:#02B2AD;
}
.nav-button:hover .buddy-side {
	fill:#93d8d6;
}
@keyframes lilbuddyblink {
	/* 0% { transform:none } */
	/* 50% { transform:translate(0, -15% ) scaley(0.25); } */
	50% { transform:translate(0, -12% ) scaley(0.25); }
	/* 12% { transform:none } */
}
@keyframes lilbuddyblink2 {
	/* 0% { transform:none } */
	/* 50% { 	transform:translate(3%, -2% ) scalex(1.2); } */
	50% { 	transform:translate(3%, -1% ) scalex(1.2); }
	/* 12% { transform:none } */
}
header button {
	background:none;
	border:none;
	width:3.5em;
	height:3em;
	padding:0 0 0 0.35em;
	margin-right:-0.25em;
}
header nav ul { 
	position:absolute;
	right:0;
	overflow:hidden;
	top:4.475em;
	background:var(--color-neutral);
	left:0;
	font-weight:bold;
	box-shadow: 0 0 0 0.15em;
	list-style:none;
	margin:0 -0.99em;
	padding:0;
	max-height:0;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.1s 0.15s, max-height 0.25s, visibility 0.25s, top 0.25s;
	font-family:Alfarn2;
}
header nav li {
	margin:0;
	padding:0;
}
header nav li:first-child {
	margin-top:0.75em;
}
header nav li:last-child {
	margin-bottom:0.75em;
}
header [aria-expanded="true"] + ul { 
	max-height:12em;
	visibility:visible;
	opacity:1;
	transition:opacity 0.1s, max-height 0.25s, visibility 0.25s, top 0.25s ;
}
header nav a {
	display:block;
	padding:0.5em 2em;
	transition:color 0.2s;
}
header nav a:hover {
	color:var(--color-marinade)
}
@media (min-width:48em) {
	section {
		outline:0.2em solid;
		border:0.8em solid var(--color-neutral);
		margin-left:auto;
		margin-right:auto;
	}
	section.noborder {
		padding-top:1em;
	}
	header {
		height:0;
		top:1.5em;
	}
	header button {
		margin-right:0.5em;
	}
	header h1 {
		max-width:none;
		margin:0.25em 1.5em;
	}
	header h1 span,
	header h1 a {
		color:var(--color-neutral);
	}
	header nav {
		/* position:relative; */
		margin-right:1.25em;
	}
	header nav ul {
		left:auto;
		right:4em;
		border-radius:0.15em;
		--feature-border:0.15em;
		box-shadow: 0 0 0 var(--feature-border)var(--color-ink), calc(-1 * var(--feature-border)) var(--feature-border) 0 var(--feature-border) #082145;
	}
	header [aria-expanded="true"] + ul {
		top:3.75em
	}
	header nav a {
		padding:0.5em 1.5em;
	}
}

footer img {
	width:5em;
}
footer ul {
	margin:0;
	padding:0;
	list-style:none;
	font-weight:bold;
	line-height: 1;
}
footer {
	font-size:min(80%, 3vw);
	align-items:flex-end;
	gap:1em;
	padding-bottom:3em;
}
footer svg {
	display: block;
}
footer > * {
	margin:0;
}
footer > .lockup {
	margin-right:auto;
}
footer ul a {
	white-space:nowrap;
	font-size:80%;
}
.copyright {
	font-size:80%;
}

.hitarea {
	-webkit-appearance:none; 
	border:none;
	font-size:inherit;
}
.home-hero-img {
	position:relative;
	font-size:var(--font-size-mobile); 
	overflow: hidden;
	border-radius: 1.75rem;
}
.home-hero-img-offset {
	position:relative;
	width: 125%;
	margin: 0 -10%;
}
[class*=decoration] {
	position:absolute;
	transform:translate(-50%,-50%);
	width:2em;
	height:2em;
}
@keyframes bleepblorp {
	0% { margin:0.1em 0.1em; }
	10% { margin:-0.1em 0; }
	20% { margin:-0.1em -0.1em; }
	30% { margin:0 0.1em; }
	40% { margin:0.1em 0; }
	50% { margin:0 -0.1em ; }
	60% { margin:0.1em -0.1em; }
	70% { margin:-0.1em 0.1em; }
	80% { margin:-0.1em 0; }
	90% { margin:0.1em -0.1em; }
}
@keyframes cdspin {
	0% { transform:translate(-50%,-50%) rotate(-180deg); }
	50% { transform:translate(-50%,-50%) rotate(0deg); }
	100% { transform:translate(-50%,-50%) rotate(360deg); }
}

.decoration-steam {
	background:url(../images/steam.gif) center / contain no-repeat;
	left: 71%;
	top: 65%;
}
.decoration-folder {
	background:url(../images/folder.png) center / contain no-repeat;
	left: 73%;
	top: 10%;
	animation:bleepblorp 10s -8s infinite steps(2, end);
}
.decoration-notepad {
	background:url(../images/notepad.png) center / contain no-repeat;
	left: 77%;
	top: 29%;
	animation:bleepblorp 10s -6s infinite steps(2, end);
}
.decoration-hourglass {
	background:url(../images/hourglass.gif) center / contain no-repeat;
	left: 59%;
	top: 89%;
	animation:bleepblorp 10s -1s infinite steps(2, end);
}
.decoration-wordbubble {
	background:url(../images/wordbubble.png) center / contain no-repeat;
	left: 17%;
	top: 61%;
	animation:bleepblorp 10s -5s infinite steps(2, end);
}
.decoration-thumbsup {
	background:url(../images/thumbsup.gif) center / contain no-repeat;
	left: 19%;
	top: 32%;
	/* animation:bleepblorp 10s -8s infinite steps(2, end); */
}
.decoration-disk {
	background:url(../images/disk.png) center / contain no-repeat;
	left: 68%;
	top: 36%;
	animation:bleepblorp 10s -4s infinite steps(2, end);
}
.decoration-trash {
	background:url(../images/trash.png) center / contain no-repeat;
	left: 75%;
	top: 63%;
}
.decoration-mail {
	background:url(../images/mail.png) center / contain no-repeat;
	left: 75%;
	top: 63%;
}
.decoration-hearts {
	background:url(../images/hearts.gif) center / contain no-repeat;
	left: 55.5%;
	top: 47%;
	/* animation:bleepblorp 10s 0s infinite steps(2, end)  */
}
.decoration-email {
	background:url(../images/mail.png) center / contain no-repeat;
	left: 30.5%;
	top: 67%;
	animation:bleepblorp 10s -6s infinite steps(2, end);
}
.decoration-cd {
	background:url(../images/cd.png) center / contain no-repeat;
	left: 5%;
	top: 92%;
	animation:cdspin 2s 0s infinite steps(4, end); 
}
.decoration-globe {
	background:url(../images/globe.png) center / contain no-repeat;
	left: 95%;
	top: 92%;
}
@media (min-width:48em) {
	.home-hero-img {
		position:relative;
		font-size:var(--font-size-desktop);
		border-radius: 1.5rem;
	}
	.home-hero-img-offset {
		width: 100%;
		margin: 0%;
	}
}
.home-hero .hitarea {
	position:absolute;
	background:#f009;
	background:#f000;
}
.hitarea-post-it {
	left: 56%;
	top: 9%;
	width: 4%;
	height: 9%;
}
.hitarea-coffee {
	left: 67.5%;
	top: 65%;
	width: 7%;
	height: 18%;
	border-radius: 25%;
}
.hitarea-dietcoke {
	left: 52%;
	top: 54%;
	width: 7%;
	height: 22%;
	border-radius: 25%;
}
.hitarea-water {
	left: 60.5%;
	top: 50%;
	height:20%;
	width: 5.5%;
	border-radius: 5% 5% 30% 30%;
}
.hitarea-signup {
	left: 26%;
	top: 15%;
	height: 35%;
	width: 21%;
	animation: screenblip 1s forwards;
	transition:filter 0.1s;
	padding:0;
}
.hitarea-signup img {
	width:80%; margin:10%; 
	animation: screenscramble 10s infinite;
}
.hitarea-signup:hover {
	filter:brightness(1.25);
}
.hitarea-cd {
	left: 1%;
	top: 86%;
	width:8%;
	height:13%;
}
.hitarea-globe {
	left: 91%;
	top: 86%;
	width:8%;
	height:13%;
}
@keyframes screenblip {
	0% { opacity:0; transform:scalex(0.5) scaley(0.1); }
	85% { opacity:0; transform:scalex(0.5) scaley(0.1); }
	90% { opacity:1; transform:scaley(0.1); }
	98% { transform:scaley(1.05); }
	100% {  transform:none; }
}
@keyframes screenscramble {
	0% { transform:none; }
	0.2% { transform:scaley(0.95) skewx(5deg); }
	0.4% { transform:scalex(0.95) skewy(5deg); }
	0.6% { transform:none; }
	
	70% { transform:none; }
	70.2% { transform:scaley(0.8) skewy(5deg); }
	70.4% { transform:scaley(0.9) skewy(-5deg); }
	70.6% { transform:none; }
}
.hitarea-keyboard {
	left: 18%;
	top: 74%;
	width: 34%;
	height: 13%;
	transform: skew(30deg, -6deg);
}
.hitarea-mouse {
	left: 58%;
	top: 77.5%;
	width: 8%;
	height: 10%;
	border-radius: 25% 60% 15%;
}

button {
	cursor:pointer;
}

.modal form, .modal button {
	pointer-events:auto;
}
.modal {
	position:absolute;
	left:50%; top:50%; 
	width:12em;
	display:block;
	padding:2em;
	z-index:1;
	transition:opacity 0.1s, visibility 0.2s, transform 0.2s;
	transform-origin:20% 80%;
	transform:translate(-50%,-50%) 
		scale(0.75);
	opacity:0;
	visibility:hidden;
}
.modal-bubble span {
	display:block;
}
.modal.modal-active {
	visibility:visible;
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}
.modal-wrapper {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	font-size: calc(0.25em + 2vw);
	font-size: calc(var(--font-size-mobile) / 1.5);
}
.modal-post-it {
	background:url(../images/postit.png) center / contain no-repeat;
	width: 8.5em;
	padding: 3em 0.75em 4em 1em;
	font-family:"Kirang Haerang";
	left:66%;
	top:25%;
	transform-origin: 27% 15%;
	transform: translate(-50%,-50%) scale(0.2);
}

div#modal-post-it1 {}
.modal-post-it span {
	display:block;
	transform:rotate(-4deg);
}
.modal-bubble {
	background:url(../images/wordbubble-lg.png) center / contain no-repeat;
	width: 9.5em;
	padding: 3em 2em 4em;
	margin: 0 -2.5em;
	left: 77%;
	top:auto;
	bottom: 38%;
	transform:scale(0.75);
	font-size:80%;
}
.modal-bubble.modal-active {
	transform:none; 
}
.modal-bubble .close-x {
	margin: 0.25em 1.25em;
	font-size:125%;
}
#modal-bubble2 {
	left: 58%;
	bottom: 47%;
}
#modal-bubble3 {
	left: 68%;
	bottom: 52%;
}
#modal-bubble4 {
	left: 10%;
	bottom: 6%;
	width:12em;
}
#modal-bubble5 {
	background:url(../images/wordbubble-lg-flip.png) center / contain no-repeat;
	right: 10%;
	left:auto;
	bottom: 6%;
	width:12em;
}
#modal-bubble4 span, 
#modal-bubble5 span {
	font-size:90%;
}
#modal-chat {
	background:url(../images/messenger.png) center / contain no-repeat;
	width: 14em;
	height: 12em;
	padding: 3em 2.5em 0;
	left:auto;
	right: 7%;
	top:35%;
	transform:scale(0.75);
}
#modal-chat.modal-active {
	transform:none; 
}
#modal-chat .modal-label {
	position:absolute;
	color:var(--color-neutral);
	font-family:Alfarn2;
	left:2.5em;
	top: 0.8em;
}
#modal-chat span {
	display:block;
	margin: 0.8em 0 0 0em;
	max-width: 14em;
	font-size: 80%;
}
#modal-chat span.bubble-right {
	display:block;
	margin: 2.0em 0 0 14em;
}
#modal-chat span.bubble-label {
	display:block;
	margin: 4.85em 0 0 14.3em;
	font-family:Alfarn2;
}
#modal-chat .close-x:after {
	content: '';
	display: block;
	position: absolute;
	width: 19em;
	height: 3em;
	top: 0.5em;
}

.modal::before {
	content:'';
	pointer-events:auto;
	display:block;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	margin:0.5em 0.25em 1em; 
	border-radius:1em;
	background:#00f9;
	background:#00f0;
}
.modal-bubble::before {
	margin: 0.25em 1em 1.5em 1em;
	border-radius: 3em;
}
.modal-post-it::before {
	margin: 0.5em 1em 1em 0.5em;
	border-radius: 0;
	transform: rotate(-4deg) skewx(2deg);
}
#modal-signup {
	color: var(--color-neutral);
	border:0.2em solid;
	border-radius: 0.3em;
	background:#1a304e;
	width: 16em;
	/* padding: 3.5em 0 1.5em; */
	padding: 0 1em 0.5em;
	left:1em;
	top:45%;
	transform:scale(0.75);
	z-index:999999 !important;
}
#modal-signup .close-x {
	margin:-0.5em -0.5em;
}
#modal-signup .modal-label {
	font-family:Alfarn2;
	padding: 0.25em 1em;
	margin:0 -1em;
	background:#3e8283;
	border-bottom:0.2em solid;
	border-radius: 0.1em 0.1em 0 0;
}
#modal-signup.modal-active {
	transform:none; 
}

#modal-signup .ff-form, 
#modal-signup .ff-form div, 
#modal-signup .ff-form p, #ff-addprd-popup {
	font-size:inherit;
}
#modal-signup > div {
	pointer-events:none;
}
#modal-signup .ff-form {
	color:var(--color-neutral) !important;
	background:#102a44 !important;
}
#modal-signup .ff-form div {
	color:var(--color-neutral);
}
#modal-signup form .ff-title,
#modal-signup form .ff-powered-img {
	display:none !important;
	height: 0 !important;
	margin: 0 0 -1px;
	overflow: hidden;
	padding:0;
}
#modal-signup form label {
	color: var(--color-neutral) !important;
	font-size: 1em;
	margin: 0 0 0.25em;
	font-family: inherit;
}
#modal-signup [data-hsfc-id="Renderer"] { padding:0.5em 0 0; font-size:max(1em, 16px); }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Row { gap:0; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content { padding:0; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Row { margin-bottom:0.25em; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-NavigationRow { margin-top:0; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-NavigationRow__Alerts { margin-bottom:0.5em; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-ErrorAlert { font-size:67%; color:var(--color-heart); top: -0.5em; position: relative; margin-bottom: 0; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Button { transition: background 0.15s; }
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover { transform:none; background:var(--color-happy); }
@media (min-width:430px) {
	#modal-signup [data-hsfc-id="Renderer"] .hsfc-Row { gap:1em; }
}


#modal-signup form .ff-item {
	padding:0;
}
#modal-signup .ff-watermark {
	padding:0 !important;
	margin:0 !important;
	max-height:0;
	visibility:hidden;
}
#modal-signup form .ff-secfields {
	margin:0;
	padding: 0;
	display: block;
}
#modal-signup .ff-section {
	background:#102a44;
	padding:0.5em 0 0 !important;
}
#modal-signup form {
	margin:0 auto;
	/* width:12em; */
	position:relative;
	padding:0 !important;
	background:none;
	font-size:66% !important;
}
#modal-signup input {
	display:block;
	font-family:inherit;
	font-size:inherit;
	/* width: calc(100% - 2.4em); */
	background:var(--color-neutral);
	color:var(--color-vert);
	/* border:0.2em solid; */
	border:none;
	border-radius: 0.25em;
	margin: 0 auto 0.5em;
	text-align:center;
	padding:0.1em 1em;
	min-height: 0;
	height: 2em;
}
#modal-signup input:focus {	
	box-shadow: none !important;
	outline: 2px solid var(--color-marinade);
	outline-offset: 0;
}
#modal-signup .modal-label::after {
	content: '';
	/* content: "×"; */
	display: block;
	position: absolute;
	width: 0.95em;
	height: 0.95em;
	font-weight: 900;
	text-shadow: 0.02em 0, 0 0.02em;
	line-height: 0.95;
	border: 0.15em solid #051520;
	border-radius: 0.15em;
	right: 0.4em;
	top: 0.2em;
	background: #c36036;
	box-shadow: inset 0.1em 0.1em #fe06;
}
#modal-signup form button {
	display:block;
	font-family:Alfarn2;
	font-size:inherit;
	font-weight:bold;
	box-shadow: inset 0.1em 0.1em 0 #ffde0066;
	margin:0 auto 0.5em;
	border:0.1em solid;
	padding: 0.3em 1em;
	background-color: var(--color-button);
	border-radius: 0.25em;
	color: var(--color-vert)  !important;
	text-transform:uppercase;
	/* height: 2.5em; */
}
#modal-signup form button[aria-live="polite"] {
	background: #fffc;r
	font-family: inherit;
	font-weight: normal;
	text-transform: none;
	box-shadow: none;
	margin: 0 0.5em;
}
#modal-signup form button img {
	display:none;
}
#modal-signup form button span {
	font-size:inherit;
}

.close-x {
	font-size:inherit;
	border:0.1em solid var(--color-marinade);
	border-radius:100%;
	background: var(--color-neutral);
	position:absolute;
	font-family:Alfarn2;
	font-weight:900;
	text-align:center;
	width:1.6em;
	height:1.6em;
	padding: 0;
	top:-0.25em;
	left:-0.5em;
}
.close-x::before {
	content:'X';
}



.home-about {
	outline-color:var(--color-happy);
	background:var(--color-marinade);
	padding:0 1em 1em;
	color:white;
}
.home-about h2 {
	color:var(--color-black);
	text-wrap:pretty;
}
p {
	text-wrap:pretty;
}
@media (min-width:48em) {
	.home-about {
		padding:0 2em 2em;
	}
	.home-about h2 {
		font-size:2.5em;
	}
	.modal-wrapper {
		font-size:min(calc(0.25em + 1.5vw), 1.25rem);
		width: 94%;
	}
	#modal-signup {
		left:2em;
	}
	#modal-bubble5 {
		right:5%
	}
	footer {
		font-size:1em;
	}
}
@media (min-width:64em) {
	main, footer {
		font-size:min(1.125em, 1.55vw);
	}
}




/* beta page content */
.beta-hero {
	position:relative;
}
.beta-hero h2,
.beta-about h2 {
	font-size:1.5em;
	color:var(--color-neutral);
}
.beta-hero-img {
	position: absolute;
	width:100%;
	height:100%;
	overflow: hidden;
	border-radius: 1.5rem;
}
.beta-hero-img {
	background:url(../images/beta/beta-gradient.jpg) center / auto 100%;
}
.beta-hero-img img {
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position: right bottom;
}
.beta-hero-overlay {
	/* font-size: var(--font-size-mobile); */
	font-size:min(1em, calc(0.5em + 1.5vw));
	position:relative;
	padding:1em 2em calc(6em + 15%);
	color:#fff;
}
.beta-hero .button-cta {
	margin: 1em 0;
}
.beta-hero .deco-wrapper {
	font-size:min(1.75em, calc(1em + 2vw));
}
.beta-hero .decoration-cloud1 {
	right:-2%;
	left:auto;
	width: 5.5em;
	height: 7em;
	transform: none;
	top: 84%;
	background:url(../images/beta/cloud1.png) 0 0 / 100% auto no-repeat;
	animation:bleepblorp 10s -4s infinite steps(2, end);
} 
.beta-hero .decoration-cloud2 {
	right: 20%;
	left:auto;
	top: 91%;
	width: 6em;
	height:3em;
	background:url(../images/beta/cloud2.png) 0 0 / 100% auto no-repeat;
	animation:bleepblorp 10s -6s infinite steps(2, end);
} 
.beta-hero .decoration-disk {
	left:50%;
	top:85%;
}
.beta-hero .decoration-thumbsup {
	left:82%;
	top:92%;
	font-size:180%;
}

@media (min-width:768px) {
	.desktop-only-space {
		height:1em;
	}
	.button-cta {
		font-size:min(2rem, calc(0.5rem + 2vw));
	}
	.beta-hero-overlay {
		font-size:1em;
		padding:3em 25% 3em 3em;
	}
	.beta-hero-overlay h2, 
	.beta-about h2 {
		font-size:min(3em, calc(0.5em + 3.5vw));
		max-width: 17em;
	}
	.beta-hero .deco-wrapper {
		font-size:min(2em, calc(0.75em + 1.5vw));
	}
	.beta-hero .decoration-cloud1 {
		top:60%;
	} 
	.beta-hero .decoration-cloud2 {
		right: -3%;
		top: 33%;
	} 
	.beta-hero .decoration-disk {
		left:86%;
		top:27%;
	}
	.beta-hero .decoration-thumbsup {
		left:90%;
		top:67%;
	}
	
}



.button-cta {
	font-family:Alfarn2;
	font-size: 0.75rem ;
	font-weight: bold;
	display:block;
	padding:1em;
	letter-spacing:0.1em;
	box-shadow: inset 0.1em 0.1em 0 #ffde0066;
	margin: 1em auto;
	border: 0.15rem solid;
	width:100%;
	background-color: var(--color-button);
	border-radius: 0.25em;
	color: var(--color-vert);
}
.button-cta:hover {
	background: var(--color-happy);
}
#modal-signup.modal-signup-beta.modal-active {
	position: absolute;
}
#modal-signup.modal-signup-beta {
	position: fixed;
	z-index: 99999;
	display:flex;
	flex-direction:column;
	transform: translate(-50%,0);
	max-width:32em;
	top: 0;
	left: 50%;
	padding: 1em 0em 0;
	width:100%;
	/* max-height: calc(100% - 2.4em); */
	overflow-y: hidden;
	height: auto;
	top: 0;
	border:none;
	border-radius:0;
	background:none;
}
#modal-signup.modal-signup-beta .close-x {
	left:1em;
	top:1em;
}
#modal-signup.modal-signup-beta .modal-label::after { display:none; } 
#modal-signup.modal-signup-beta form input {
	font-size:16px;
}
#modal-signup.modal-signup-beta form {
	font-size:87.5% !important
}
#modal-signup.modal-signup-beta .modal-label {
	border: 0.2em solid;
	padding:0.25em 2em;
	margin:0 0 -0.2em;
}
#modal-signup.modal-signup-beta > div.hs-form-html {
	border: 0.2em solid;
	border-radius:0;
	background: #1a304e;
	padding:1em;
	flex-basis: calc(100% - -4em);
	overflow-y: auto;
}
#modal-signup.modal-signup-beta > div.hs-form-html > div {
	padding-bottom:1em;
}
#modal-signup [data-hsfc-id="Renderer"] .hsfc-Form,
#modal-signup [data-hsfc-id="Renderer"] .hsfc-DropdownOptions{ font-family:inherit; }
[data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem { font-size:1.5em; padding:4px 8px; }
#modal-signup .hsfc-DropdownInput__Caret { padding:0 8px; }
#modal-signup.modal-signup-beta .hsfc-CheckboxFieldGroup__Options  input { margin:0; font-size:12px; }
#modal-signup .hsfc-CheckboxFieldGroup__Options { display:flex; flex-wrap:wrap; margin:1em 0 0.5em 0}
#modal-signup .hsfc-CheckboxFieldGroup__Options label { font-size:1em; }
#modal-signup .hsfc-CheckboxFieldGroup__Options > div {  flex-basis:100%; }
.modal-overlay {
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#f2eeddcc;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s;
	z-index:99998;
	backdrop-filter: blur(8px);
}
html.scroll-pinned {
	/* position:fixed; */
	/* width:100%; */
	/* height:100%; */
}
html.scroll-pinned body {
	/* width:100%; */
	/* height:100%; */
	/* position:absolute; */
	/* overflow:hidden; */
}
html.scroll-pinned .main_container {
	position:fixed; 
	pointer-events:none;
	transform: translate(-50%,0);
	left: 50%;
	width:100%;
}
.modal-active + .modal-overlay {
	visibility:visible;
	opacity:1;
	cursor:pointer;
}
@media (min-width:375px) {
	.button-cta {
		width:20em;
	}
}
@media (min-width:768px) {
	.button-cta {
		font-size:min(1.5rem, calc(1rem + 0.5vw));
	}
	#modal-signup.modal-signup-beta {
		max-width:46em;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	#modal-signup.modal-signup-beta > div.hs-form-html {
		max-height:calc(100vh - 8em);
		overflow-y:auto;
	}
	#modal-signup .hsfc-CheckboxFieldGroup__Options > div {  flex-basis:calc(50% - 1em); }
}
.beta-about {
	outline-color: var(--color-ink);
	background: url( ../images/beta/orange-gradient.jpg) center / auto 100%; 
	padding:1em 2em 2em;
	color: white;
}
.beta-about p {
}
.beta-about ul {
	list-style:none;
	margin:1em 0;
	padding:0;
}
.beta-about li {
	list-style:none;
	margin:1.5em 0;
	padding:0 0 0 3em;
	position:relative;
	min-height:2em;
}
.beta-about li::before {
	content:''; 
	display:block;
	position:absolute;
	width:3em; height:3em;
	margin:-1.5em  -3.5em;
	top:1.25em;
	background:url(../images/wordbubble.png) center  / contain no-repeat;
}
.beta-about li:nth-child(1)::before {
	margin-top:-1.75em;
}
.beta-about li:nth-child(2)::before {
	background-image:url(../images/globe.png);
}
.beta-about li:nth-child(3)::before {
	background-image:url(../images/mail.png);
	margin-top:-1.75em;
}
.beta-about li:nth-child(4)::before {
	background-image:url(../images/folder.png);
}
.beta-about li:nth-child(5)::before {
	background-image:url(../images/notepad.png);
}
.beta-about li strong {
	text-transform:uppercase;
}
@media (min-width:768px) {
	.beta-about {
		padding:1em 3em 2em;
	}
	.beta-about li::before {
		top:50%;
		margin-top:-1.75em;
	}
}





.beta-features {
	text-align:center;
	--feature-padding:1em;
	--feature-border:0.15em;
}
.beta-features h2 {
	max-width: 12em;
	margin-left: auto;
	margin-right: auto;
}
.beta-features a {
	color:var(--color-ink);
}
.beta-features a:hover {
	color:var(--color-aqua);
}
.beta-features-grid {
	display:flex;
	flex-direction:column;
	gap:1em;
	color:var(--color-blank);
}
.beta-faq {
	color:var(--color-blank);
}


.beta-features-grid p {
	margin-top:auto;
	margin-bottom:auto;
}

.beta-features-grid > div,
.beta-faq .faq-question {
	display:flex;
	flex-direction:column;
	border:var(--feature-border) solid;
	border-radius:0.25em;
	box-shadow: 0 0 0 var(--feature-border)var(--color-ink), calc(-1 * var(--feature-border)) var(--feature-border) 0 var(--feature-border) #082145;
}
.beta-features h3,
.beta-faq button {
	font-family:inherit;
	font-size:inherit;
	text-transform:uppercase;
	text-align:inherit;
	margin:0;
}
.beta-features-title,
.beta-faq button {
	font-family:Alfarn2;
	border:none;
	background:var(--color-aqua);
	border-radius: 0.15em 0.15em 0 0;
	color:inherit;
	padding: calc(var(--feature-padding) * 1) calc(var(--feature-padding) * 0.25);
	position:relative;
}
.beta-features-desc {
	border-top:var(--feature-border) solid;
	padding:var(--feature-padding);
	background:var(--color-ink);
	border-radius: 0 0 0.15em 0.15em ;
	flex-grow:1;
	display: flex;
	align-items: center;
}
.faq-question {
	text-align:initial;
	margin-bottom:calc(1em + 2 * var(--feature-border));
	--faq-timing: 0.25s;
}
.faq-question button {
	padding:calc(var(--feature-padding) * 1) calc(var(--feature-padding) * 1);
	padding-right:3em;
	border-radius: 0.15em;
}
.faq-question button::after {
	content:'+';
	display:block;
	background:var(--color-neutral);
	color:var(--color-ink);
	height:1em;
	border:0.08em solid;
	border-radius:0.12em;
	line-height:0.9em;
	width:1em;
	text-align:center;
	position:absolute; right:1em; top:50%;
	margin-top:-0.7em;
	font-size:110%;
	padding:0.1em;
	font-weight:bold;
}
.faq-answer {
	color:var(--color-ink);
	max-height:0;
	overflow:hidden;
	transition:max-height var(--faq-timing); 
}
.faq-answer > div {
	overflow:hidden;
	padding:calc(var(--feature-padding) * 1) calc(var(--feature-padding) * 1);
}
.faq-answer a {
	visibility:hidden;
	transition:visibility var(--faq-timing);
}
.faq-question button[aria-expanded=true] + .faq-answer a, 
.faq-question button[aria-expanded=true] ~ .faq-answer a {
	visibility: visible;
}
.faq-question button[aria-expanded=false] + .faq-answer {
	
}
.faq-question button[aria-expanded=true] {
	border-radius: 0.15em 0.15em 0 0;
}
.faq-question button[aria-expanded=true]::after {
	content:'−';
}
.faq-question button[aria-expanded=true] + .faq-answer {
	max-height:none;
	transition:max-height var(--faq-timing); 
}
@media (min-width:768px) {
	.beta-features h2 {
		max-width: none;
	}
	.beta-features {
		--feature-padding:1.5em;
	}
	.beta-features-grid {
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
	}
	.beta-features-grid > div {
		flex-basis:calc(50% - 1em);
	}
	.faq-question button::after {
		font-size:150%;
	}
}
@media (min-width:1200px) {
	.beta-features-grid,
	.beta-faq {
		max-width:1088px;
		margin:auto;
	}
}