/* ════════════════════════════════════════════════
   True North Originals — shared legal-page styles
   Brand-consistent with index.html (serif headings,
   system body, sage/teal palette). Linked from every
   privacy / terms / support page so they all match.
   ════════════════════════════════════════════════ */
:root {
  --primary:        #8AA38D;
  --teal:           #0F5870;
  --teal-deep:      #0B4458;
  --accent-terracotta: #C27A64;
  --accent-forest:  #3E5541;
  --accent-blue:    #7A9BAE;
  --background:     #F5F5F2;
  --surface:        #DCE3DC;
  --amber:          #F0C987;
  --text-dark:      #2a3a2c;
  --text-body:      #4a5a4c;
  --text-muted:     #7a8a7c;
  --white:          #ffffff;
  --line:           #e4e8e3;
  --font-head:      Georgia, 'Times New Roman', serif;
  --font-body:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--background);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); color: var(--text-dark); line-height: 1.2; letter-spacing: -0.01em; }
h2 { margin-top: 0; font-size: 1.4rem; color: var(--accent-forest); }
h3 { font-size: 1.1rem; color: var(--teal); }
a { color: var(--teal); }
a:hover { color: var(--accent-terracotta); }

/* ── Header ── */
header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 1.75rem 1.5rem 1.5rem;
}
header img { width: 64px; height: auto; margin-bottom: 0.5rem; }
header h1 { margin: 0.25rem 0 0.6rem; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; }
header nav { font-family: var(--font-body); font-size: 0.92rem; }
header nav a { color: var(--teal); text-decoration: none; font-weight: 600; margin: 0 0.35rem; }
header nav a:hover { color: var(--accent-terracotta); text-decoration: underline; }

/* ── Body ── */
main { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.lede {
  background: var(--surface);
  border-radius: 22px;
  padding: 2rem;
  box-shadow: 0 8px 28px rgba(15,88,112,0.08);
}
.lede p:first-child { margin-top: 0; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(15,88,112,0.05);
  padding: 1.5rem 1.75rem;
}
.section { margin-top: 1.25rem; }
ul { margin-top: 0.5rem; padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

/* ── Pills (privacy at-a-glance badges) ── */
.pill {
  display: inline-block;
  background: var(--surface);
  color: var(--accent-forest);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.2rem 0.25rem 0.2rem 0;
}

/* ── Footer ── */
footer {
  background: var(--accent-forest);
  color: #cdd8ce;
  text-align: center;
  padding: 1.75rem 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}
footer a { color: #cdd8ce; text-decoration: underline; }
footer a:hover { color: var(--amber); }