/* Long-form legal pages (privacy, terms).
 *
 * Every value here resolves from the Bodie design system (bodie.css) -- the
 * same --bd-* tokens and the same local aliases index.html uses, so these
 * pages inherit the site's type, color, and spacing rather than defining
 * their own. Edit values in the design system, not here.
 *
 * The only thing this file adds beyond index.html's own chrome is a reading
 * measure and a prose rhythm: legal text is a column of body copy, not a
 * marketing layout, so headings step down and the container is narrower.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      var(--bd-background);
  --paper-2:    var(--bd-background-alt);
  --ink:        var(--bd-text);
  --ink-soft:   var(--bd-text-soft);
  --ink-mute:   var(--bd-text-mute);
  --rule:       var(--bd-border);
  --brand:      var(--bd-brand);
  --radius:     var(--bd-radius);
  --maxw:       var(--bd-container);
  --gutter:     var(--bd-gutter);
  --sans:       var(--bd-font-sans);
  --serif:      var(--sans);
  /* Narrower than --maxw: a full-width container is unreadable for
     paragraph after paragraph of prose. */
  --measure:    46rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: var(--bd-leading-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* NAV -- same markup and treatment as index.html's sticky bar. */
nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo { font-family: var(--serif); font-size: 1.3rem; font-weight: var(--bd-weight-bold); color: var(--ink); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; font-weight: var(--bd-weight-medium); transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { background: var(--brand); color: #fff; padding: 0.58rem 1.3rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: opacity 0.15s; }
.nav-cta:hover { opacity: 0.88; }
@media (max-width: 700px) { .nav-links { display: none; } }

/* PROSE */
main.legal { max-width: var(--measure); margin: 0 auto; padding: 4.5rem var(--gutter) 0; }

.kicker { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--bd-tracking-wide); text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; }

h1 {
  font-family: var(--sans);
  /* Steps down from the marketing h1 (which runs to 4.4rem): this is a
     document title above body copy, not a hero. */
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: var(--bd-tracking-tight);
  line-height: var(--bd-leading-tight);
  text-wrap: balance;
}

.updated { font-size: 0.875rem; color: var(--ink-mute); margin-top: 0.75rem; }

.lead { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.6; margin-top: 2rem; }

h2 {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: var(--bd-tracking-snug);
  line-height: var(--bd-leading-tight);
  margin-top: 3rem;
  margin-bottom: 0.85rem;
}

main.legal p { color: var(--ink-soft); margin-bottom: 1rem; text-wrap: pretty; }
main.legal ul { color: var(--ink-soft); margin: 0 0 1rem 1.25rem; }
main.legal li { margin-bottom: 0.45rem; }
main.legal strong { color: var(--ink); font-weight: 600; }
main.legal a { color: var(--brand); }

.addr { font-size: 0.9375rem; color: var(--ink-mute); margin-top: 2rem; }

/* FOOTER -- same markup and treatment as index.html. */
footer { border-top: 0.5px solid var(--rule); padding: 2.5rem 0; margin-top: 5rem; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); }
.footer-copy { font-size: 0.8rem; color: var(--ink-mute); }
.footer-links a { font-size: 0.82rem; color: var(--ink-mute); text-decoration: none; }
.footer-links a + a { margin-left: 1.25rem; }
.footer-links a:hover { color: var(--ink-soft); }