/* Shared styling for the privacy and terms pages. Kept apart from the app's
   stylesheet so these pages load on their own, without the application bundle. */

:root {
  --bg: #f3f3f1; /* fog */
  --panel: #ffffff; /* paper */
  --ink: #14180c;
  --ink-2: #5b5b5b;
  --ink-3: #8a8a8a; /* stone */
  --line: #e6e6e6; /* divider */
  --accent: #4a5a10; /* lime as text */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010; /* charcoal, shaded */
    --panel: #1a1a1a; /* charcoal */
    --ink: #ffffff;
    --ink-2: #b4b4b4;
    --ink-3: #8a8a8a; /* stone */
    --line: #333333;
    --accent: #d4ff3b; /* lime */
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 90px; }

/* The lockup is a brand asset, not type: the wordmark is Plus Jakarta Sans
   converted to outlines, so the file needs no font installed to draw itself.
   Ink type on light and light type on ink are the two approved colourways,
   which the identity ships as a pair. */
.brand {
  display: inline-block;
  width: 106px;
  height: 35px;
  /* Three colours now, so the ground picks the file rather than the mask
     picking up a colour. These pages follow the system appearance. */
  background: url('./brand/logo.svg') left center / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .brand { background-image: url('./brand/logo-inverse.svg'); }
}

h1 {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 26px 0 0;
  text-wrap: balance;
}

.updated { margin-top: 10px; color: var(--ink-3); font-size: 14px; }

h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 40px 0 0;
}

p { margin: 12px 0 0; color: var(--ink-2); }
p.lead { color: var(--ink); font-size: 17px; }

ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); }
li { margin: 7px 0; }
li::marker { color: var(--ink-3); }

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

a { color: var(--accent); text-underline-offset: 2px; }

.note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  font-size: 15px;
}

table { border-collapse: collapse; width: 100%; margin-top: 14px; font-size: 15px; }
th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
td:first-child { color: var(--ink); }
.table-scroll { overflow-x: auto; }

footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
footer a { margin-right: 16px; }