.fui-type-html p + p {
  margin-block-start: 1.6rem;
}

.fui-alert {
  --fui-alert-font-size: 1.6rem;
  --fui-alert-padding: 2rem;
}
.fui-alert p {
  line-height: 1.2;
}

.fui-form-container {
  container-type: inline-size;
}

@container ( width < 500px) {
  .fui-page-row[data-fui-field-count="2"] {
    flex-direction: column;
  }
}

.fui-form-container {
  --fui-label-font-size:1.6rem;
  --fui-input-font-size:1.6rem;
  --fui-check-font-size:1.4rem;
  --fui-check-label-line-height: 1.2;
  --fui-label-color: #666666;
  --fui-check-label-width: 1.8rem;
  --fui-check-label-height: 1.8rem;
  --fui-check-label-padding-left: 3rem;
}
.fui-form-container .fui-input-container {
  --fui-input-border-radius: calc(var(--border-radius) / 2);
}

main > .fui-i {
  max-width: 650px;
  --fui-field-gutter: var(--gutter0);
  --fui-row-gutter: var(--gutter1);
}

.js-has-pseudo [csstools-has-2u-33-36-31-1m-2w-2p-37-14-1q-w-2x-32-34-39-38-2j-38-3d-34-2t-1p-2w-2x-2s-2s-2t-32-2l-15-1m-32-33-38-14-1m-2w-2p-37-14-1q-w-1m-32-33-38-14-2x-32-34-39-38-2j-38-3d-34-2t-1p-2w-2x-2s-2s-2t-32-2l-15-15-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) {
  display: none;
}

form:has(> input[type=hidden]):not(:has(> :not(input[type=hidden]))) {
  display: none;
}

:root {
  scroll-behavior: smooth;
}

.js-has-pseudo [csstools-has-1m-2w-2p-37-14-1m-38-2p-36-2v-2t-38-15] {
  scroll-padding-block-start: calc(var(--navigation-bar-height, 0px) + var(--gutter2));
}

:has(:target) {
  scroll-padding-block-start: calc(var(--navigation-bar-height, 0px) + var(--gutter2));
}

body#app header {
  text-align: center;
}
body#app main {
  overflow-x: clip;
}
body#app .app {
  isolation: isolate;
  padding-block: 0;
  display: grid;
  gap: var(--gutter2);
  grid-template-columns: 1fr minmax(400px, 1fr);
  width: min(1080px, 100%);
  align-self: center;
  overflow-y: clip;
  overflow-x: visible;
}
body#app .app + .app {
  direction: rtl;
}
body#app .app + .app > * {
  direction: ltr;
}
body#app .app .app-store-buttons {
  font-size: 1.3rem;
  margin-top: var(--gutter1);
  place-items: flex-start;
  place-content: flex-start;
  flex-wrap: nowrap;
}
body#app .app .app-store-buttons .button {
  flex: initial;
}
body#app .app .rich-text {
  align-self: center;
}
body#app .app picture.image.reveal {
  height: 100%;
  width: 100%;
  min-height: 500px;
  display: flex;
  overflow: visible;
  width: min(400px, 100% - var(--gutter2));
  justify-self: end;
}
body#app .app picture.image.reveal::before {
  content: "";
  width: 220%;
  height: 180%;
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  z-index: -1;
  left: -60%;
  top: 10%;
  border-radius: 100%;
  background: linear-gradient(#F7F7F7, transparent 40%, transparent);
}
body#app .app picture.image.reveal img {
  justify-self: flex-end;
  -o-object-position: 0% 0%;
     object-position: 0% 0%;
  translate: 0 90%;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body#app .app picture.image.reveal img {
      animation: reveal var(--reveal-ease, linear) var(--reveal-direction, both);
      animation-timeline: var(--reveal-timeline, view(block));
      animation-range: var(--reveal-range, contain 90% exit 80%);
    }
  }
}
@supports (animation-timeline: scroll()) {
  @keyframes reveal {
    0% {
      translate: 0 0%;
    }
    100% {
      translate: 0 100%;
    }
  }
}
body#app .app picture.image.reveal::after {
  content: "";
  height: 15px;
  width: 140%;
  position: absolute;
  bottom: 0;
  left: -20%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
  display: block;
  -webkit-mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
@media (max-width: 960px) {
  body#app .app {
    display: flex;
    flex-direction: column;
  }
  body#app .app .rich-text {
    width: min(500px, 100%);
  }
  body#app .app picture.image.reveal {
    height: 400px;
    margin-top: var(--spacer0);
    align-self: center;
  }
}
@media (max-width: 480px) {
  body#app .app .app-store-buttons {
    margin-top: var(--spacer0);
  }
  body#app .app .app-store-buttons .button {
    font-size: 0.8em;
  }
}
body#app .usp {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--spacer0);
  width: min(1080px, 100%);
  align-self: center;
}
body#app .usp .rich-text {
  text-align: center;
  width: min(660px, 100%);
}
body#app .usp picture.image img {
  position: relative;
}
@media (max-width: 960px) {
  body#app .usp .rich-text {
    text-align: left;
  }
}
body#app screenshot-gallery {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: var(--gutter1);
  width: 100%;
}
body#app screenshot-gallery picture.image {
  max-width: 200px;
}
@media (max-width: 660px) {
  body#app screenshot-gallery {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}

.app-store-buttons {
  display: flex;
  gap: var(--gutter1);
  place-content: center;
  place-items: center;
  flex-wrap: wrap;
}
.app-store-buttons > div {
  margin-top: 0;
}
.app-store-buttons .button {
  border-radius: 1ch;
  border: 2px solid #dddddd;
  padding-block: 0.8em;
  padding-inline: 1.6em;
  gap: 1.4em;
  flex: 1 1 0;
  margin-top: 0;
  max-width: 300px;
  align-items: center;
}
.app-store-buttons .button svg {
  order: -1;
  width: 2.2em;
  height: 2.2em;
}
.app-store-buttons .button div {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  font-size: 1.4em;
}
.app-store-buttons .button div span {
  font-size: 0.6em;
  margin-block-end: -0.4em;
}
.app-store-buttons .button.apple:hover, .app-store-buttons .button.apple:focus-within {
  --icon-fill: #333333;
}
.app-store-buttons .button.google svg {
  filter: drop-shadow(5px 5px 15px rgba(255, 255, 255, 0));
  transition: all var(--transition);
}
.app-store-buttons .button.google:hover svg, .app-store-buttons .button.google:focus-within svg {
  filter: drop-shadow(5px 5px 15px white);
}
.app-store-buttons + #trusted-by {
  padding-top: 0;
}
#symbols .apple-icon path {
  transition: fill var(--transition);
}

@media (max-width: 480px) {
  .app-store-buttons#base-app-store-buttons > div {
    padding-inline: var(--gutter1);
    width: 100%;
  }
  .app-store-buttons#base-app-store-buttons > div .button {
    width: 100%;
    max-width: 100%;
  }
}
/*# sourceMappingURL=../sourcemaps/pages/app.css.map */