/* Copied from phase0/landing/base.css on 2026-10-19: only the rules the engine pages use.
   Edit here, not in the landing folder. Since the UX pass of 2026-10-25 the tokens, fonts and
   pill buttons match the landing page (site.css), so sign in and the watchlist look like the
   same site. Contrast is in phase1/ux-grade-2026-10-25.md section 2. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --bg: #f4f2ee; --surface: #ffffff; --ink: #14263f; --muted: #5b6168;
  --line: #ddd8cf; --field: #8a8f96; --note-bg: #ebe7df;
  --accent: #1d7a4c; --accent-ink: #ffffff; --danger: #a12b2b;
  --radius: 14px; --max: 720px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1a2b; --surface: #14263f; --ink: #e8edf3; --muted: #a9b4c2;
    --line: #24395a; --field: #6b7686; --note-bg: #1b2f4d;
    --accent: #5fd39a; --accent-ink: #0e1a2b; --danger: #e07a7a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
body { font: 400 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
h1, h2 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

header.top { padding: 20px 0; border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { font-weight: 700; letter-spacing: 0.2px; }
.brand img { display: block; width: 140px; height: auto; }

section { padding: 28px 0; border-top: 1px solid var(--line); }
section h2 { font-size: 22px; margin: 0 0 12px; }
section p { margin: 0 0 12px; }

button.cta, a.cta {
  font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 8px; padding: 12px 18px; cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center;
}
button.cta, a.cta { border-radius: 999px; min-height: 44px; padding: 10px 22px; }
button.cta:focus-visible, a.cta:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.fine { font-size: 14px; color: var(--muted); }
.fine a { color: var(--accent); }

footer { padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer a { color: inherit; }