/* The legal documents — /privacy, /terms, /cookies, /impressum. One
   stylesheet for all four (their four inline <style> blocks were the same
   monolithic legacy sheet, give or take the table rules privacy needs).
   Restyled 2026-09-10 into the LifeOS design's type and palette, the same
   values the designer pages use, so a visitor who lands here from the new
   site does not walk into the old one (owner: "use the new website's
   header, footer, and visual style"). Long-form paragraphs follow the
   design's own long-form block — its FAQ answers: 17px/1.7, `--muted`,
   capped at 70 characters.

   Linked per page (not global) from each legal route's headExtra, so
   nothing here can reach another page; the chrome around it comes from
   app/site-chrome.css. Bare `main` / `h1` selectors are safe for the same
   reason. Colours are literal for consistency with site-chrome.css. */

.legal-page{
  --ink:#1d1d1f;--muted:#61656e;--blue:#006eff;--surface:#f5f6f8;--line:#e4e6eb;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
}
body{background:#fff}
.legal-page{
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
  width:min(760px,calc(100% - 40px));margin-inline:auto;padding:8px 0 0;
}
.legal-page ::selection{background:#dce9ff;color:var(--ink)}
.legal-page a:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:5px}

/* ---------- document head ---------- */
.legal-doc h1{
  font-family:var(--sans);font-size:clamp(36px,5vw,52px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-wrap:balance;margin:0 0 20px;
}
.legal-intro{font-size:20px;line-height:1.5;color:var(--muted);max-width:64ch}
.legal-badge{
  display:inline-block;margin-top:20px;padding:8px 16px;border-radius:999px;
  background:var(--surface);color:var(--muted);font-size:13px;font-weight:500;line-height:1;
}

/* ---------- body ---------- */
.legal-doc h2{font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink);margin:56px 0 14px;text-wrap:balance}
.legal-doc h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:36px 0 10px}
.legal-doc h4{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:26px 0 8px}
.legal-doc p{font-size:17px;line-height:1.7;color:var(--muted);margin:14px 0;max-width:70ch;text-wrap:pretty}
.legal-doc ul{margin:14px 0;padding-left:22px;list-style:disc}
.legal-doc ul ul{margin:6px 0}
.legal-doc li{font-size:17px;line-height:1.7;color:var(--muted);margin:8px 0;max-width:70ch}
.legal-doc li::marker{color:#b0b5bd}
.legal-doc b,.legal-doc strong{color:var(--ink);font-weight:600}
.legal-doc a{color:var(--blue);text-decoration:none;word-break:break-word}
.legal-doc a:hover{text-decoration:underline;text-underline-offset:4px}
.legal-doc hr{border:none;border-top:1px solid var(--line);margin:44px 0}

/* The bordered "who runs this" card (terms). */
.legal-owner{background:var(--surface);border-radius:20px;padding:26px 28px;margin:32px 0}
.legal-owner h2{margin-top:0;font-size:18px;letter-spacing:-.015em}
.legal-owner p{margin:6px 0;font-size:16px}

/* The data table (privacy). Scrolls inside its own box on a phone. */
.legal-table-wrap{margin:24px 0;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.legal-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.legal-table th,.legal-table td{padding:14px 16px;text-align:left;vertical-align:top;line-height:1.6;border-bottom:1px solid var(--line)}
.legal-table th{background:var(--surface);font-weight:600;color:var(--ink);white-space:nowrap}
.legal-table td{color:var(--muted)}
.legal-table tbody tr:last-child td{border-bottom:none}

@media(max-width:760px){
  .legal-page{width:calc(100% - 40px)}
  .legal-doc h2{margin-top:44px}
}

/* ===== Cookiebot's injected cookie declaration (/cookies) ===== */
/* cd.js writes the declaration into the page at runtime and brings its own
   <style> with it. Every one of its selectors is a single class, and that
   style element is injected AFTER this file's <link>, so at equal specificity
   Cookiebot wins — matching it needs exactly one extra class, hence the
   `.legal-doc` prefix on every rule below. No !important is needed.

   The defect this fixes is not cosmetic. Cookiebot sets
   `table-layout: fixed` with `overflow: hidden` + `text-overflow: ellipsis`
   on the header cells, so at narrow widths five columns are squeezed into
   ~330px: words break mid-character ("Maximum Storage Duration" renders as
   "Maxim Storag Duratio", "CookieConsent" as "CookieC onsent") and the whole
   Type column is clipped away with nothing to scroll to — content is lost,
   not just ugly. Content-sized columns plus a min-width, with the type block
   scrolling horizontally, is exactly what .legal-table already does for the
   privacy page's table, so the two now read the same.

   `overflow-wrap: break-word` is deliberately KEPT on cells: cookie names
   like `crisp-client%2Fsession%2F#GUID#` are single unbreakable tokens that
   would otherwise overflow. Under auto layout it only fires for those, not
   for ordinary words like "posthog.com". */
.legal-doc .CookieDeclarationType{
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:24px 0;overflow-x:auto;
}
.legal-doc .CookieDeclarationTypeHeader{
  font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);
}
.legal-doc .CookieDeclarationTypeDescription{
  font-size:17px;line-height:1.7;color:var(--muted);max-width:70ch;margin:10px 0 18px;
}
.legal-doc .CookieDeclarationIntro,
.legal-doc .CookieDeclarationLastUpdated,
.legal-doc .CookieDeclarationDialogText{
  font-size:17px;line-height:1.7;color:var(--muted);max-width:70ch;margin:14px 0;
}
.legal-doc .CookieDeclarationTable{
  table-layout:auto;min-width:640px;width:100%;border-collapse:collapse;font-size:14.5px;margin:0;
}
.legal-doc .CookieDeclarationTableHeader,
.legal-doc .CookieDeclarationTableCell{
  padding:14px 16px;line-height:1.6;vertical-align:top;text-align:left;
  border-bottom:1px solid var(--line);overflow:visible;text-overflow:clip;
}
/* Headers wrap rather than nowrap: the five nowrap minimums together exceeded
   the 758px article measure, which pushed the table into a horizontal scroll
   on DESKTOP, where the old fixed layout at least fitted. A two-line
   "Maximum Storage Duration" costs nothing and leaves Purpose the room it
   needs. .legal-table can afford nowrap because it has four short headers. */
.legal-doc .CookieDeclarationTableHeader{
  background:var(--surface);font-weight:600;color:var(--ink);
}
.legal-doc .CookieDeclarationTableCell{color:var(--muted);overflow-wrap:break-word}
/* The Name column carries unbreakable tokens (`crisp-client%2Fsession%2F#GUID#`),
   and under auto layout an unbreakable token sets the column's min-content
   width — so Name claimed ~230px and squeezed Purpose, the column that
   actually needs room, down to ~127px and many lines tall. `anywhere` (unlike
   `break-word`) lowers the intrinsic minimum, so the column can give space
   back. Scoped to the first cell only, so ordinary prose elsewhere in the
   table still breaks on word boundaries. */
.legal-doc .CookieDeclarationTableCell:first-child{overflow-wrap:anywhere}
/* ...with a floor, so `anywhere` only fires on the genuinely long tokens.
   Without it the column settled at ~129px and broke "CookieConsent" after
   twelve characters; 10rem fits the ordinary names and still lets the GUID
   one wrap. */
.legal-doc .CookieDeclarationTable th:first-child,
.legal-doc .CookieDeclarationTable td:first-child{min-width:10rem}
@media(max-width:760px){
  .legal-doc .CookieDeclarationType{padding:18px 16px}
}