/* The Terms and Privacy pages. Same two themes and token set as
   waitlist/index.html; the visitor's system setting picks one and the toggle
   pins it with data-theme on <html> (shared localStorage key arlo.theme). */
:root {
  --ground: #edeae1;
  --raised: #fbfaf7;
  --rule: #dbd6c9;
  --rule-soft: #e6e1d5;
  --ink: #14140f;
  --ink-2: #4f4c44;
  --ink-3: #6b675c;
  --muted: #6f6b60;
  --callout: #f4f1e9;
  --sheen: rgba(255,255,255,.8);
  --shadow: 60,48,20;
  --shadow-k: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #161616;
    --raised: #1d1d1d;
    --rule: #2e2e2e;
    --rule-soft: #262626;
    --ink: #ececec;
    --ink-2: #b4b4b4;
    --ink-3: #a0a0a0;
    --muted: #949494;
    --callout: #1d1d1d;
    --sheen: rgba(255,255,255,.07);
    --shadow: 0,0,0;
    --shadow-k: 2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #161616;
  --raised: #1d1d1d;
  --rule: #2e2e2e;
  --rule-soft: #262626;
  --ink: #ececec;
  --ink-2: #b4b4b4;
  --ink-3: #a0a0a0;
  --muted: #949494;
  --callout: #1d1d1d;
  --sheen: rgba(255,255,255,.07);
  --shadow: 0,0,0;
  --shadow-k: 2;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 760px; margin: 0 auto;
  padding: 20px 16px;
}
.home { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.home img { display: block; }
.home .mark { width: 22px; height: 22px; }
.home .wordmark { height: 19px; width: auto; }
.logo-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display: none !important; }
  :root:not([data-theme="light"]) .logo-light { display: block !important; }
}
:root[data-theme="dark"] .logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: block !important; }

.theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--raised); color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 0 var(--sheen) inset, 0 6px 16px -10px rgba(var(--shadow),calc(.35 * var(--shadow-k)));
}
.theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: none; }
  :root:not([data-theme="light"]) .theme .moon { display: block; }
}
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
.theme:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the document ---------- */
main { max-width: 760px; margin: 0 auto; padding: clamp(24px, 6vh, 56px) 16px 0; }
/* Set like a document, after Supertake's legal pages: quiet grey body
   copy and no numbering. Headings stay in Figtree, as on the landing page:
   Fraunces' ball-terminal f and wide S, fine in "Meet" beside the logo,
   draw the eye in a phrase like "Terms of Service". */
h1 {
  font-weight: 500; font-size: clamp(32px, 5vw, 44px);
  line-height: 1.05; letter-spacing: -.032em; text-wrap: balance;
}
.updated { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.updated strong { color: var(--ink); font-weight: 600; }
.lede { margin-top: 24px; max-width: 68ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

.callout {
  margin-top: 28px; padding: 18px 20px; border-radius: 16px;
  background: var(--callout); border: 1px solid var(--rule-soft);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.callout strong { color: var(--ink); font-weight: 600; }

.doc section { padding-top: 36px; scroll-margin-top: 16px; }
.doc h2 {
  font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: -.02em;
}
.doc h3 { margin-top: 20px; font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.doc p { margin-top: 12px; max-width: 68ch; }
.doc ul { margin-top: 10px; padding-left: 20px; max-width: 66ch; }
.doc li { margin-top: 6px; }
.doc li::marker { color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { text-underline-offset: 2px; }
.doc .caps { text-transform: uppercase; font-size: 14px; letter-spacing: .01em; }

/* A detail the company still has to fill in. Visible on purpose, so the
   page cannot ship with a blank that reads as finished. */
.todo { background: #f6e3a8; color: #14140f; padding: 0 4px; border-radius: 4px; }

/* ---------- footer: same as the waitlist panel ---------- */
footer {
  max-width: 760px; margin: 56px auto 0; padding: 20px 16px 40px;
  border-top: 1px solid var(--rule-soft); text-align: center;
  font-size: 12px; line-height: 1.55; color: var(--muted);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer a[aria-current="page"] { color: var(--ink); }
.socials { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.socials a {
  display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--ink-3); transition: color .15s;
}
.socials a:hover { color: var(--ink); text-decoration: none; }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

@media print {
  .top .theme, .socials { display: none; }
  body { background: #fff; color: #000; }
}