/* ── Legal pages ──────────────────────────────────────────────────
   Privacy Policy and Terms of Service. Long-form reading, so the
   measure is narrower than the marketing page and the hierarchy is
   flatter. Inherits the palette and typefaces from styles.css. */

.legal-head{
  background:var(--booth); color:var(--paper);
  padding-block:44px 38px; margin-bottom:44px;
}
.legal-home{
  display:inline-block; color:var(--accent-warm); text-decoration:none;
  font-size:.88rem; letter-spacing:.02em; margin-bottom:18px;
}
.legal-home:hover{text-decoration:underline}
.legal-head h1{
  font-family:var(--display); font-weight:600; margin:0;
  font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.1; letter-spacing:-.015em;
}
.legal-date{margin:10px 0 0; color:var(--on-booth-faint); font-size:.88rem}

.legal{max-width:44rem; padding-bottom:70px}
.legal-lede{
  font-size:1.09rem; color:var(--muted); margin:0 0 30px;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}

/* Contents. Wraps to as many rows as it needs on a phone. */
.legal-toc{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 42px;
}
.legal-toc a{
  font-size:.85rem; color:var(--accent-deep); text-decoration:none;
  border:1px solid var(--line); border-radius:99px; padding:5px 13px;
}
.legal-toc a:hover{border-color:var(--accent); background:var(--paper-2)}

.legal h2{
  font-family:var(--display); font-weight:600; font-size:1.42rem;
  margin:46px 0 12px; letter-spacing:-.01em; scroll-margin-top:20px;
  padding-top:14px; border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:none; padding-top:0; margin-top:0}
.legal h3{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  margin:28px 0 8px; color:var(--accent-deep);
}
.legal p{margin:0 0 15px; line-height:1.68}
.legal ul{margin:0 0 15px; padding-left:22px; line-height:1.68}
.legal li{margin-bottom:7px}
.legal a{color:var(--accent-deep)}
.legal strong{color:var(--ink)}

/* The clauses people need to actually notice. */
.callout{
  background:var(--paper-2); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:17px 20px; margin:20px 0;
}
.callout p{margin:0}
.callout p+p{margin-top:10px}

.legal .scroll{overflow-x:auto; margin:20px 0; -webkit-overflow-scrolling:touch}
.legal table{border-collapse:collapse; width:100%; font-size:.93rem; min-width:22rem}
.legal th,.legal td{
  text-align:left; padding:10px 18px 10px 0;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.legal th{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-dim); font-weight:600; white-space:nowrap;
}
.legal tbody tr:last-child td{border-bottom:none}

.legal-sibling{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--muted);
}

/* Footer legal links, also added to the home page. */
.footer-legal{display:grid; gap:5px; font-size:.91rem}
.footer-legal a{color:var(--on-booth-dim); text-decoration:none}
.footer-legal a:hover{color:var(--accent-warm); text-decoration:underline}

@media (max-width:640px){
  .legal-head{padding-block:32px 28px; margin-bottom:32px}
  .legal h2{font-size:1.26rem; margin-top:36px}
}