/* privacy.talltiles.com: the main site's look (site/styles.css: its colours, type and the legal
   page's measure), in light and dark. No web fonts, no scripts. */
:root {
  --bg: #f6f7f9;
  --text: #15181d;
  --dim: #48515d;
  --line: #d9dde3;
  --link: #0d7177;
  --link-hover: #09565a;
  --ring: #0d7177;
  --mark: #8b949e;
  --mark-lit: #00b7c2;
  --bar: rgba(246, 247, 249, 0.85);
  --glow: rgba(28, 153, 160, 0.14);
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0e12;
    --text: #e6e9ee;
    --dim: #a4aeba;
    --line: rgba(58, 64, 72, 0.5);
    --link: #4fd1d7;
    --link-hover: #7fe3e8;
    --ring: #4fd1d7;
    --mark-lit: #00f2ff;
    --bar: rgba(13, 14, 18, 0.78);
    --glow: rgba(28, 153, 160, 0.22);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font); overflow-wrap: break-word; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.45em; text-wrap: balance; }

.top {
  display: flex; align-items: center;
  padding: 10px var(--gutter);
  background: radial-gradient(45% 160% at 50% 100%, var(--glow), transparent 70%), var(--bar);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); }
.mark { display: block; width: 32px; height: 32px; }

.legal { max-width: 720px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) 72px; }
.legal h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 4px; }
.legal h2 { font-size: 21px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--dim); }
.legal strong, .legal em { color: var(--text); }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal li + li { margin-top: 6px; }
.legal .dated { margin-bottom: 28px; font-size: 14px; }