/* Shared by every static marketing/info page (about, tools, faq, privacy) —
   one file so header, footer and page width stay identical across all four
   rather than drifting as each gets edited separately. */
:root {
  --paper: #ffffff;
  --surface: #fafaf9;
  --surface-sunk: #f4f4f2;
  --rule: #e4e4e1;
  --rule-strong: #c9c9c5;
  --ink: #1a1a19;
  --ink-dim: #57575a;
  --ink-muted: #8a8a8d;
  --accent: #b45309;
  --accent-wash: #fdf4e7;
  --brand: #f4a324;
  --page-max: 760px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: var(--accent); }

/*
 * WIDTH MATCHES main BELOW IT. JP: "i don't love how our logo is so far off
 * to the left... let's put logo and tools in the frame." The bar itself
 * still spans edge-to-edge (the border/background do), but its CONTENT is
 * capped at the same --page-max and centered, so the logo lines up with the
 * content column instead of pinning to the browser edge on a wide screen.
 */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /*
   * SAFE-AREA TOP INSET. JP, on the native app: "the datum header logo is
   * up behind the clock. looks bad." These static pages never got the
   * notch/dynamic-island handling AppHeader.jsx already has for the main
   * React app ("Safe-area padding is on the bar rather than the page, so
   * the notch is handled once for the whole app") — same fix here.
   */
  padding: max(0.875rem, env(safe-area-inset-top)) 1.5rem 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-logo { display: block; line-height: 0; }
.site-logo img { height: 1.75rem; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9375rem; }
.site-nav a { color: var(--ink-dim); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a.site-cta {
  color: #fff;
  background: var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-weight: 500;
}
.site-nav a.site-cta:hover { text-decoration: none; opacity: 0.92; }

main { max-width: var(--page-max); margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.site-footer a { color: var(--ink-muted); margin: 0 0.35rem; }
.site-footer .keywords { margin: 0.75rem auto 0; max-width: var(--page-max); line-height: 1.5; }