/* ============================================================
   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 42px;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: feature cards ──────────────────────────────────── */
/* Every rule in this block is written as `.legal-section .about-*` on purpose. The prose defaults
   above are element selectors inside .legal-section, so a lone class here would lose to them on
   specificity rather than on intent, and the list would keep its bullets and its indent. */
.legal-section .about-features{display:grid;gap:12px;margin:18px 0 16px;padding:0;list-style:none;
  /* auto-fit rather than a fixed column count: one column on a phone, two once the column is wide
     enough for a 240px card, without a breakpoint per layout. */
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.legal-section .about-feature{margin:0;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm);}
.legal-section .about-feature h3{margin:0 0 6px;font-size:14px;font-weight:800;letter-spacing:-.01em;
  line-height:1.3;color:var(--text);}
.legal-section .about-feature p{margin:0;font-size:13.5px;line-height:1.58;color:var(--text-2);}

/* ── About: data sources ───────────────────────────────────── */
/* Set apart as a panel rather than running on as another block of prose: it is the one section that
   answers "where does any of this come from", which is the question a sceptical reader arrives with.
   The groups and their entries are rendered from configuration, so this styles a variable number of
   both — nothing here may assume how many of either there are. */
.about-sources{padding:22px;border:1px solid var(--border-2);border-radius:var(--radius-md);
  background:var(--surface-2);}

/* The rule that separates one group from the next, dropped on the last so the panel does not end
   with a line and then padding. */
.about-source-group{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);}
.about-source-group:last-of-type{margin-bottom:2px;}
.legal-section .about-source-group h3{margin:0 0 6px;font-size:14.5px;font-weight:800;
  letter-spacing:-.01em;color:var(--text);}
.legal-section .about-source-group p{margin:0 0 11px;font-size:13.5px;line-height:1.58;
  color:var(--text-3);}

/* Chips rather than a bulleted list: these are names, and a reader scans them for one they know
   rather than reading down. The element-selector defaults inside .legal-section own the bullet and
   the indent, so this has to out-specify them. */
.legal-section .about-source-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  list-style:none;}
.legal-section .about-source-list li{margin:0;font-size:13.5px;line-height:1.3;}
.legal-section .about-source-list li>a,
.legal-section .about-source-list li>span{display:inline-block;padding:7px 12px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;}
.legal-section .about-source-list li>a{color:var(--green-deep);}
.legal-section .about-source-list li>a:hover{border-color:var(--green);color:var(--text);}
.legal-section .about-source-list li>a:focus-visible{outline:2px solid var(--green);
  outline-offset:2px;}

.legal-section .about-source-note{margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--text-3);}

/* ── 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:34px;}
  .legal-section h2{font-size:17.5px;}
  .about-contact li{flex-wrap:wrap;}
  /* One column below 240px of usable width, and less padding around the sources panel: at 320px the
     gutter plus a 22px inset leaves too little for a card to breathe. */
  .legal-section .about-features{grid-template-columns:1fr;}
  .about-sources{padding:18px 16px;}
}