/* Shared styling for the plain document pages (privacy, terms, support).
   The landing page keeps its own inline CSS — it has a different job. */
:root{
  --canvas:#F2EFE6; --surface:#FFFFFF; --surface-alt:#E7E2D4; --border:#CFC8B8;
  --ink:#1F2A21; --muted:#5F6B60; --green:#2F4B34; --green-dark:#253B29;
  --orange:#C1500F;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:680px; margin:0 auto; padding:0 24px}
a{color:var(--green); text-underline-offset:3px}

header.site{padding:32px 0 0; border-bottom:1px solid var(--border); padding-bottom:22px}
/* Centred to match the landing page, so the header doesn't jump when you
   move between the two. */
header.site .wrap{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  text-align:center;
}
header.site img{height:30px; display:block}
header.site nav a{font-size:15px; color:var(--muted); text-decoration:none; margin:0 11px}
header.site nav a:hover{color:var(--ink)}

h1{font-size:34px; line-height:1.2; letter-spacing:-.022em; font-weight:760; margin:46px 0 6px}
.updated{color:var(--muted); font-size:15px; margin:0 0 6px}
h2{font-size:21px; letter-spacing:-.015em; font-weight:700; margin:42px 0 12px}
h3{font-size:17.5px; font-weight:650; margin:26px 0 8px}
p, li{max-width:64ch}
p{margin:0 0 15px}
ul{padding-left:22px; margin:0 0 15px}
li{margin-bottom:8px}

.callout{
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--green); border-radius:8px;
  padding:18px 22px; margin:22px 0;
}
.callout p:last-child{margin-bottom:0}

/* Unresolved drafting notes. Deliberately loud — these must not ship. */
.todo{
  background:#FBEFE6; border:1px solid var(--orange); border-left:4px solid var(--orange);
  border-radius:8px; padding:16px 20px; margin:20px 0;
  font-size:15.5px; color:#7A3209;
}
.todo strong{color:var(--orange)}
.todo p:last-child{margin-bottom:0}

dl.contact{margin:0; display:grid; grid-template-columns:130px 1fr; gap:8px 20px}
dl.contact dt{color:var(--muted); font-size:15px}
dl.contact dd{margin:0}

footer.site{
  margin-top:64px; padding:26px 0 60px; border-top:1px solid var(--border);
  color:var(--muted); font-size:14.5px;
}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between}
footer.site a{color:var(--muted)}

@media (max-width:560px){
  h1{font-size:27px} h2{font-size:19px}
  dl.contact{grid-template-columns:1fr; gap:2px 0}
  dl.contact dt{margin-top:12px}
  header.site nav{display:none}
}