/* ============================================================
   Informational pages — About, Privacy Policy, Terms of Service.
   One narrow prose column shared by all three (fragments/legal.html).
   Tokens and .wrap/.page come from redesign.css; the affiliation
   disclaimer (.legal-disclaimer) is styled there too, because the
   global footer renders the same fragment — only what is specific to
   this column (its reading measure) is set here.
   ============================================================ */

/* 74ch rather than a pixel width: the readable measure is a function of the type size, and these
   pages are nothing but running text. .wrap keeps the gutter, so this only has to cap the column. */
.legal{max-width:74ch;margin:0 auto;}

/* ── page head ─────────────────────────────────────────────── */
.legal-head{margin:14px 0 34px;padding-bottom:26px;border-bottom:1px solid var(--border);}
.legal-head h1{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0;}
.legal-lead{margin:13px 0 0;font-size:16px;line-height:1.6;color:var(--text-2);}
.legal-updated{margin:18px 0 0;font-size:12.5px;font-weight:600;color:var(--text-3);}

/* ── sections ──────────────────────────────────────────────── */
/* scroll-margin sits on the section, not its h2: the section carries the id an in-page link targets
   (#retention), and .site-nav is sticky, so without it the heading lands underneath the nav bar. */
.legal-section{margin:0 0 34px;scroll-margin-top:80px;}
.legal-section h2{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  margin:0 0 12px;color:var(--text);}
.legal-section h3{font-size:15px;font-weight:700;line-height:1.35;margin:22px 0 9px;color:var(--text);}
.legal-section p{margin:0 0 13px;font-size:14.5px;line-height:1.68;color:var(--text-2);}
.legal-section p:last-child{margin-bottom:0;}
.legal-section ul{margin:0 0 13px;padding-left:20px;}
.legal-section li{font-size:14.5px;line-height:1.62;color:var(--text-2);margin-bottom:7px;}
.legal-section li:last-child{margin-bottom:0;}
.legal-section li strong,.legal-section p strong{color:var(--text);font-weight:700;}
.legal-section a{color:var(--green-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;}
.legal-section a:hover{color:var(--text);}
.legal-section a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px;}

/* A long address or URL must not be able to widen the column past the viewport. */
.legal-mail,.legal-url{overflow-wrap:anywhere;}

/* ── highlighted notice ────────────────────────────────────── */
.legal-note{margin:0 0 22px;padding:14px 16px;border:1px solid var(--green-tint-2);
  border-radius:var(--radius-sm);background:var(--green-tint);}
.legal-note p{margin:0;font-size:14px;line-height:1.6;font-weight:600;color:var(--text);}

/* ── page foot ─────────────────────────────────────────────── */
.legal-foot{margin-top:6px;padding-top:22px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.6;color:var(--text-3);}
/* The same measure as .legal, recomputed at this smaller type — here the disclaimer is the last
   line of the prose. The global footer renders the same fragment as one centred row and caps
   nothing, so the measure lives here rather than on .legal-disclaimer itself. */
.legal-foot .legal-disclaimer{max-width:74ch;}

/* ── About: contact rows ───────────────────────────────────── */
/* Label, then a link carrying its own glyph — the same shape for every row, so a new one cannot
   land with its icon on the wrong side of the label. */
.about-contact{display:flex;flex-direction:column;gap:11px;margin:0 0 13px;padding:0;list-style:none;}
.about-contact li{display:flex;align-items:center;gap:12px;margin:0;font-size:14.5px;color:var(--text-2);}
/* A width rather than flex:1: a basis of 0 would stop the label sizing to its own text. */
.about-contact-label{font-weight:700;color:var(--text);min-width:92px;}

/* The glyph and the handle read as one target. */
.about-contact-link{display:inline-flex;align-items:center;gap:8px;
  color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.about-contact-link svg{flex:0 0 auto;}
.about-contact-link:hover{color:var(--text);}
.about-contact-link:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px;}

@media(max-width:767px){
  .legal-head{margin:8px 0 26px;padding-bottom:20px;}
  .legal-head h1{font-size:26px;}
  .legal-lead{font-size:15px;}
  .legal-section{margin-bottom:28px;}
  .legal-section h2{font-size:17.5px;}
  .about-contact li{flex-wrap:wrap;}
}