/* Shared legal page styles */
:root {
  --olive: #5D5D36; --olive-dk: #3F3F23;
  --cream: #F4EDD5; --cream-dk: #E6DDC0;
  --ink: #1A1A1A; --muted: #8C8C6E; --white: #FFFFFF;
  --rust: #B85042; --border: #E0D8BD;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Kanit', -apple-system, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.7; }
a { color: var(--olive); text-decoration: none; }
a:hover { text-decoration: underline; }
nav { position: sticky; top: 0; z-index: 100; background: rgba(244,237,213,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
nav .container { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--olive); letter-spacing: 2px; }
.logo-mark { width: 32px; height: 32px; background: var(--olive); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--cream); font-weight: 800; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nav-links a { color: var(--ink); opacity: 0.8; text-decoration: none; }
.legal-wrap { max-width: 800px; margin: 60px auto; background: var(--white); border-radius: 20px; padding: 60px 48px; }
.legal-wrap h1 { font-size: 40px; margin-bottom: 8px; color: var(--olive); font-weight: 800; }
.legal-wrap .sub { color: var(--muted); margin-bottom: 40px; font-size: 14px; }
.legal-wrap h2 { font-size: 22px; margin-top: 40px; margin-bottom: 12px; color: var(--ink); font-weight: 700; }
.legal-wrap h3 { font-size: 17px; margin-top: 24px; margin-bottom: 8px; color: var(--olive); }
.legal-wrap p, .legal-wrap li { font-size: 14px; margin-bottom: 12px; }
.legal-wrap ul, .legal-wrap ol { padding-left: 24px; margin-bottom: 16px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap strong { color: var(--ink); }
.legal-toc { background: var(--cream); border-radius: 12px; padding: 20px; margin-bottom: 32px; font-size: 13px; }
.legal-toc strong { display: block; margin-bottom: 10px; }
.legal-toc a { display: inline-block; margin-right: 16px; padding: 2px 0; }
footer { background: var(--ink); color: var(--cream); padding: 40px 0; text-align: center; font-size: 12px; opacity: 0.7; }
footer a { color: var(--cream); opacity: 0.7; margin: 0 12px; }
@media (max-width: 720px) { .legal-wrap { padding: 40px 24px; margin: 20px 12px; } .legal-wrap h1 { font-size: 30px; } }