/*
 * The legal documents: /privacy, /terms, /data-deletion, /404.
 *
 * Loaded after `site.css`, which supplies the tokens, the faces, the grain and
 * the masthead. This file is only what a long legal document needs and the
 * marketing pages do not: a reading measure, numbered section headings, dense
 * tables, and a print stylesheet.
 *
 * ## The documents were not touched
 *
 * Retheming these on 2026-09-23 changed the stylesheet and added a masthead so
 * a reader can get back to the site. **No sentence of any policy changed**,
 * which was verified by extracting the rendered text of all four pages before
 * and after and comparing them byte for byte.
 *
 * The four classes below are the only ones the documents carry: `wrap`, `meta`,
 * `entity` and `tablewrap`. Everything else is plain HTML, which is what makes
 * restyling them safe.
 *
 * ## Why these are darker and looser than the marketing pages
 *
 * `site.css` sets headings at `line-height:1` with tight tracking, which is
 * right for a hero and wrong for a clause somebody has to read twice. Headings
 * here are reset to a reading rhythm and the measure is 68ch rather than the
 * marketing 46ch, because legal prose runs long and a short measure turns a
 * subclause into six ragged lines.
 *
 * ## Print
 *
 * These are the pages on the site most likely to be printed or saved as PDF, by
 * somebody who wants a record of the terms they agreed to. The print block
 * flips to black on white, drops the grain and the masthead, and prints link
 * targets after the link text so a paper copy is still usable.
 */

/* ---------------------------------------------------------- the column */
.wrap{
  width:min(100% - 2.5rem,68ch);
  margin-inline:auto;
  padding-block:clamp(7rem,12vw,9rem) clamp(5rem,9vw,7rem);
}

/* -------------------------------------------------------------- typography
   Headings reset out of the display rhythm `site.css` sets. A legal document
   is read, not scanned. */
.wrap h1{
  font-size:clamp(2rem,1.5rem + 2vw,2.875rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:0 0 .75rem;
}

/* The section rule is the structure: these documents are numbered clauses and
   the hairline is what makes the numbering visible before it is read. */
.wrap h2{
  font-size:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);
  line-height:1.25;
  letter-spacing:-.022em;
  margin:3.25rem 0 1rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule-soft);
}

.wrap h3{
  font-size:1.0625rem;
  line-height:1.35;
  letter-spacing:-.015em;
  margin:2rem 0 .6rem;
  color:var(--bone);
}

.wrap p,.wrap ul,.wrap ol{margin:0 0 1.1rem;color:var(--ash);line-height:1.7}
.wrap strong{color:var(--bone);font-weight:600}
.wrap em{color:var(--bone);font-style:italic}

.wrap ul,.wrap ol{padding-left:1.5rem}
.wrap li{margin:.45rem 0}
.wrap li::marker{color:var(--faint)}

/* The version and effective date under the title. */
.wrap .meta{
  font-family:"Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
  margin:0 0 2.5rem;
}
.wrap .meta strong{color:var(--ember);font-weight:500}
/* What changed since the previous version, when there is a previous version.
   Opted out of the rule above rather than put in a paragraph of its own: it
   belongs to the version line, and the version line is uppercase and tracked
   at .75rem, which is a wall for anything longer than a date. */
.wrap .meta span{
  display:block;margin-top:.6rem;
  font-family:"Plex Sans","Plex fallback",Arial,sans-serif;
  font-size:.8125rem;letter-spacing:0;text-transform:none;
  color:var(--ash);line-height:1.6;max-width:70ch;
}

/* The ABN block, which is a preformatted address. */
.wrap .entity{white-space:pre-line;color:var(--ash)}

/* ------------------------------------------------------------------ links
   Underlined rather than coloured. In a document this dense, a hue-only link
   is a link somebody misses, and there are too many of them for the accent to
   carry every one. */
.wrap a{
  color:var(--bone);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in oklab,var(--ember) 55%,transparent);
  text-decoration-thickness:1px;
  transition:color .2s,text-decoration-color .2s;
}
.wrap a:hover{color:var(--ember);text-decoration-color:var(--ember)}

/* ----------------------------------------------------------------- rules */
.wrap hr{
  border:0;height:1px;margin:2.75rem 0;
  background:linear-gradient(90deg,var(--ox-5),color-mix(in oklab,var(--ox-5) 20%,transparent),transparent);
}

/* ------------------------------------------------------------ quotations
   Statutory extracts and quoted obligations. */
.wrap blockquote{
  margin:0 0 1.25rem;
  padding:1rem 0 1rem 1.35rem;
  border-left:2px solid color-mix(in oklab,var(--ember) 60%,transparent);
  background:color-mix(in oklab,var(--ox-2) 30%,transparent);
  color:var(--ash);
}
.wrap blockquote p:last-child{margin-bottom:0}

.wrap code{
  font-family:"Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.875em;
  color:var(--bone);
  background:color-mix(in oklab,var(--ox-2) 45%,transparent);
  padding:.12em .35em;border-radius:2px;
}

/* --------------------------------------------------------------- tables
   The data tables in the privacy policy carry the categories of information
   collected, which is the part a reviewer reads most carefully. Same
   treatment as the platform table on /axiom so the site has one table. */
.wrap .tablewrap{overflow-x:auto;margin:0 0 1.5rem}
.wrap table{width:100%;border-collapse:collapse;font-size:.9375rem}
.wrap th{
  text-align:left;padding:.7rem 1rem .7rem 0;
  border-bottom:1px solid var(--rule);
  color:var(--faint);
  font-family:"Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  vertical-align:bottom;
}
.wrap td{
  padding:.9rem 1rem .9rem 0;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;color:var(--ash);line-height:1.55;
}
.wrap td:first-child{color:var(--bone)}

/* --------------------------------------------------------------- footer
   The documents carry their own three-link footer. It is restyled rather
   than replaced, because replacing it would be a markup change to a legal
   page for no reader benefit. */
.wrap footer{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  margin-top:4rem;padding-top:1.75rem;
  border-top:1px solid var(--rule);
}
.wrap footer a{
  color:var(--ash);text-decoration:none;
  font-family:"Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
}
.wrap footer a:hover{color:var(--ember)}

/* ---------------------------------------------------------------- print
   Most likely page on the site to be saved as a record of what was agreed to,
   so it has to survive leaving the screen. */
@media print{
  body::after{display:none}
  .masthead{display:none}
  body{background:#fff;color:#111}
  .wrap{width:auto;max-width:none;padding:0}
  .wrap h1,.wrap h2,.wrap h3,.wrap strong,.wrap td:first-child{color:#000}
  .wrap p,.wrap ul,.wrap ol,.wrap li,.wrap td,.wrap .entity{color:#222}
  .wrap h2{border-top:1px solid #bbb;page-break-after:avoid}
  .wrap h3{page-break-after:avoid}
  .wrap table,.wrap blockquote,.wrap li{page-break-inside:avoid}
  .wrap hr{background:#bbb}
  .wrap blockquote{background:none;border-left:2px solid #888;color:#222}
  .wrap code{background:#eee;color:#000}
  .wrap th{color:#444;border-bottom:1px solid #888}
  .wrap td{border-bottom:1px solid #ddd}
  .wrap a{color:#000;text-decoration:underline;text-decoration-color:#000}
  /* A paper copy with bare "click here" links is a paper copy nobody can
     act on, so external targets are printed after the text. Internal ones
     are left alone because the path on its own says where it goes. */
  .wrap a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555;word-break:break-all}
  .wrap footer{border-top:1px solid #bbb}
  .wrap footer a{color:#444}
}