/* Privacy Policy and Terms of Service.

   A STANDALONE stylesheet: it deliberately does not load site/styles.css.
   That file pins html and body to height:100% with overflow:hidden, because
   the landing page is a strict one-screen layout - link it here and a document
   this long simply cannot be scrolled. These two pages are documents: they
   scroll, they are read top to bottom, and the only thing they borrow from the
   landing page is the palette and the two typefaces.

   One measure, one column, no cards and no rules between sections - the
   headings do that work. Body text is set at 17px/1.65 on a measure of ~68
   characters, which is the readable end of the Elements of Typographic Style
   range and the reason this page has no sidebar: nothing competes with the
   words. */

:root {
  --black: #000000;
  --ground: #07090A;
  --paper: #F4F7F6;
  --mute: #93A6A3;
  --teal: #5ED6D1;
  --hair: rgba(255, 255, 255, 0.10);
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body.legal-body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* A single faint teal wash at the top, the one piece of brand colour on the
   page, so the document opens on the same surface the landing page does. */
body.legal-body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 60vh;
  pointer-events: none;
  background: radial-gradient(90% 100% at 20% 0%, rgba(94, 214, 209, 0.10), rgba(94, 214, 209, 0) 70%);
}

.legal {
  position: relative;
  z-index: 1;
  /* 34rem ~ 68 characters at this size. */
  max-width: 34rem;
  margin: 0 auto;
  padding-block: clamp(28px, 6vh, 72px) clamp(48px, 10vh, 112px);
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- The lockup, same proportions as the app header ---- */
.legal-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  margin-bottom: clamp(28px, 5vh, 44px);
}
.legal-mark { display: block; width: 26px; height: 26px; color: var(--teal); }
.legal-mark svg { display: block; width: 100%; height: 100%; }
.legal-wordmark {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.legal-wordmark span { color: var(--teal); }

/* ---- The draft notice ----
   It has to be impossible to miss and impossible to mistake for part of the
   policy, so it is the only boxed element on the page. */
.legal-draft {
  margin: 0 0 clamp(26px, 4vh, 40px);
  padding: 13px 16px;
  border: 1px solid rgba(94, 214, 209, 0.38);
  border-radius: 10px;
  background: rgba(94, 214, 209, 0.07);
  color: var(--teal);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.legal-meta {
  margin: 0 0 clamp(34px, 6vh, 52px);
  color: var(--mute);
  font-size: 14px;
  line-height: 1.6;
}

h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  /* The space above a heading is what separates the sections; there are no
     dividers on this page. */
  margin: clamp(38px, 6vh, 54px) 0 12px;
}

h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  margin: 28px 0 8px;
}

p, li {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244, 247, 246, 0.86);
}
p { margin: 0 0 16px; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }
li::marker { color: var(--mute); }

strong { color: var(--paper); font-weight: 600; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--paper); }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}

.legal-foot {
  margin: clamp(48px, 9vh, 80px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  color: var(--mute);
  font-size: 15px;
}

:where(a, .legal-home):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}