@font-face { font-family: 'title'; font-style: normal; font-display: swap; src: url(../assets/variable.ttf) format('truetype'); }
@font-face { font-family: 'body'; font-style: normal; font-display: swap; src: url(../assets/doc300.woff2) format('woff2'); }

:root {
	--black: #000000;
	--white: #ffffff;
	--blue: #747caa;
	--green: #99ac1b;
	--yellow: #ebb100;
	--orange: #d86c39;
	--pink: #d75d7f;
	font-size: 16px;
	font-family: body;
	font-weight: 300;
	color: var(--black);
	background-color: var(--white);
}

html, body { padding: 0; margin: 0; width: 100vw; height: 100vh; overflow: hidden; font-size: 1rem; }
body > div.body {
	background-image: url(../assets/b2.webp);
	background-size: cover;
	background-attachment: fixed; 
	overflow: auto; text-size-adjust: none;
	max-width: 100%; height: 100%;
}
body {
	background-color: var(--white);
	text-align: center;
}
h1, h2, h3 { margin: 0; font-family: title; font-weight: 300; }
h2 { font-size: 2.5rem; margin-bottom: 1rem; }

header {
	text-align: left; padding: 1rem 2rem; box-sizing: border-box; z-index: 100; 
	position: fixed; top: 0; left: 0; right: 0; transform: translateY(0); transition: all 220ms ease;
	background-color: #fff0;
	border-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%) 1;
	border-bottom-width: 0; border-bottom-style: solid;
}
header.stuck { background-color: #ffff; border-bottom-width: 2px; }
header.stuck:hover { background-color: #ffff; }
header img { height: 3rem; vertical-align: middle; }
header p { display: inline-block; vertical-align: middle; margin: 0 1rem; padding: 0; }
header p:first-of-type  { font-size: 2rem; font-family: title; font-style: normal; position: relative; z-index: 0; text-transform: uppercase; font-weight: 200; }
header a { border: 0; outline: 0; color: var(--black); text-decoration: none; }
header a.raised {
	display: inline-block; position: absolute; right: 2rem;
	min-width: 5rem; border-radius: 2px; padding: 0 1rem; cursor: pointer;
	margin: 0.5rem; border: 0; text-align: center; font-weight: 400;
	text-transform: uppercase; line-height: 2rem; font-size: 0.8rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0), 0 1px 2px rgba(0,0,0,0);
	background-color: #d75d7f20; color: var(--pink);
}
header a.raised:hover { 
	background-color: var(--pink); color: var(--white); 
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

main .hero {
	min-height: 100vh; background-color: var(--white);
	position: relative; padding: 5rem 2rem; box-sizing: border-box;
	box-shadow: 0 1rem 1rem #0008; min-width: 60rem;
}
main .hero img { height: 13rem; }
main .hero h1 { font-size: 4rem; 
	color: transparent; padding: 3rem 0; 
	background-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%);
	background-clip: text;
	display: block;
}
main .hero em { font-style: normal; }
main .hero em::before { content: '('; }
main .hero em::after { content: ')'; }
main .hero p { font-size: 2rem; letter-spacing: 0.4rem; text-transform: uppercase; line-height: 3rem; }
main .hero p strong { color: var(--pink); font-weight: normal; }
main .hero p span::first-letter { color: var(--pink); font-weight: normal; }
main .hero .description { display: flex; justify-content: center; gap: 3rem; margin: 10rem 3rem; flex-wrap: wrap; }
main .hero .description p { flex: 1 1 auto; display: inline-block; width: 40%; padding: 3rem; text-transform: none; font-size: 1.2rem; letter-spacing: 0.2rem;
	border-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%) 1;
	border-width: 2px; border-style: solid; box-sizing: border-box; vertical-align: middle; min-width: 35rem;
}

main { min-width: 60rem; box-sizing: border-box; }
main > section { padding: 5rem 2rem; min-height: 100vh; box-sizing: border-box; overflow: auto; }

main .sample button {
	background-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%);
	width: calc(100% - 6rem); border: 0; border-radius: 3rem; padding: 1rem; font-size: 1.3rem; letter-spacing: 0.1rem; position: relative;
	cursor: pointer; margin: 1rem 3rem; transition: box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); box-shadow: 0 0 0 #0000, 0 0 0 #0000;
}
main .sample button:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
main .sample button::before { 
	content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; background-color: #fffc; border-radius: 3rem; 
	transition: background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
main .sample button:hover::before { background-color: #fff9; }
main .sample button > * { position: relative; z-index: 2; }

footer { min-width: 60rem; box-sizing: border-box; padding: 5rem; text-align: center; color: #aaa; background-color: #eee; }
footer a { color: var(--blue); display: inline-block; margin: 0.5rem; }
footer p { font-size: 0.8rem; margin-top: 1rem; }

aside {
	z-index: 99; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background-color: #eefdffaa; backdrop-filter: blur(0.2rem);
}
aside > div {
	position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
	background-color: var(--white); border-radius: 0.5rem; padding: 2rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	max-width: 48rem; max-height: 60vh; overflow: auto; text-align: left; font-size: 0.9rem;
}
aside h2 { text-align: center; font-size: 1.5rem; }
#consent li { margin-top: 1rem; }
#consent strong { font-weight: 600; }
#consent ul { list-style: none; }
#consent em { color: var(--pink); font-style: normal; }
#consent a { color: var(--blue); }
aside button { border: 0; padding: 0.5rem 1.5rem; border-radius: 2rem; margin: 0 2rem; cursor: pointer; float: right; }
#consent button:disabled { color: #0004; background-color: #0001 !important; border: #0003 !important; cursor: not-allowed; }
#consent button.cancel { background-color: #d75d7f30; border: 2px solid var(--pink); }
#consent button.publish { background-color: #99ac1b30; border: 2px solid var(--green); }

#result { text-align: center; }
#result p { color: #000a; letter-spacing: 0.05rem; line-height: 1.2rem; }
#result button.close { background-color: #d75d7f30; border: 2px solid var(--pink); }
#result button.done { background-color: #99ac1b30; border: 2px solid var(--green); }

section.sample { padding: 10rem 2rem; }
section.sample h2 { padding-bottom: 2rem; }
section.sample > div { max-width: 48rem; margin: 0 auto; padding: 3rem; background-color: var(--white); box-shadow: 1rem 1rem 1rem #0008; }
section.sample .codewrap { overflow: auto; border: 1px solid #8888; display: grid; grid-template-columns: 1fr; }
section.sample .disabled { cursor: not-allowed; opacity: 0.7; }
section.sample .disabled > code { border-left-color: #888; min-width: max-content; 
	background-image: linear-gradient(#f4f4f4 50%, #e0e0e0 50%) !important;
}
section.sample code-input code { background-image: linear-gradient(#35CC5108 50%, #35CC5118 50%); border-left: 10px solid #35CC51;
	border-top: 2px solid #35CC51; border-bottom: 2px solid #35CC51;
}
section.sample p { text-align: right; margin: 0; font-size: 0.85rem; }
section.sample p a { color: var(--blue); text-decoration: none; }

section.text { background-color: var(--white); box-shadow: 0 1rem 1rem #0008; text-align: center; }
section.text svg { font-family: body; width: 40%; min-width: 30rem; }

ul.box { list-style: none; margin: 0; padding: 5rem; display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; gap: 5rem; }
ul.box li { 
	border-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%) 1;
	border-width: 2px; border-style: solid;
	flex: 1; font-size: 1rem; max-width: 45%; min-width: 30rem;
	padding: 2rem; box-sizing: border-box;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
ul.box p { text-align: justify; letter-spacing: 0.03rem; line-height: 2rem; }
ul.box h2 { font-weight: 300; font-size: 2rem; }
ul.box em { font-style: normal; display: inline-block; position: relative; z-index: 0; text-transform: uppercase; font-weight: 200; 
	color: transparent;
	background-image: linear-gradient(51deg, var(--green) 25%, var(--yellow) 50%, var(--orange) 75%);
	background-clip: text;
}

section.plans { padding: 4rem 2rem; }
section.plans > div { max-width: 85rem; min-width: 50rem; margin: 0 auto; padding: 3rem; background-color: var(--white); box-shadow: 1rem 1rem 1rem #0008; }
ol#products { display: flex; gap: 1rem; flex-flow: row wrap; justify-content: center; }
ol#products > li { 
	text-align: center; border: 2px solid transparent; border-radius: 2rem; box-shadow: #0003 0px 1px 3px;
	min-width: 15.5rem; max-width: 20rem; width: 100%; display: flex; flex-flow: column;
	background: linear-gradient(white, white) padding-box, linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%) border-box;
	padding: 1rem; margin-bottom: 1rem;
}
ol#products > li > :first-child { flex: 1 0 auto; }
ol#products > li > :last-child { flex: 0 0 auto; }
ol#products > li button { width: 80%; }
ol#products > li.disabled { opacity: 0.3; cursor: not-allowed; user-select: none; }
ol#products > li p.sub { font-size: 0.9rem; color: #000a; margin-top: 1rem; }
ol#products > li p.price { font-size: 3rem; color: var(--pink); margin-top: 2rem; margin-bottom: 1rem; }
ol#products > li p.unit { font-size: 0.8rem; color: var(--pink); }
ol#products > li hr { margin: 1rem; height: 1px; border: 0; background-color: #0003; }
ol#products > li ul { list-style-position: inside; padding: 0; margin-bottom: 1rem; }
ol#products > li ul li { padding: 0.5rem; margin: 0; text-align: left; font-size: 0.9rem; background: none; }
ol#products > li ul li::marker { content: "✓   "; margin-right: 0.5rem; color: var(--green); }
ol#products > li h2 { font-size: 1.5rem; color: var(--blue); padding: 1rem 0; }
ol#products button {
	min-width: 88px; border-radius: 2px; padding: 0 16px; cursor: pointer;
	margin: 8px; border: 0; text-align: center; font-weight: 400;
	text-transform: uppercase; line-height: 36px; font-size: 14px;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); user-select: none;
}
ol#products button.raised {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	background-color: var(--pink); position: relative; overflow: hidden;
	color: #fff;
}
ol#products button.raised:hover { color: rgba(255,255,255,0.8); }
ol#products button.raised:active { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); color: rgba(255,255,255,0.6); }

ol#products button { background-color: transparent; position: relative; overflow: hidden; color: var(--pink); }
ol#products button:before { 
	content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
	background-color: var(--pink); opacity: 0; 
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}
ol#products button:hover:before, button:focus:before { opacity: 0.12; }
ol#products button:active:before { opacity: 0.26; }

[data-tooltip] { min-width: 0; overflow: visible; position: relative; cursor: help; }
[data-tooltip]:hover::after {
	display: block; color: var(--white); font-size: 0.9rem;
	position: absolute; padding: 0.5rem 1rem; background-color: #000d; top: 100%; left: 50%;transform: translateX(-50%); 
	border-radius: 0.5rem; pointer-events: none; text-align: center;
	border: 1px solid var(--white); z-index: 10; width: 15rem; white-space: wrap;
}
[data-tooltip]:hover::after { content: attr(data-tooltip); }

section.faq { background-color: var(--white); }
section.faq > h2 { margin-bottom: 2rem; }
ul.faq { list-style: none; max-width: 48rem; margin: 0 auto; padding: 0; text-align: left; }
ul.faq li { display: block; padding: 1rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
ul.faq li.open p { display: block; }
ul.faq li p { display: none; font-size: 0.9rem; line-height: 1.5rem; letter-spacing: 0.05rem; text-align: justify; color: #000b: }
ul.faq li h2 { cursor: pointer; border-bottom: 3px solid; font-family: body; padding: 0.5rem; font-size: 1.2rem; letter-spacing: 0.06rem; }
ul.faq li:nth-child(5n + 1) h2 { border-bottom-color: var(--blue); }
ul.faq li:nth-child(5n + 2) h2 { border-bottom-color: var(--green); }
ul.faq li:nth-child(5n + 3) h2 { border-bottom-color: var(--yellow); }
ul.faq li:nth-child(5n + 4) h2 { border-bottom-color: var(--orange); }
ul.faq li:nth-child(5n + 5) h2 { border-bottom-color: var(--pink); }

/* ========== DEFAULTS SECTION ========== */

.defaults-wrap { max-width: 64rem; margin: 0 auto; padding-top: 4rem; }
.defaults-wrap > h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.defaults-sub { font-size: 1.1rem; color: #000a; letter-spacing: 0.03rem; margin-bottom: 3rem; }

.defaults-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
	text-align: left;
}
.defaults-grid li {
	padding: 1.5rem; box-sizing: border-box;
	border-left: 2px solid;
	background-color: #fafafa;
}
.defaults-grid li:nth-child(8n+1) { border-left-color: var(--blue); }
.defaults-grid li:nth-child(8n+2) { border-left-color: var(--green); }
.defaults-grid li:nth-child(8n+3) { border-left-color: var(--yellow); }
.defaults-grid li:nth-child(8n+4) { border-left-color: var(--orange); }
.defaults-grid li:nth-child(8n+5) { border-left-color: var(--pink); }
.defaults-grid li:nth-child(8n+6) { border-left-color: var(--blue); }
.defaults-grid li:nth-child(8n+7) { border-left-color: var(--green); }
.defaults-grid li:nth-child(8n+8) { border-left-color: var(--yellow); }

.defaults-grid li strong { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; letter-spacing: 0.02rem; }
.defaults-grid li span { display: block; font-size: 0.85rem; color: #000a; line-height: 1.4rem; letter-spacing: 0.02rem; }


/* ========== WORKFLOW SECTION ========== */

section.workflow { padding: 5rem 2rem; text-align: center; }

.workflow-wrap { max-width: 72rem; margin: 0 auto; margin: 0 auto; padding: 3rem; background-color: var(--white); box-shadow: 1rem 1rem 1rem #0008;
 overflow: auto; }
.workflow-wrap > h2 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.workflow-sub { font-size: 1.1rem; color: #000a; letter-spacing: 0.03rem; margin-bottom: 3rem; }
.spacer + .workflow-sub { margin-top: 7rem; }

.workflow-cols { display: flex; gap: 2rem; align-items: stretch; }

.workflow-col {
	flex: 1; text-align: left; padding: 2rem; min-width: 15rem;
	background-color: var(--white); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.workflow-col h3 { font-size: 1.4rem; margin-bottom: 0.5rem; font-family: title; }
.workflow-col p { font-size: 0.9rem; color: #000a; line-height: 1.5rem; letter-spacing: 0.03rem; margin-bottom: 1.5rem; }
.workflow-col p strong { font-weight: 600; }

.workflow-code {
	background-color: #1e1e2e; color: #cdd6f4; padding: 1.2rem; border-radius: 0.4rem;
	font-family: monospace; font-size: 0.8rem; line-height: 1.5; overflow-x: auto;
	margin: 0;
}
.workflow-code code { font-family: inherit; }
.workflow-code em { color: #6c7086; font-style: normal; }
.workflow-code b { color: #89b4fa; font-weight: normal; }
.workflow-code samp { color: #a6e3a1; }
.workflow-code code strong, .workflow-code strong { color: #89b4fa; font-weight: normal; }


/* ========== GROWTH SECTION ========== */

section.growth { background-color: var(--white); box-shadow: 0 1rem 1rem #0008; padding: 5rem 2rem; text-align: center; }

.growth-wrap { max-width: 72rem; margin: 0 auto; }
.growth-wrap > h2 { font-size: 2.5rem; }

.growth-stages { display: flex; gap: 2rem; align-items: stretch; }

.growth-stage {
	flex: 1; text-align: left; padding: 2rem;
	border-top: 2px solid;
}
.growth-stage h3 { font-size: 1.3rem; margin-bottom: 1rem; font-family: title; }
.growth-stage p { font-size: 0.9rem; color: #000a; line-height: 1.5rem; letter-spacing: 0.03rem; margin: 0 0 1rem 0; }
.growth-stage p strong { font-weight: 600; }

.stage-solo { border-top-color: var(--green); background-color: #99ac1b18; }
.stage-team { border-top-color: var(--yellow); background-color: #ebb10018; }
.stage-enterprise { border-top-color: var(--blue); background-color: #747caa18; }

.growth-code {
	background-color: #1e1e2e; color: #cdd6f4; padding: 1rem; border-radius: 0.4rem;
	font-family: monospace; font-size: 0.8rem; line-height: 1.5; overflow-x: auto;
	margin: 1rem 0 0 0;
}
.growth-code code { font-family: inherit; }
.growth-code em { color: #6c7086; font-style: normal; }
.growth-code b { color: #89b4fa; font-weight: normal; }
.growth-code samp { color: #a6e3a1; }


/* ========== RESPONSIVE ========== */

@media (max-width: 960px) {
	ul.box li { min-width: 100%; font-size: 1.5rem; }
	ul.box h2 { font-size: 2.5rem; }
	table { font-size: 1.5rem; }
	section h2 { font-size: 2.5rem; }
	ul.faq { max-width: 100%; }
	ul.faq li { padding: 2rem; }
	ul.faq li h2 { font-size: 1.5rem; }
	ul.faq li p { font-size: 1.5rem; line-height: 2.5rem; }
	footer { padding: 5rem 2rem; font-size: 1.5rem; }
	footer p { font-size: 1.2rem; }
	main .sample button { font-size: 2rem; }
	section.sample p { font-size: 1.5rem; }
	section.sample .codewrap { font-size: 1.5rem; }
	aside > div { max-width: unset; width: 85%; font-size: 1.5rem; line-height: 2rem; }
	aside h2 { font-size: 2.5rem; }
	aside button { font-size: 1.5rem; padding: 1rem 2rem; }

	.defaults-grid { grid-template-columns: repeat(2, 1fr); }
	.workflow-cols { flex-direction: column; }
	.growth-stages { flex-direction: column; }
}