/* OwlWatt shared long-form/content-page chrome.
   ---------------------------------------------------------------------
   The current-generation marketing page design (navy/amber palette,
   Inter body font, single 760px content column, navy headings, card
   surfaces, muted footer) was hand-copied per-file into every static
   marketing page's own <style> block. Some copies drifted: help.html,
   terms.html and privacy.html were never updated past an older template
   (hardcoded hex colors instead of the shared palette, the body element
   itself as the layout container instead of a <main> column, and even a
   couple of dead "header\nheader" lines left over from an edit that
   removed the old inline header CSS but not its selector name) — see
   https://owlwatt.com/help vs https://owlwatt.com/audit, flagged 2026-09-09.

   This file is the base chrome ONLY: palette variables, body/link/heading
   defaults, the 760px `main` column, and the shared footer look. Per-page
   widgets (help's FAQ search/filter, privacy's table-of-contents and data
   table, etc.) stay in that page's own <style> block, restyled to reference
   these variables instead of new hardcoded colors, since they don't repeat
   anywhere else.

   Reference implementation this was extracted from: app/static/marketing/
   about.html (audit.html and apps.html carry the same variables/column/
   footer for their hero-driven layout, but are locked to another agent as
   of this file's introduction and were not edited to add this <link> — see
   the PR description for the follow-up).

   Cache-busting: this file is under /assets/, so
   app/services/public_page.py's add_cache_busting_versions() stamps every
   reference to it with a content-hash ?v=... automatically. No manual
   version bump needed here or in any page that links it. */

:root{
  --navy:#0b2340;
  --navy-2:#14325a;
  --amber:#f5b041;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#fbfaf6;
  --card:#fff;
  --line:#e8e5db;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--amber)}

main{max-width:760px;margin:0 auto;padding:48px 24px 64px}
h1{font-size:34px;line-height:1.2;color:var(--navy);margin:0 0 8px}
h2{font-size:24px;color:var(--navy);margin:40px 0 12px}
h3{font-size:18px;color:var(--navy);margin:24px 0 8px}
/* Headings inside a hero take the hero's own colour, not the page ink.
   The bare h1/h2/h3 rules above are element selectors (0-0-1); an inherited
   colour from `.hero{color:#fff}` is not a matching rule and loses to ANY of
   them. So a page whose `.hero h1{}` sets size but not colour rendered navy on
   a navy hero after adopting this sheet -- invisible. Shipped that way in #613
   on /, /audit, /iris and /founders. `.hero h1` here is 0-1-1 and wins; `em`
   inside it is 0-1-2 and keeps its amber. */
.hero h1,.hero h2,.hero h3{color:inherit}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:24px}
li{margin-bottom:8px}

.byline,.meta{color:var(--muted);font-size:14px;margin-bottom:32px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin:24px 0}

.cta{display:inline-block;background:var(--navy);color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;margin-top:16px}
.cta:hover{background:var(--amber);color:var(--navy)}

footer{max-width:760px;margin:48px auto 0;padding:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}
footer a{color:var(--muted)}