:root {
	--foreground: #000000;
	--background: #ffffff;
	--primary: #50d3bc;
	--primary-background: var(--primary);
	--primary-foreground: #000000;
	--primary-link: #343434;
	--primary-link-interaction: #454545;
	--dark-foreground: var(--background);
	--dark-link: color-mix(in lab, var(--primary) 75%, var(--dark-foreground));
	--dark-foreground: var(--background);
	--dark-background: var(--primary-foreground);
	--shaded-background: #f3f3f3;
	--link: #50d3bc;
	--link-interaction: color-mix(in lab, var(--primary) 80%, var(--background));
	--fs--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
	--fs--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
	--fs-0: clamp(1rem, 1rem + 0.2174vw, 1.15rem);
	--fs-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
	--fs-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
	--fs-3: clamp(2.344rem, 2.171rem + 1.265vw, 3.041rem);
	--fs-4: clamp(2.6rem, 2.4rem + 1.3vw, 3.2rem);
	--fs-5: clamp(3rem, 3rem + 3vw, 5rem);
	--page-margin-inline: clamp(1.5rem, 1.5rem + 3vw, 3.5rem);
	--content-inline-size: min(100% - var(--page-margin-inline), 1300px);
	--news: #50d3bc;
	transition-behavior: allow-discrete;
}

/* div,span,section,h1,h2,h3,h4,p,ul,ol,p {
	outline: 1px dashed #56F;
} */
html.js,
html > body {
	overflow: unset;
	scroll-behavior: smooth;
}
.x-section.grey,
.x-section.gray,
.x-section.shaded,
.x-row.grey,
.x-row.gray,
.x-row.shaded {
	--background: var(--shaded-background);
	background-color: var(--shaded-background);
}
.x-section.dark,
.x-row.dark {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	color: var(--foreground);
	background-color: var(--background);
}
.x-section .x-text,
.x-section h1,
.x-section h2,
.x-section h3,
.x-section h4,
.x-section h5,
.x-section h6,
.x-section p,
.x-section ul,
.x-section ol,
.x-section li {
	color: var(--foreground);
}
.x-section h1,
.x-section .h1 {
	font-size: var(--fs-2);
	font-weight: 600;
	text-wrap: balance;
}
.x-section h2,
.x-section .h2 {
	font-size: var(--fs-2);
	font-weight: 600;
	text-wrap: balance;
}
.x-section h3,
.x-section .h3 {
	font-size: var(--fs-1);
	text-wrap: balance;
}
.x-section h4,
.x-section .h4 {
	font-size: var(--fs-1);
	text-wrap: balance;
}
.x-section h5,
.x-section .h5 {
	font-size: var(--fs-1);
	text-wrap: balance;
}
p,
li,
.x-text,
.x-text p,
.x-text li {
	font-size: var(--fs-0);
	font-weight: 300;
}
.x-section h2,
.x-section .h2,
.x-section h3,
.x-section .h3,
.x-section h4,
.x-section .h4,
.x-section h5,
.x-section .h5,
.x-section p,
.x-section li {
	margin-block-end: 1.7rem;
}
.x-section p,
.x-section li {
	margin-block-end: 1.15rem;
}
a,
a > span {
	transition: 0.3s color linear, 0.3s background-color linear, 0.3s border-color linear;
}
.x-site .x-container.max {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.x-row.max.width {
	width: min(92%, 1400px);
	margin-inline: auto;
}
.x-row > .x-row-inner:not(:has(.x-col:nth-child(2))) {
	margin-inline: 0;
}

/* HEADER  */

.x-masthead:is(.x-masthead) {
	position: sticky;
	inset-block-start: 0;
	z-index: 10;
}
.admin-bar .x-masthead {
	inset-block-start: 32px;
}
.x-masthead svg {
	width: 100%;
	height: auto;
}
.x-masthead .x-bar {
	color: var(--foreground);
	background-color: var(--background);
	transition: 0.2s color linear, 0.2s background-color linear;
}
.x-masthead[data-theme="news"] .x-bar {
	color: var(--primary-foreground);
	background-color: var(--news);
}
.x-masthead .x-menu-first-level {
	gap: 0;
	transition: 0.45s gap ease-in-out 0.3s;
}
.x-masthead:has(.logo .short) .x-menu-first-level {
	gap: 1rem;
	transition-delay: 0.5s;
}

/* LOGO */

@keyframes dot {
    0% {
        translate: 0 0;
    }
    55% {
        translate: 0 81.9%;
    }
    80% {
        translate: 0 40%;
    }
    100% {
        translate: 0 59.1%;
    }
}
@keyframes dot-reverse {
    0% {
        translate: 0 59.1%;
    }
    100% {
        translate: 0 0;
    }
}
.x-masthead .x-bar .logo {
	flex: 0 1 200px;
}
.x-masthead svg {
	width: 100%;
	height: auto;
}
@media (prefers-reduced-motion: no-preference) {
	.x-masthead svg {
		transition: 0.5s all cubic-bezier(0.897, 0.125, 0.241, 0.925);
	}
	.x-masthead svg.short {
		filter: grayscale(100%) contrast(500%);
	}
	.x-masthead svg path {
		transition: 0.5s translate cubic-bezier(0.897, 0.125, 0.241, 0.925) 0.4s, 0.4s scale ease-out 0.6s, 0.4s opacity linear 0.6s;
	}
	.x-masthead svg.short path {
		transition: 0.5s translate cubic-bezier(0.897, 0.125, 0.241, 0.925) 0.4s, 0.4s scale ease-in 0.6s, 0.4s opacity linear 0.3s;
	}
	.x-masthead svg .dot-i {
		animation: 0.5s dot-reverse 0s cubic-bezier(0.897, 0.125, 0.241, 0.925) forwards;
	}
	.x-masthead svg:not(.short, .long) .dot-i {
		animation-duration: 0s;
	}
	.x-masthead svg.short .dot-i {
		animation: 0.8s dot 0.25s cubic-bezier(0.897, 0.125, 0.241, 0.925) forwards;
	}
	.x-masthead svg.short .letter-d {
		translate: 9.9% 0;
		transition-delay: 0.45s;
	}
	.x-masthead svg.short .letter-h {
		translate: -32% 0;
		transition-delay: 0.45s;
	}
	.x-masthead svg.short .first {
		translate: -48% 0;
		scale: 0.6 1;
		opacity: 0.4;
		transition-delay: 0s;
	}
	.x-masthead svg.short .last {
		translate: -42% 0;
		scale: 0.6 1;
		opacity: 0.4;
		transition-delay: 0.2s;
	}
}

/* FOOTER */

body > div > .grecaptcha-badge {
	filter: opacity(0%);
	pointer-events: none;
}
footer.x-colophon {
	--foreground: var(--dark-foreground);
	--background: var(--dark-background);
	--link: var(--dark-foreground);
	color: var(--foreground);
	background-color: var(--background);
}

/* FORMS */

/* BUTTONS */

.button,
.x-btn,
button[type="submit"],
input[type="submit"] {
	font-weight: 600;
}
.cta .icon.end.arrow svg {
	width: 0.8em;
	display: inline-block;
	height: 0.8em;
	margin-inline-start: 0.5ch;
}

/* ARROW */

a .svg-arrow {
	--transition-duration: 0.4s;
	width: 1.1em;
	height: auto;
	stroke-width: 7;
}
a .svg-arrow line {
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	transition: var(--transition-duration) stroke-dashoffset ease-in-out calc(var(--transition-duration) * 0.5), var(--transition-duration) translate ease-in-out calc(var(--transition-duration) * 0.5);
}
a .svg-arrow .plus-center {
	stroke-dasharray: 200;
	stroke-dashoffset: -50;
	transition-delay: 0s;
}
a .svg-arrow .arrow-head-top,
a .svg-arrow .arrow-head-bottom {
	stroke-dashoffset: 100;
	translate: -53px 0;
	transition-delay: 0s;
}
a:hover .svg-arrow line {
	stroke-dashoffset: 100;
}
a:hover .svg-arrow .plus-center {
	stroke-dashoffset: 0;
	transition-delay: calc(var(--transition-duration) * 1.5);
}
a:hover .svg-arrow .arrow-head-top,
a:hover .svg-arrow .arrow-head-bottom {
	stroke-dashoffset: 0;
	translate: 0 0;
	transition-delay: calc(var(--transition-duration) * 1.5);
}

/* HOME */

.home #news .x-text p {
	color: var(--news);
}
.home sr7-slide,
.home sr7-slide h1,
.home sr7-slide h2,
.home sr7-slide h3,
.home sr7-slide p,
.home sr7-slide span,
.home sr7-slide a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.home sr7-slide h2,
.home sr7-slide p,
.home sr7-slide a {
	color: var(--foreground);
}
.home sr7-slide.dark h2,
.home sr7-slide.dark p,
.home sr7-slide.dark a {
	color: var(--dark-foreground);
}

/* NEWS */

.content.news:not(:has(.cs-content)) .entry-content {
	width: min(92%, 1400px);
	margin-inline: auto;
	padding-block: 3rem;
}
#title .banner .x-image,
#title .banner img {
	width: 100%;
	height: auto;
}
.post-banner #title .banner {
	flex: 1 0 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.post-banner #title .x-row-inner {
	margin-inline: 0;
}
.post-banner #title .meta {
	flex: 0 1 min(92%, 1400px);
	width: auto;
	margin-inline: auto;
	margin-block: 0 clamp(2rem, 2vw , 5rem);
	padding-block: 0;
}
.related .recent-posts {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin-block: 0 1.6rem;
	margin-inline: 0;
	padding: 0;
	gap: 2rem;
}
.related .recent-posts li {
	--background: #FFF;
	--padding-inline: 1.7rem;
	background-color: var(--background);
	box-shadow: 0 2.4rem 1.6rem -1.4rem #00000020;
	transition: 0.6s translate ease-in-out 0.1s, 0.6s box-shadow ease-in-out 0.1s;
}
.recent-posts li:has(a):hover {
	translate: 0 -0.25rem;
	box-shadow: 0 2.8rem 1.7rem -1.45rem #00000018;
}
.recent-posts li a {
	gap: 1.2rem;
	align-content: start;
	justify-content: center;
	display: grid;
	padding-block-end: calc(var(--padding-inline) * 1.5);
}
.related .recent-posts .image {
	order: 1;
}
.related .recent-posts .title {
	order: 2;
	margin-block: 0;
	margin-inline: var(--padding-inline);
	font-size: var(--fs-1);
	font-weight: 600;
	min-height: 2.6lh;
}
.related .recent-posts .date {
	order: 3;
	margin-block: 0;
	margin-inline: var(--padding-inline);
}
.related .recent-posts .excerpt {
	order: 4;
	color: var(--foreground);
	margin-block: 0;
	margin-inline: var(--padding-inline);
	font-size: var(--fs--1);
}
.related .recent-posts .cta {
	order: 5;
	color: var(--foreground);
	margin-block: 0;
	margin-inline: var(--padding-inline);
}
.recent-posts .image img {
	transition: 0.6s scale ease-in-out 0.1s, 0.6s filter linear 0.1s;
}
.recent-posts li:hover .image img {
	filter: brightness(103%);
	scale: 1.013;
}
@media (width>=600px) {
    .shift-end article.post {
        position: relative;
    }
    .shift-end #content {
        position: absolute;
        inset: 13rem 0 auto calc(50% + 0.1rem);
    }
    .related .recent-posts {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }
}
@media (width >= 1200px) {
	.post-banner #title .banner img {
		aspect-ratio: 2.4;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/* SHOWROOM */

.showroom .x-section > .x-row.image > .x-row-inner,
.showroom .x-section > .x-row.image > .x-row-inner .x-col {
	flex: 1 0 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.showroom #title .x-text {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	line-height: 100%;
	gap: 1.5rem;
}
.showroom #title h1,
.showroom #title h2,
.showroom #title p {
	flex: 1 0 100%;
}
.showroom #title .showroom {
	order: 1;
	font-size: var(--fs-5);
	font-weight: 300;
	margin-block: 0;
}
.showroom #title .title {
	order: 2;
	text-transform: uppercase;
	font-weight: 300;
	margin-block: 0.3rem;
}
.showroom #title .date {
	order: 3;
	margin-block: 0.6rem;
	text-transform: uppercase;
}
.showroom #title .showroom .logo {
	width: min(100%, 10.2ch);
	height: auto;
	vertical-align: text-bottom;
}
.showroom #title .title .first {
	font-weight: 500;
	color: var(--primary);
}
.showroom #title .title .separator {
	visibility: hidden;
}
.showroom h2 {
	text-transform: uppercase;
}
.showroom .image .x-text,
.showroom .image .x-text p {
	font-size: var(--fs--1);
	font-weight: 500;
}
.showroom .image .x-text {
	width: min(92%, 1400px);
	margin-block: 0.5rem 0;
	margin-inline: auto;
}
#bookmarks ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
	gap: 1rem;
	justify-content: center;
}
#bookmarks li {
	text-align: center;
	flex: auto;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
	display: flex;
	justify-content: center;
	font-size: var(--fs-0);
	text-transform: uppercase;
}
#bookmarks a {
	display: flex;
}
@media (height >= 900px) {
	body.showroom {
		overflow-y: auto;
		scroll-margin-block-start: 12rem;
	}
	#bookmarks {
		position: sticky;
		inset-block-start: 4.5rem;
		z-index: 20;
		box-shadow: 0 -2px 0 var(--dark-background), 0 2px 0 var(--dark-background) inset;
	}
	.admin-bar #bookmarks {
		inset-block-start: 6.2rem;
	}
}


/* WEB PROJECT GUIDE */

html:has(> .web-process),
.web-process {
	scroll-behavior: smooth;
	scroll-margin-block-start: 10rem;
}
.web-process #title {
	text-align: center;
}
.web-process #title h1,
.web-process #title p {
	text-wrap: balance;
}
.web-process #title h1 {
	font-size: var(--fs-3);
}
.web-process #title p {
	font-size: var(--fs-1);
}
.web-process #bookmarks {
	background-color: var(--background);
	box-shadow: 0 3px 0 var(--dark-background), 0 -3px 0 var(--dark-background);
}
.web-process #bookmarks a {
	filter: opacity(0%);
	transition: 0.3s filter linear 0.2s;
}
.web-process:has(.x-masthead .logo .short) #bookmarks a {
	filter: none;
}
.web-process #overview .x-col {
	margin-inline: 0;
	flex-basis: 100%;
}
.web-process #overview ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
	box-shadow: 0 0 0 1px #460000, 0 0 0 1px #460000 inset;
	clip-path: ellipse(80% 146% at 50% -50px);
}
.web-process #overview li,
.web-process #overview li :is(h3, p),
.web-process #overview li a {
	color: var(--dark-foreground);
}
.web-process #overview li {
	display: flex;
	flex-wrap: wrap;
	flex: 1 0 8rem;
	align-content: start;
	background-image: linear-gradient(44deg, #00000055, #FFF4);
	margin-block: 0;
	margin-inline: 0;
	padding-block: 1lh;
	padding-inline: 1.3em;
	gap: 0.9lh;
}
.web-process #overview li :is(h3, p) {
	flex: 1 0 100%;
	margin-block: 0;
}
.web-process #overview li > h3 {
	text-transform: uppercase;
	font-size: var(--fs-0);
	margin-block-end: 0.9lh;
	box-shadow: 0 0 0 2em #0005 inset, 0 0 0 1.3em #0005;
}
.web-process #overview li > p {
	font-size: var(--fs--2);
}
.web-process #overview .plan {
	flex-grow: 2.7;
	background-color: #A41414;
}
.web-process #overview .scope {
	flex-grow: 3;
	background-color: #D36300;
}
.web-process #overview .build {
	flex-grow: 18;
	background-color: #D57800;
}
.web-process #overview .migrate {
	flex-grow: 2.9;
	background-color: #9C990B;
}
.web-process #overview .launch {
	background-color: #4C7A15;
}
.web-process #overview .x-icon {
	margin-inline-end: 1ex;
}
.web-process h2:first-child {
	margin-block-start: 0;
}
.web-process p {
	line-height: 150%;
	margin-block: 1lh;
}
.web-process .x-section:not(#overview) h2 ~ ul {
	padding-inline-start: 1em;
}
.web-process .x-section:not(#overview) h2 ~ ul li {
	padding-inline: 1ex;
	margin-block: 0.3lh;
}
.web-process .x-section:not(#overview) h2 ~ ul li::marker {
	content: '✓';
	color: var(--link);
}
.web-process .x-col:first-child .x-image:nth-child(2) {
	inline-size: 100%;
	overflow: hidden;
	margin-block: 3rem 0;
	aspect-ratio: 1.7;
	outline: 3px solid color-mix(in lab, var(--foreground), var(--background));
	border-radius: 2px;
}
.web-process .x-col:first-child .x-image:nth-child(2) a {
	display: block;
	overflow: hidden;
	inline-size: 100%;
	block-size: 100%;
}
.web-process .x-col:first-child .x-image:nth-child(2) img {
	block-size: auto;
	inline-size: min(101vw, 103.3rem);
	max-inline-size: none;
	margin-block: 1% 0;
	margin-inline: 1% 0;
	transform-origin: 16% 21%;
	transition: 0.4s scale ease-in-out, 0.4s filter linear;
}
.web-process .x-col:first-child .x-image:nth-child(2) a:hover img {
	scale: 1.05;
	filter: brightness(110%);
}
.web-process .x-col:first-child .x-image:first-child img {
	aspect-ratio: 1.1;
	object-fit: cover;
}
.web-process #scope .x-col:first-child .x-image:first-child img {
	aspect-ratio: 1.4;
	object-fit: cover;
}
.web-process #scope .x-col:first-child .x-image:first-child,
.web-process #scope .x-col:first-child .x-image:first-child img {
	inline-size: 100%;
}
.web-process #scope .x-col:first-child .x-image:nth-child(2) {
	aspect-ratio: 1;
}
.web-process #scope .x-col:first-child .x-image:nth-child(2) img {
	inline-size: min(102vw, 104.5rem);
	margin-block: -26.8% 0;
	margin-inline: -62% 0;
	transform-origin: 42% 31%;
}
.web-process #user-groups {
	background-color: var(--shaded-background);
}
.web-process #user-groups h3 {
	text-transform: uppercase;
	font-size: var(--fs-1);
	text-align: center;
	margin-block-end: 2.5rem;
}
.web-process #user-groups ol {
	display: flex;
	flex-wrap: wrap;
	padding-inline: 0;
	gap: 3rem;
	margin-inline: 3rem;
}
.web-process #user-groups li {
	flex: 1 0 13rem;
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	padding-inline: 0;
	gap: 1.2rem;
}
.web-process #user-groups li :is(h4, p) {
	flex: 1 0 100%;
	margin-block: 0;
}
.web-process #user-groups h4 {
	font-size: var(--fs-0);
}
.web-process #user-groups p {
	font-size: var(--fs--1);
}
.web-process #build .x-col:first-child .x-image:first-child img {
	aspect-ratio: 1.6;
}
.web-process #build .x-col:first-child .x-image:nth-child(2) {
	aspect-ratio: 0.8;
}
.web-process #build .x-col:first-child .x-image:nth-child(2) img {
	inline-size: min(108.2vw, 110.6rem);
	margin-block: -7.1% 0;
	margin-inline: -154.1% 0;
	transform-origin: 69% 50%;
}
.web-process #migrate .x-col:first-child .x-image:first-child img {
	aspect-ratio: 1.6;
}
.web-process #migrate .x-col:first-child .x-image:nth-child(2) {
	aspect-ratio: 1.2;
}
.web-process #migrate .x-col:first-child .x-image:nth-child(2) img {
	inline-size: min(108.2vw, 110.5rem);
	margin-block: -23.4% 0;
	margin-inline: -205.8% 0;
	transform-origin: 84% 36%;
}
.web-process #launch .x-col:first-child .x-image:nth-child(2) {
	aspect-ratio: 1.11;
}
.web-process #launch .x-col:first-child .x-image:first-child img {
	aspect-ratio: 1.5;
}
.web-process #launch .x-col:first-child .x-image:nth-child(2) img {
	inline-size: min(104.5vw, 106.5rem);
	margin-block: -37.7% 0;
	margin-inline: -220.1% 0;
	transform-origin: 98% 60%;
}
.web-process #flow-chart .x-image img {
	aspect-ratio: initial;
}