/* legal pages (privacy, terms): same tokens, same nav and footer as the home
   page. one readable column, plain headings, nothing else. */

.legal { padding: calc(var(--nav-h) + clamp(2.5rem, 8vw, 5rem)) 0 var(--section); }
.legal-wrap { width: min(100% - 2 * var(--gutter), var(--read)); margin-inline: auto; }
.legal-head { display: grid; gap: 1rem; justify-items: start; margin-bottom: clamp(2rem, 5vw, 3rem); }
.legal-head .h1 { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.legal-head .h1 .doodle-icon-chip { margin-top: .12em; }
.legal-updated { font-size: var(--t-small); color: var(--muted); }
.legal-head .lead { color: var(--ink); }
.legal-body { display: grid; gap: 1rem; font-size: var(--t-body); line-height: 1.6; color: var(--ink); }
.legal-body .h2 { margin-top: 1.5rem; }
.legal-body p, .legal-body li { color: var(--muted); text-wrap: pretty; }
.legal-body b { color: var(--ink); }
.legal-body a { color: var(--ink); }
.legal-body ul { display: grid; gap: 8px; }
.legal-body ul li { position: relative; padding-left: 1.6rem; }
.legal-body ul li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1rem; height: 1rem; background: var(--accent);
  -webkit-mask: var(--da-check) center / contain no-repeat;
          mask: var(--da-check) center / contain no-repeat;
  filter: url(#doodle-rough);
}
/* a list of "don'ts" gets a plain dash, never the check */
.legal-body ul.legal-dont li::before {
  top: .78em; width: .7rem; height: 2px; border-radius: 2px; background: var(--line-strong);
  -webkit-mask: none; mask: none; filter: none;
}
.legal-card { margin-top: .5rem; display: grid; gap: 10px; }
.legal-card p { color: var(--ink); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
@media (max-width: 640px) {
  .legal-head .h1 { grid-template-columns: 1fr; gap: 12px; }
  .legal-nav .btn { width: 100%; }
}