.container.legal { background-color: var(--brand-50); margin: 4rem auto; padding: 2rem 2rem; border: 1px solid #c5c5c5; }
body.legal { background-color: #fff; }
h2 { text-align: left; }
header{padding:12px 0 24px;border-bottom:1px solid black;margin-bottom:24px;}
header h1{margin:0 0 8px 0;font-size:28px;line-height:1.25;}
header .meta{color:black;font-size:14px}
.sub-title { color: #FF7F50 }
nav.toc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0 28px 0}
nav.toc strong{display:block;margin-bottom:6px}
nav.toc a{ color: black; font-size: 15px; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
nav.toc a:hover{ color: #FF7F50; text-decoration: underline; }
nav.toc ul{margin:8px 0 0 20px; padding:0}
nav.toc li{margin:4px 0; padding:0}
section{margin:28px 0}
h2{margin:0 0 12px 0;font-size:22px;line-height:1.3}
h3{margin:18px 0 8px 0;font-size:18px}
p{margin:10px 0}
ul{padding-left:20px}
footer{margin-top:36px;padding-top:16px;border-top:1px solid black;font-size:14px;color:var(--gray-very-dark)}
.badge{
    display: inline-block;
    background: var(--brand);
    border:none;
    color: #fff;
    font-size: 12px;
    padding: .6rem 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    margin-right:6px;
    transition: background-color 0.3s, color 0.3s;
}
.badge:hover {
    background: var(--brand-600);
}
a { font-size: 15px; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
a:hover { color: #FF7F50; text-decoration: underline; }
.legal h1, .legal h2 { color: var(--brand); }
.muted-link {color:var(--gray-very-dark); text-decoration: underline; }