/*
  One stylesheet for every hand-written page in site/. Plain, dependency-free
  CSS — this site ships before the design system does; step 05's Expo export
  owns real styling and replaces this file outright in the phase-2 handover
  (see the publish contract in docs/superpowers/specs/steps/04-render-deploy.md).

  Kept in one file, not copied per page, so a palette or font change is a
  one-line diff instead of an edit repeated across every shipped page.
*/
:root {
  color-scheme: light;
  --ink: #14181c;
  --paper: #fafaf8;
  --accent: #b4472d;
  --line: #d8d4cc;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }

/* The landing page's header, hero, city list, and footer. */
header, main, footer {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}
header { display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.cta-row a {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.35rem;
  text-decoration: none;
  font-size: 0.9rem;
}
.cta-row .signin { color: var(--ink); border: 1px solid var(--line); }
.cta-row .signup { color: #fff; background: var(--accent); }
h1 { font-size: 2rem; margin: 1.5rem 0 0.5rem; }
p.lede { font-size: 1.1rem; color: #43494f; }
.cities { display: flex; gap: 0.75rem; margin: 1.5rem 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cities li {
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
}
footer {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #6b7178;
}

/* The privacy, support, and 404 pages — a simple centered document. */
main.doc { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
main.doc h1 { font-size: 1.75rem; }
main.not-found { max-width: 32rem; margin: 4rem auto; padding: 0 1.25rem; text-align: center; }
main.not-found h1 { font-size: 1.5rem; }