* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
}

.site-header {
  padding: 0 16px;
}

.nav-shell {
  isolation: isolate;
  position: relative;
  transition:
    max-width 360ms ease,
    padding 360ms ease,
    transform 360ms ease;
}

.nav-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  z-index: -1;
  width: 390px;
  transform: translateX(-50%);
  border: 1px solid rgba(23, 32, 51, 0.05);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.06);
  backdrop-filter: blur(18px);
  transition:
    left 420ms cubic-bezier(.2, .8, .2, 1),
    top 420ms cubic-bezier(.2, .8, .2, 1),
    bottom 420ms cubic-bezier(.2, .8, .2, 1),
    width 420ms cubic-bezier(.2, .8, .2, 1),
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    border-color 420ms ease,
    box-shadow 420ms ease,
    background 420ms ease;
}

.site-header.is-scrolled .nav-shell {
  max-width: 1180px;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: translateY(6px);
}

.site-header.is-scrolled .nav-shell::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: none;
  border-color: rgba(106, 174, 217, 0.2);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 22px 70px rgba(23, 32, 51, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.site-nav a,
.nav-logo {
  transition:
    color 220ms ease,
    transform 220ms ease;
}

.site-nav a:hover,
.nav-logo:hover {
  transform: translateY(-1px);
}

.page-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg-grid-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 54px 54px;
}

.phone-frame {
  border: 9px solid #172033;
  border-radius: 48px;
  background: #172033;
  box-shadow: 0 30px 90px rgba(23, 32, 51, 0.22);
}

.phone-screen {
  min-height: 650px;
  overflow: hidden;
  border-radius: 38px;
  background: #fff;
  position: relative;
}

.screenshot-screen {
  min-height: 0;
  background: #101522;
}

.app-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

.phone-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 3;
  width: 92px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #172033;
}

.phone-screen.screenshot-screen::before {
  display: none;
}

.ios-bar {
  height: 40px;
  background:
    radial-gradient(circle at calc(50% + 30px) 24px, #172033 0 5px, transparent 6px),
    linear-gradient(#fff, #fff);
}

.phone-left .phone-screen {
  min-height: 560px;
}

@media (max-width: 640px) {
  .site-header {
    padding: 0 10px;
  }

  .nav-shell::before {
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 218px;
    transform: none;
  }

  .site-header.is-scrolled .nav-shell {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .phone-frame {
    border-width: 7px;
    border-radius: 40px;
  }

  .phone-screen {
    min-height: 560px;
    border-radius: 32px;
  }
}