/* Shared look for the legal pages: the landing page's tokens, one readable column. */
@import url("styles.css");
.legal { max-width: 720px; margin-inline: auto; padding-inline: 20px; padding-block: 40px 96px; display: grid; gap: 18px; }
.legal h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin-top: 18px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal .meta { color: var(--ink-faint); font-size: 15px; }
.legal h3 { font-size: 18px; margin-top: 6px; }
.legal a { color: var(--thyme); }
.legal .toc { background: #fff; border: 1px solid rgba(30,35,31,.12); border-radius: 14px; padding: 16px 20px; }
.legal .toc ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.legal .box { background: #FBEBC4; border-radius: 14px; padding: 14px 18px; color: #4A3A12; }
.legal footer { border-top: 1px solid rgba(30,35,31,.14); padding-top: 18px; margin-top: 12px; color: var(--ink-faint); font-size: 14px; }
.legal .back { text-decoration: none; font-weight: 600; color: var(--thyme); }
.legal footer .social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }