:root {
  --background: #f4f6fb;
  --foreground: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #f4f6fb;
  color: var(--foreground);
  font-family: Geist, "Segoe UI", sans-serif;
  overflow-x: clip;
}

.page-wrap {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
  .page-wrap {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

@media (min-width: 1280px) {
  .page-wrap {
    padding-left: max(2.5rem, env(safe-area-inset-left));
    padding-right: max(2.5rem, env(safe-area-inset-right));
  }
}

.hero-screen {
  min-height: calc(100svh - 7.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img, svg, video {
  max-width: 100%;
}

@media (max-width: 639px) {
  input, select, textarea {
    font-size: 16px;
  }
}

.site-bg {
  background-color: #f3f5fb;
  background-image:
    linear-gradient(180deg, rgba(238, 242, 255, 0.94), rgba(245, 243, 255, 0.9)),
    linear-gradient(rgba(36, 54, 199, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 54, 199, 0.055) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

::selection {
  background: #ddd6fe;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-track {
  animation: ticker 36s linear infinite;
}

.ticker-track.paused {
  animation-play-state: paused;
}

.section-anchor {
  scroll-margin-top: 7.5rem;
}