: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 */