:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

.topbar {
  height: auto;
  min-height: 86px;
  padding-top: var(--safe-top);
  padding-left: max(22px, var(--safe-left));
  padding-right: max(22px, var(--safe-right));
}

.bottom-nav {
  bottom: max(16px, var(--safe-bottom));
}

@media (max-width: 700px) {
  .topbar {
    min-height: 74px;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }

  .legal-footer {
    padding-bottom: calc(112px + var(--safe-bottom));
  }
}