/* Silhette legal pages: privacy.html, terms.html, support.html. Same look as the app's /legal pages. No JavaScript. */

html { background: #000; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #E8EAED;
  font-family: "Google Sans", "Google Sans Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(138, 180, 248, 0.35); color: #fff; }

.sl-wrap { box-sizing: content-box; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.sl-top { border-bottom: 1px solid #202124; }
.sl-top .sl-wrap { display: flex; align-items: center; height: 60px; }
.sl-main { flex: 1 0 auto; padding: 40px 0 72px; }

h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: 48px 0 12px; font-size: 21px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; scroll-margin-top: 24px; }
h3 { margin: 28px 0 8px; font-size: 17px; line-height: 1.45; font-weight: 600; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 24px; }
ul { list-style: disc; }
ol { list-style: decimal; }
li { margin: 0 0 8px; padding-left: 4px; }
li::marker { color: #9AA0A6; }
strong { font-weight: 600; color: #fff; }

a { color: #8AB4F8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid #8AB4F8; outline-offset: 3px; border-radius: 4px; }

.sl-mark { color: #E8EAED; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.sl-updated { margin: 0 0 32px; color: #9AA0A6; font-size: 15px; }
.sl-muted { color: #9AA0A6; }
.sl-box { margin: 0 0 8px; padding: 20px 22px 4px; border: 1px solid #3C4043; border-radius: 16px; background: #0E0F10; }
.sl-box h2 { margin-top: 0; font-size: 17px; }
.sl-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 0 16px; padding: 0 22px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; text-decoration: none; }
.sl-pill:hover { background: #E8EAED; }
.sl-pill:focus-visible { outline-color: #fff; }

.sl-foot { border-top: 1px solid #202124; color: #9AA0A6; font-size: 14px; line-height: 1.6; }
.sl-foot .sl-wrap { padding-top: 24px; padding-bottom: 40px; }
.sl-foot nav { margin: 0 0 6px; }
.sl-foot nav a { display: inline-block; padding: 6px 0; }
.sl-sep { margin: 0 10px; color: #5F6368; }
.sl-foot p { margin: 0; }

@media (min-width: 640px) {
  body { font-size: 17px; }
  .sl-wrap { padding-left: 32px; padding-right: 32px; }
  .sl-main { padding-top: 56px; }
  h1 { font-size: 40px; }
}
