/* Shared styling for Commit's legal / policy pages.
   These are static HTML, outside the React app, so they carry their own copy of
   the palette — but the values are the marketing site's, from the `.light`
   scope at the foot of src/styles/theme.css, which in turn are the iOS app's
   (CommitTheme.swift). Change one, change the other.

   Was a cream #F5F1E8 ground with Epilogue and a red accent: the identity the
   site had two directions ago. It survived the terminal rebuild because nothing
   in src/ imports it, which is also why it is easy to forget — these pages are
   linked from the footer of every page. */

:root {
  color-scheme: light;
  /* Light, 2026-09-13, following the marketing site back to light. These are
     `.light`'s values in src/styles/theme.css — nothing in src/ imports this
     file, so the two palettes have to be edited together or the legal pages
     stay on the identity the rest of the site just left. That has already
     happened twice: this file was still cream #F5F1E8 two directions after the
     site stopped being cream, and check-site now asserts the body background
     here EXACTLY so a third time fails the build instead of shipping. */
  --bg: #F4F5F7;      /* .light --surface-0 */
  --fg: #12151A;      /* cmTextStrong, light mode */
  --body: #363B43;    /* cmTextBody, light mode */
  --muted: #656B74;   /* cmTextMuted, light mode — measured, see theme.css */
  --accent: #30FF29;  /* the dial green — the site's one accent, on FILLS only */
  /* The accent cannot be a link colour on this ground: #30FF29 as text is
     1.25:1 on --bg, which is no text at all. Links take the deep green that
     `.light --kept` uses, at 4.86:1. The button keeps the bright fill, where
     the ink is #04140A and the pairing is 13.9:1. */
  --link: #127B4A;
  --border: #E0E3E8;  /* cmBorderSubtle, light mode */
  --card: #ECEEF1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The system stack, and DELIBERATELY not the rest of the site any more.
   The site moved onto the app's own faces on 2026-09-11 (Instrument Sans + Wix
   Madefor Display). These three pages did not, and the original reason still
   holds: two of the five linked Google Fonts and three did not, so they never
   agreed with each other, and a policy page is the last place worth spending a
   render block on.
   ⚠️ The claim this comment used to make — "matching the app" — was false even
   before that, since the app has never used the system stack. It is a
   considered mismatch now, not an accidental one. Re-link the fonts here only
   if someone decides these pages are worth the request. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.62;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 245, 247, 0.92);   /* --bg, translucent */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover { opacity: 0.7; }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.site-header nav a:hover { color: var(--fg); }
.btn-primary {
  background: var(--accent);
  color: #04140A;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 15px;          /* CMRadius .md, as the app and the site use */
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
@media (max-width: 768px) {
  .site-header nav, .btn-primary { display: none; }
}

/* ---- Content ---- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
h1 {
  font-weight: 900;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 10px;
}
h2 {
  font-weight: 700;
  font-size: 22px;
  color: var(--fg);
  margin: 46px 0 12px;
}
h3 {
  font-weight: 600;
  font-size: 17px;
  color: var(--fg);
  margin: 28px 0 8px;
}
p, li { font-size: 16px; }
a { color: var(--link); }
strong { color: var(--fg); }
.updated {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  background: #ECEEF1;          /* one step DARKER than the page, as on the site */
}
.site-footer .inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer .brand { font-size: 16px; }
.site-footer .tagline { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer .links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer .links a:hover { color: var(--fg); }