/* privacy.html, terms.html and 404.html. Loaded after css/site.css.

   These are the last pages a visitor sees by accident rather than by choice —
   Privacy and Terms are in the footer of all 65 pages, and 404 catches every
   broken link on the site. They were the most reachable pages still serving the
   old design.

   Almost pure prose: 14 headings and 72 paragraphs on Privacy, 27 and 84 on
   Terms, and not one bespoke component between them. So there is nothing here
   but a reading column and a type scale. No new families, no layout invention —
   a legal page that tries to be interesting is a legal page nobody finishes. */

body.lg{
  --lg-measure:720px;
  --lg-rel:12px;      /* a heading and its own paragraph */
  --lg-para:20px;     /* between paragraphs */
  --lg-section:52px;  /* between clauses */
}

/* Clears the 108px fixed nav. */
body.lg .lg-page{padding:150px 0 96px}
body.lg .lg-body{max-width:var(--lg-measure);margin:0 auto}

body.lg .lg-body h1{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;
  color:var(--ink);margin:0 0 16px;text-wrap:balance}
body.lg .lg-body h2{font-size:24px;font-weight:800;letter-spacing:-.022em;line-height:1.25;
  color:var(--ink);margin:var(--lg-section) 0 var(--lg-rel);text-wrap:balance}
body.lg .lg-body h3{font-size:18px;font-weight:700;letter-spacing:-.016em;
  color:var(--ink);margin:32px 0 10px}
body.lg .lg-body h2:first-child,body.lg .lg-body h3:first-child{margin-top:0}
body.lg .lg-body p{font-size:16.5px;line-height:1.75;color:var(--body);margin:0 0 var(--lg-para)}
body.lg .lg-body ul,body.lg .lg-body ol{margin:0 0 var(--lg-para);padding-left:22px}
body.lg .lg-body li{font-size:16.5px;line-height:1.7;color:var(--body);margin-bottom:8px}
body.lg .lg-body a{color:var(--pu);font-weight:600}
body.lg .lg-body strong{color:var(--ink);font-weight:700}
body.lg .lg-body table{width:100%;border-collapse:collapse;margin:0 0 var(--lg-para);font-size:15.5px}
body.lg .lg-body th,body.lg .lg-body td{text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line);vertical-align:top}
body.lg .lg-body th{font-weight:700;color:var(--ink)}
/* Long clause tables must scroll inside themselves rather than pushing the page
   sideways on a phone. */
body.lg .lg-body table{display:block;overflow-x:auto}

/* The "last updated" line and any similar aside. */
body.lg .lg-body p em:only-child{color:var(--mute);font-style:normal;font-size:14.5px}

/* ── table of contents ────────────────────────────────────────────────────
   site.css defines .toc as position:sticky, top:129px — correct for the blog,
   where it is a sidebar in its own grid column. These pages carry their .toc
   INSIDE the single article column, so sticky lifted it out of the flow and it
   scrolled over the policy text, both sets of words on top of each other and
   neither readable.

   Here it is what it looks like: a contents block at the top of a long
   document. Scoped to body.lg, so the blog's sidebar is untouched. */
body.lg .lg-body .toc{position:static;top:auto;display:block;
  background:var(--tint);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;margin:0 0 var(--lg-section);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
body.lg .lg-body .toc ol,body.lg .lg-body .toc .toc-list{list-style:none;padding:0;
  margin:16px 0 0;counter-reset:toc}
body.lg .lg-body .toc li{counter-increment:toc;margin:0;
  font-size:15.5px;font-weight:500;letter-spacing:0;text-transform:none}
body.lg .lg-body .toc a{display:block;padding:8px 0 8px 30px;border-left:0;position:relative;
  color:var(--body);font-weight:500;line-height:1.45}
body.lg .lg-body .toc a::before{content:counter(toc) ".";position:absolute;left:0;
  color:var(--mute);font-variant-numeric:tabular-nums}
body.lg .lg-body .toc a:hover{color:var(--pu)}

/* The headings the contents links point at must clear the 108px fixed nav when
   jumped to, or the anchor lands with the heading hidden behind it. */
body.lg .lg-body h2[id],body.lg .lg-body h3[id],body.lg .lg-body [id]{scroll-margin-top:128px}

/* ── 404 ──────────────────────────────────────────────────────────────────
   It had no nav and no footer: one sentence, and no way anywhere. The copy is
   unchanged; what it gains is a route out. */
body.lg-404 .lg-page{padding:170px 0 110px;text-align:center}
body.lg-404 .lg-404-in{max-width:560px;margin:0 auto}
body.lg-404 h1{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.14;
  color:var(--ink);margin:0 0 14px;text-wrap:balance}
body.lg-404 p{font-size:17px;line-height:1.7;color:var(--body);margin:0 0 34px;text-wrap:pretty}
body.lg-404 .lg-404-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
body.lg-404 .lg-404-links a{display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 18px;font-size:15px;font-weight:700;color:var(--ink);
  transition:border-color .2s ease,color .2s ease}
body.lg-404 .lg-404-links a:hover{border-color:var(--pu);color:var(--pu)}
/* The first one is the action: get me back to the site. */
body.lg-404 .lg-404-links a:first-child{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.lg-404 .lg-404-links a:first-child:hover{color:#fff}

@media (max-width:860px){
  body.lg{--lg-section:36px;--lg-para:16px}
  body.lg .lg-page{padding:126px 20px 64px}
  body.lg .lg-body h1{font-size:29px}
  body.lg .lg-body h2{font-size:20px}
  body.lg .lg-body p,body.lg .lg-body li{font-size:16px}
  body.lg-404 .lg-page{padding:140px 20px 80px}
  body.lg-404 h1{font-size:27px}
  body.lg-404 .lg-404-links a{flex:1 1 44%;text-align:center}
}