.site-legal {
  margin-top: auto;
  padding: 16px 20px 20px;
  text-align: center;
  color: #9a9386;
  font-size: 12px;
  line-height: 1.55;
  font-family: Inter, system-ui, sans-serif;
  border-top: 1px solid rgba(232, 184, 74, 0.16);
}

.site-legal p {
  margin: 0;
}

.site-legal a {
  color: #e8b84a;
  text-decoration: none;
}

.site-legal a:hover {
  text-decoration: underline;
}

#loginPage > .site-legal {
  grid-column: 1 / -1;
  align-self: end;
  background: #08090b;
}

body:has(> .site-legal) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:has(> .site-legal) > .login-page,
body:has(> .site-legal) > .maintenance-container {
  flex: 1;
  min-height: 0;
}

#mainApp .site-legal {
  margin: 28px 0 0;
}

:root[data-theme="light"] .site-legal {
  color: #6b5e4c;
  border-top-color: rgba(140, 110, 50, 0.16);
}

:root[data-theme="light"] .site-legal a {
  color: #8a6508;
}

:root[data-theme="light"] #loginPage > .site-legal {
  background: #f6efe3;
}

#landingScreen,
#adminScreen,
#joinScreen {
  position: relative;
  padding-bottom: 72px;
}

#landingScreen .site-legal,
#adminScreen .site-legal,
#joinScreen .site-legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(8, 9, 11, 0.92);
}

#callScreen .site-legal {
  padding: 4px 12px 8px;
}

#callScreen .site-legal p {
  display: inline;
}

#callScreen .site-legal p + p::before {
  content: " · ";
}

.site-legal--bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tab-h, 64px) + var(--safe-b, env(safe-area-inset-bottom, 0px)));
  z-index: 28;
  padding: 4px 10px;
  background: rgba(16, 18, 21, 0.94);
}

.site-legal--bar p {
  display: inline;
}

.site-legal--bar p + p::before {
  content: " · ";
}