/* Icons by Lucide: https://lucide.dev */
/* Background patterns by Toptal: https://www.toptal.com/designers/subtlepatterns */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
/* Prevent content jump on dialog and sidebar opening */
@media(hover: hover) {
  body.modal--open,
  body.offside-js--is-open {
    overflow-y: hidden;
    padding-right: 8px;
    touch-action: none;
  }
  body.modal--open dialog {
    left: calc(50% - 4px);
  }
  body.modal--open .cta,
  body.offside-js--is-open .cta  {
    padding-right: 8px;
  }
  body.modal--open .header,
  body.offside-js--is-open .header {
    padding-right: 8px;
  }
}
@media (hover: none) {
  body.modal--open,
  body.offside-js--is-open {
    overflow-y: hidden;
  }
}
body {
	--color: var(--main);
}
.title {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  margin-bottom: 16px;
}

@media(max-width: 1000px) {
  h1 {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
  }
}

.container {
  max-width: 960px;
  padding: 0 10px;
  margin: auto;
  width: 100%;
}
.btn {
  display: block;
  width: fit-content;
}
.btn__inner {
  width: fit-content;
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: calc(14 / 16 * 1rem);
  line-height: 20px;
  padding: 8px 14px;
  color: var(--main);
  background-color: var(--main-bg);
  border: 2px solid var(--main-bg);
  border-radius: 8px;
  transition: transform 250ms;
  font-weight: 600;
  min-height: 44px;
}
@media(hover: hover) {
  .btn:hover .btn__inner {
    transform: translateY(-4px);
    transition: transform 125ms;
  }
}
.btn--white .btn__inner {
  color: var(--slate-600);
  background-color: #fff;
  border-color: #fff;
  font-weight: 600;
}
.btn--white .btn__inner svg {
  color: var(--slate-600);
}
.btn--subtle .btn__inner {
  color: var(--slate-700);
  background: var(--gradient-subtle);
  border: none;
}
.btn__inner svg {
  flex-shrink: 0;
}
.btn_arrow {
  display: block;
  width: fit-content;
}
.btn_arrow__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 10px;
  margin: -10px;
  transition: 250ms;
}
.btn_arrow span {
  font-size: calc(14 / 16 * 1rem);
  line-height: 20px;
  color: var(--slate-700);
  font-weight: 600;
}
@media(hover: hover) {
  .btn_arrow:hover .btn_arrow__inner {
    transform: translateX(4px);
    transition: 125ms;
  }
}
.content a {
  text-decoration: underline;
  color: currentColor;
}
.badge {
  color: var(--slate-600);
  font-weight: 600;
  background-color: var(--slate-100);
  border-radius: 6px;
  padding: 1px 8px;
  width: fit-content;
}
span.emblem {
  display: block;
  width: fit-content;
  background-color: #fff;
  font-size: calc(12 / 16 * 1rem);
  line-height: 16px;
  font-weight: 600;
  color: var(--slate-700);
  padding: 4px 9px;
  border-radius: 60px;
}
.page404 {
  margin-top: 60px;
}
.page404 > div {
  padding: 60px;
  border-radius: 6px;
  box-shadow: var(--box-shadow-warm);
  background: var(--gradient-subtle);
}
.page404 a {
  margin-top: 16px;
}
.iframe {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  box-shadow: var(--box-shadow-next);
  border: none;
  overflow: visible;
  max-width: min(calc(100% - 20px), 960px);
  width: 100%;
  padding: 0;
}
dialog::backdrop {
  background-color: var(--slate-700);
  opacity: .8;
}
.modal__container {
  max-height: 700px;
  padding: 20px;
  padding-bottom: 28px;
  overflow-y: auto;
}
.modal__container:has(> .modal__content:only-child > p:only-child > iframe:only-child) {
  padding: 0;
}
.modal__container--overflow {
  border-radius: 24px 1px 1px 24px;
}
.modal__content iframe {
  border-radius: 12px;
}
.close-modal {
  position: absolute;
  top: -26px;
  right: 16px;
}
.close-modal__inner {
  color: #fff;
  font-size: calc(14 / 16 * 1rem);
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px;
  margin: -10px;
  transition: 250ms;
}
@media(hover: hover) {
  .close-modal:hover .close-modal__inner {
    transform: translateX(4px);
    transition: 125ms;
  }
}
@media(max-width: 1000px) {
  dialog {
    margin-left: unset;
  }
}
@media(max-width: 500px) {
  .modal__container {
    max-height: 600px;
  }
  .modal__container--overflow {
    border-radius: 24px;
  }
}

/* WebKit Browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
summary::-webkit-details-marker {
	display: none;
}

@media(max-width: 1000px) {
  .btn--white .btn__inner {
    box-shadow: var(--box-shadow-warm);
  }
  .page404 > div {
    border-radius: 0;
  }
}

/* Blocks */
.blocks > section {
  overflow-x: clip;
  scroll-margin-top: 80px;
}
.single .blocks {
  margin-top: 60px;
}
.content__container {
  padding-top: 60px;
  padding-bottom: 70px;
}
[data-type='dark'] .content__container .prose {
  color: #fff;
}

/* Header */
.header {
  height: 80px;
  display: flex;
  flex-shrink: 0;
  box-shadow: var(--box-shadow-warm);
  position: fixed;
  width: 100%;
  z-index: 3;
  background-color: #fff;
}
.header__container {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}
.header__logo_placeholder {
  margin-right: auto;
}
.header__logo {
  margin-right: auto;
}
.header__logo img {
  object-fit: contain;
}
.header__logo_placeholder {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  color: var(--slate-700);
}
.header__menu {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-right: 8px;
}
.header__menu li {
  position: relative;
}
.header__menu li a {
  display: inline-block;
  font-size: calc(14 / 16 * 1rem);
  line-height: 20px;
  color: var(--slate-700);
  padding: 11px 12px 12px;
  border-radius: 6px;
}
.header__menu li a:has(~ .sub-menu) {
  padding-right: 20px;
}
.header__menu li a:has(~ .sub-menu):after {
  content: '';
  border-style: solid;
  border-color: var(--slate-600);
	border-width: 1px 1px 0 0;
	content: '';
	display: inline-block;
	height: 6px;
	left: 8px;
	position: relative;
	top: 6px;
	transform: rotate(135deg);
	vertical-align: top;
	width: 6px;
}
.header__menu li a:hover {
  color: var(--slate-900);
  background-color: var(--slate-100);
}
.header__menu li .sub-menu {
  background-color: #fff;
  padding: 4px;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 6px;
  box-shadow: var(--box-shadow-next);
  opacity: 0;
  transform: translateY(4px);
  transition: 125ms;
}
.header__menu li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: 125ms;
}
.header__menu .sub-menu a {
  width: 100%;
  white-space: nowrap;
}
.header__buttons {
  display: flex;
  gap: 8px;
  margin-right: 8px;
}
.header__search {
  padding: 8px;
  border-radius: 8px;
}
@media(hover: hover) {
  .header__search:hover {
    background-color: var(--slate-100);
  }
}

@media(max-width: 1000px) {
  .header__container {
    gap: unset;
  }
  .header__logo img {
    max-width: 160px;
  }
  .header__menu {
    display: none;
  }
  .header__buttons {
    display: none;
  }
}

/* Menu */
.sidebar {
  background-color: #fff;
  display: none;
}
.sidebar.is-open {
  display: initial;
  z-index: 99999;
}
.sidebar__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
}
.sidebar__button:hover {
  background-color: var(--slate-100);
}
.sidebar__button:focus {
  background: transparent;
}
.sidebar__button svg {
  flex-shrink: 0;
}
.sidebar__menu {
  margin-top: 50px;
}
.sidebar__menu_close {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 10px;
  background: transparent;
  border-radius: 50%;
}
.sidebar__menu_close:hover {
  background: var(--slate-100);
}
.sidebar__link {
  display: flex;
  align-items: center;
  color: var(--slate-500);
  padding: 7px 24px 8px;
  border-bottom: 1px solid var(--slate-100);
  position: relative;
}
.sub-menu .sidebar__link {
  font-size: calc(14 / 16 * 1rem);
  line-height: 20px;
  padding: 7px 40px 8px;
}
.sidebar__link:hover {
  background-color: var(--slate-100);
  color: var(--slate-600);
}
.color .sidebar__link {
  background-color: var(--color);
  color: #fff;
}
.current-menu-item>.sidebar__link::before {
  content: '';
  display: block;
  height: 100%;
  width: 4px;
  background: var(--main);
  position: absolute;
  left: 0;
}
.overlay {
  background-color: transparent;
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: 250ms;
}
.offside-js--is-open .overlay {
  background-color: var(--slate-700);
  opacity: .8;
  visibility: visible;
  transition: 125ms;
}

/* Footer */
.footer {
  margin-top: 60px;
  padding-top: 32px;
  padding-bottom: 70px;
}
.footer__social_container {
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: 24px;
  display: flex;
  gap: 16px;
}
.footer__social_title {
  display: block;
  font-size: calc(18 / 16 * 1rem);
}
.footer__social {
  display: flex;
  gap: 16px;
}
.footer__social svg {
  color: var(--slate-700);
}
.footer__cards {
  margin: 40px 0;
}
.footer .cards_1__item {
	flex-basis: 450px;
}
.footer__cards li {
  width: fit-content;
}
.footer__cards .cards_1__item a {
  text-decoration: unset;
}
.footer__cards .cards_1__content {
  margin-top: 16px;
}
.footer__credits {
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 40px;
}
.footer__credits > span {
  color: var(--slate-600);
  font-size: calc(14 / 16 * 1rem);
}
.footer .developer {
  margin-left: auto;
}
.footer .developer a {
  color: var(--slate-600);
}
.footer .developer a:hover {
  text-decoration: underline;
}

@media(min-width: 1001px) {
  .footer__social a>svg {
    transition: transform 250ms;
  }

  @media(hover: hover) {
    .footer__social a:hover>svg {
      transform: translateY(-4px);
      transition: transform 125ms;
    }
  }
}
@media(max-width: 1000px) {
  .footer__social_container {
    flex-direction: column;
    align-items: center;
  }
  .footer .cards_1__item {
    flex-basis: unset;
    justify-items: center;
  }
  .footer__credits {
    flex-direction: column;
    align-items: center;
  }
  .footer .developer {
    margin-left: unset;
  }
}

/* Animations */
.animate {
  position: relative;
}
.animate::before {
  content: '';
  background-color: var(--slate-50);
  position: absolute;
  inset: 0;
}
.viewport .animate::before {
  animation: hide forwards;
  animation-delay: 1100ms;
  /* value is equal the delay + half the animation duration */
  pointer-events: none;
}
.animate::after {
  content: '';
  inset: 0;
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: var(--slate-300);
}
.viewport .animate::after {
  animation: reveal 1000ms forwards;
  animation-delay: 600ms;
}
@keyframes reveal {
  0% {
    left: 0;
    width: 0%;
  }
  50% {
    left: 0;
    width: calc(100% + 1px);
  }
  100% {
    left: calc(100% + 1px);
    width: 0;
  }
}
@media(max-width: 1000px) {
  @keyframes reveal {
    0% {
      left: 0;
      width: 0%;
    }
    50% {
      left: 0;
      width: 100%;
    }
    100% {
      left: 100%;
      width: 0;
    }
  }
}

@keyframes hide {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes shimmer {
  100% {
    transform: translate(100%);
  }
}

.show > * {
  opacity: 0;
}
.viewport .show > * {
  animation: show 300ms forwards;
  --base-delay: 300ms;
}
.viewport .show > *:first-child {
  animation-delay: var(--base-delay);
}
.viewport .show > *:nth-child(2) {
  animation-delay: calc(var(--base-delay) + 300ms * 1);
}
.viewport .show > *:nth-child(3) {
  animation-delay: calc(var(--base-delay) + 300ms * 2);
}
.viewport .show > *:nth-child(4) {
  animation-delay: calc(var(--base-delay) + 300ms * 3);
}
.viewport .show > *:nth-child(5) {
  animation-delay: calc(var(--base-delay) + 300ms * 4);
}
.viewport .show > *:nth-child(6) {
  animation-delay: calc(var(--base-delay) + 300ms * 5);
}
.viewport .show > *:nth-child(7) {
  animation-delay: calc(var(--base-delay) + 300ms * 6);
}
.viewport .show > *:nth-child(8) {
  animation-delay: calc(var(--base-delay) + 300ms * 7);
}
.viewport .show > *:nth-child(9) {
  animation-delay: calc(var(--base-delay) + 300ms * 8);
}
.viewport .show > *:nth-child(10) {
  animation-delay: calc(var(--base-delay) + 300ms * 9);
}
.viewport .show > *:nth-child(11) {
  animation-delay: calc(var(--base-delay) + 300ms * 10);
}
.viewport .show > *:nth-child(12) {
  animation-delay: calc(var(--base-delay) + 300ms * 11);
}
.viewport .show > *:nth-child(13) {
  animation-delay: calc(var(--base-delay) + 300ms * 12);
}
.viewport .show > *:nth-child(14) {
  animation-delay: calc(var(--base-delay) + 300ms * 13);
}
.viewport .show > *:nth-child(15) {
  animation-delay: calc(var(--base-delay) + 300ms * 14);
}
.viewport .show > *:nth-child(16) {
  animation-delay: calc(var(--base-delay) + 300ms * 15);
}
.viewport .show > *:nth-child(17) {
  animation-delay: calc(var(--base-delay) + 300ms * 16);
}
.viewport .show > *:nth-child(18) {
  animation-delay: calc(var(--base-delay) + 300ms * 17);
}
.viewport .show > *:nth-child(19) {
  animation-delay: calc(var(--base-delay) + 300ms * 18);
}
.viewport .show > *:nth-child(20) {
  animation-delay: calc(var(--base-delay) + 300ms * 19);
}
.viewport .show > *:nth-child(21) {
  animation-delay: calc(var(--base-delay) + 300ms * 20);
}
.viewport .show > *:nth-child(22) {
  animation-delay: calc(var(--base-delay) + 300ms * 21);
}
.viewport .show > *:nth-child(23) {
  animation-delay: calc(var(--base-delay) + 300ms * 22);
}
.viewport .show > *:nth-child(24) {
  animation-delay: calc(var(--base-delay) + 300ms * 23);
}
.viewport .show > *:nth-child(25) {
  animation-delay: calc(var(--base-delay) + 300ms * 24);
}
.viewport .show > *:nth-child(26) {
  animation-delay: calc(var(--base-delay) + 300ms * 25);
}
.viewport .show > *:nth-child(27) {
  animation-delay: calc(var(--base-delay) + 300ms * 26);
}
.viewport .show > *:nth-child(28) {
  animation-delay: calc(var(--base-delay) + 300ms * 27);
}
.viewport .show > *:nth-child(29) {
  animation-delay: calc(var(--base-delay) + 300ms * 28);
}
.viewport .show > *:nth-child(30) {
  animation-delay: calc(var(--base-delay) + 300ms * 29);
}
.viewport .show > *:nth-child(31) {
  animation-delay: calc(var(--base-delay) + 300ms * 30);
}
.viewport .show > *:nth-child(32) {
  animation-delay: calc(var(--base-delay) + 300ms * 31);
}
.viewport .show > *:nth-child(33) {
  animation-delay: calc(var(--base-delay) + 300ms * 32);
}
.viewport .show > *:nth-child(34) {
  animation-delay: calc(var(--base-delay) + 300ms * 33);
}
.viewport .show > *:nth-child(35) {
  animation-delay: calc(var(--base-delay) + 300ms * 34);
}
.viewport .show > *:nth-child(36) {
  animation-delay: calc(var(--base-delay) + 300ms * 35);
}
.viewport .show > *:nth-child(37) {
  animation-delay: calc(var(--base-delay) + 300ms * 36);
}
.viewport .show > *:nth-child(38) {
  animation-delay: calc(var(--base-delay) + 300ms * 37);
}
.viewport .show > *:nth-child(39) {
  animation-delay: calc(var(--base-delay) + 300ms * 38);
}
.viewport .show > *:nth-child(40) {
  animation-delay: calc(var(--base-delay) + 300ms * 39);
}
.viewport .show > *:nth-child(41) {
  animation-delay: calc(var(--base-delay) + 300ms * 40);
}
.viewport .show > *:nth-child(42) {
  animation-delay: calc(var(--base-delay) + 300ms * 41);
}
.viewport .show > *:nth-child(43) {
  animation-delay: calc(var(--base-delay) + 300ms * 42);
}
.viewport .show > *:nth-child(44) {
  animation-delay: calc(var(--base-delay) + 300ms * 43);
}
.viewport .show > *:nth-child(45) {
  animation-delay: calc(var(--base-delay) + 300ms * 44);
}
.viewport .show > *:nth-child(46) {
  animation-delay: calc(var(--base-delay) + 300ms * 45);
}
.viewport .show > *:nth-child(47) {
  animation-delay: calc(var(--base-delay) + 300ms * 46);
}
.viewport .show > *:nth-child(48) {
  animation-delay: calc(var(--base-delay) + 300ms * 47);
}
.viewport .show > *:nth-child(49) {
  animation-delay: calc(var(--base-delay) + 300ms * 48);
}
.viewport .show > *:nth-child(50) {
  animation-delay: calc(var(--base-delay) + 300ms * 49);
}

@keyframes show {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes reveal_left {
  0% {
    opacity: 0;
    transform: translate(-8px);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    opacity: 1;
    transform: translate(0);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

/* underline animation */
.underline {
  background-image: linear-gradient(to right, rgba(255, 235, 59, 0.4) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: highlight 1000ms forwards;
  animation-delay: 500ms;
}
@keyframes highlight {
  to {
    background-position: 0 0;
  }
}

/* Only activate animation if the user has no preference for prefers-reduced-motion */
.no-animation *,
.no-animation *::before,
.no-animation *::after {
  transition: none !important;
  scale: none !important;
  animation: none !important;
  opacity: 1 !important;
}
.no-animation *::before {
  content: unset !important;
  animation: unset !important;
}
.no-animation *::after {
  animation: unset !important;
}
.no-animation .viewport .show > * {
  opacity: 1;
}
.no-animation .btn:hover .btn__inner {
  transform: none !important;
}