/* Look shared by the public legal pages: the platform Privacy Policy and Terms (public/legal/) and each organization's
   family note (public/family-privacy.html). Mirrors the plankindred.app legal pages (landing-site/privacy.html) value for
   value -- fixed 80px bar, 720px column, type scale, colors -- as plain CSS instead of Tailwind. If those pages change,
   change this to match. Served from /brand/ (same on every host, works logged out). */
:root { --sage: #6E8A6F; --leaf: #AEC9B0; --dark: #2F3A2E; --parchment: #F7F4EE; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Raleway', sans-serif; background: var(--parchment); color: var(--dark); line-height: 1.5; }

/* Top bar (landing: fixed, h-20, max-w 1152, px-6, parchment/80 + blur; solid-ish with a shadow once scrolled) */
.legal-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(247, 244, 238, 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background 0.3s, box-shadow 0.3s; }
.legal-nav.scrolled { background: rgba(247, 244, 238, 0.97); box-shadow: 0 2px 20px rgba(47, 58, 46, 0.08); }
.legal-nav-inner { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; height: 5rem; display: flex; align-items: center; justify-content: space-between; }
.legal-logo { display: block; }
.legal-logo img { height: 2.5rem; display: block; object-fit: contain; }
/* An org's own logo file carries transparent padding (Alvearium's horizontal one: artwork is ~80% of the image height), the Kindred logo does not.
   Scale it up so the VISIBLE artwork matches the Kindred logo's 2.5rem: 2.5rem / 0.80 = ~3.1rem. Tuned to Alvearium; revisit for other orgs. */
.legal-logo.org img { height: 3.1rem; }
.legal-orgname { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--dark); }
.legal-back { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(47, 58, 46, 0.55); text-decoration: none; transition: color 0.15s; }
.legal-back:hover { color: var(--sage); }

/* Page */
.legal-main { padding: 9rem 1.5rem 6rem; }
.prose { max-width: 720px; margin: 0 auto; }
.legal-kicker { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sage); margin: 0 0 0.75rem; }
h1, h2 { font-family: 'Cormorant Garamond', serif; }
h1 { font-size: 3rem; line-height: 1.25; font-weight: 500; color: var(--dark); margin: 0 0 0.75rem; }
@media (min-width: 768px) { h1 { font-size: 3.75rem; } }
.effective { font-size: 0.875rem; color: rgba(47, 58, 46, 0.4); margin: 0 0 2.5rem; }
.divider { height: 1px; background: rgba(47, 58, 46, 0.08); margin: 0; }
.divider.after-head { margin-bottom: 2.5rem; }
.divider.before-foot { margin-top: 3rem; }

.prose h2 { font-size: 1.6rem; font-weight: 600; line-height: 1.25; color: var(--dark); margin: 2.5rem 0 0.75rem; }
.prose h3 { font-family: 'Raleway', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); margin: 1.75rem 0 0.5rem; }
.prose p { font-size: 0.95rem; line-height: 1.8; color: rgba(47, 58, 46, 0.72); margin: 0 0 1rem; }
.prose ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.prose ul li { font-size: 0.95rem; line-height: 1.8; color: rgba(47, 58, 46, 0.72); padding-left: 1.25rem; position: relative; margin-bottom: 0.25rem; }
.prose ul li::before { content: '\00b7'; position: absolute; left: 0; color: var(--leaf); font-weight: 700; }
.prose a { color: var(--sage); text-decoration: underline; }
.prose strong { font-weight: 700; }

/* "Who can see what" table (not on the landing pages; kept in the same palette) */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem 0.6rem 0; border-bottom: 1px solid rgba(47, 58, 46, 0.08); font-size: 0.95rem; line-height: 1.7; color: rgba(47, 58, 46, 0.72); }
.prose th { color: var(--dark); font-weight: 700; width: 11rem; }

.legal-copy { font-size: 0.75rem; color: rgba(47, 58, 46, 0.3); margin: 1.5rem 0 0; }
.legal-copy a { color: inherit; margin-left: 0.9rem; }

@media (max-width: 560px) {
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: 100%; }
  .prose tr { padding: 0.5rem 0; border-bottom: 1px solid rgba(47, 58, 46, 0.08); }
  .prose th, .prose td { border: 0; padding: 0.1rem 0; }
}