/* HSH Design — the legal documents (/privacy, /your-data, /terms, /dpa,
   /cookies). Loaded via $pageStyles, so the twelve pages that are not legal
   documents never download it.

   These pages have a job the rest of the site does not: they are long, they
   are read under suspicion, and they are read on a phone as often as not —
   somebody forwarded the link during a procurement conversation. So the
   geometry here optimises for being read rather than for being looked at:
   a hard measure on every column of prose, clause numbers that stay visible
   next to what they number, and a contents list that actually gets used.

   It follows the house rules the rest of the site keeps — 56px gutters,
   2.5px section rules, 1px hairlines inside them, mono for anything that is
   a label rather than a sentence — so a legal page reads as the same site
   rather than a bolted-on document viewer. */

/* ---------- Document head ---------- */

.legal-hero {
  padding: 72px 56px 56px;
  display: grid;
  gap: 22px;
  border-bottom: 2.5px solid var(--ink);
}

.legal-hero__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-hero__title {
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: -.028em;
  font-weight: 600;
  max-width: 18ch;
}

.legal-hero__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

.legal-hero__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- The short version ----------

   The promises in plain language, above the contents, because the reader who
   only reads one thing should read the thing that is actually the point. It
   is a summary and it says so; the sections below are what governs. */

.legal-summary {
  padding: 44px 56px 48px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}

.legal-summary__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}

.legal-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 80ch;
}

.legal-summary__list li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.005em;
}

/* Lime tick rather than a bullet: these are commitments, not a list of
   topics, and the accent is the site's one colour. */
.legal-summary__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  background: var(--lime);
}

/* ---------- Contents ---------- */

.legal-toc {
  padding: 44px 56px 48px;
  border-bottom: 2.5px solid var(--ink);
}

.legal-toc__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 56px;
  max-width: 92ch;
}

.legal-toc__list li {
  break-inside: avoid;
  margin-bottom: 2px;
}

.legal-toc__list a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 16px;
  border-bottom: 1px solid transparent;
}
.legal-toc__list a:hover { border-bottom-color: var(--lime); }

.legal-toc__n {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
  flex: 0 0 auto;
}

/* ---------- A clause ----------

   Number in the left column, prose in the right, on the same grid as the
   trust rows on /security. scroll-margin-top exists because every heading is
   a link target from the contents: without it the browser parks the heading
   flush against the top edge and the reader cannot tell they arrived. */

.legal-section {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 24px;
}

.legal-section:last-of-type { border-bottom: 2.5px solid var(--ink); }

.legal-section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 40px 32px 44px 56px;
  border-right: 1px solid var(--rule);
}

.legal-section__n {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--muted);
  flex: 0 0 auto;
}

.legal-section__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.legal-section__body {
  padding: 40px 56px 44px 32px;
  max-width: 78ch;
}

.legal-section__body p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
}
.legal-section__body p + p { margin-top: 16px; }

/* A paragraph that follows a list, a row set or a fact chip needs the same
   air as one following another paragraph. Without this the sentence after a
   list sits flush against its last item and reads as part of it. */
.legal-section__body .legal-list + p,
.legal-section__body .legal-rows + p,
.legal-section__body .legal-fact + p { margin-top: 18px; }
.legal-section__body strong { color: var(--ink); font-weight: 500; }

.legal-section__body a {
  border-bottom: 1px solid var(--muted);
}
.legal-section__body a:hover { border-bottom-color: var(--lime); }

/* ---------- Blocks inside a clause ---------- */

.legal-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.legal-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--muted);
}

/* Label/explanation pairs — a definitions table without being a table, so it
   stacks on a phone instead of scrolling sideways. */
.legal-rows {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}

.legal-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.legal-row__what {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}

.legal-row__detail {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* The checkable figure, same component as /security's — a period, a count, a
   mechanism. Used here for the numbers a customer would otherwise have to
   take on trust. */
.legal-fact {
  display: inline-block;
  margin-top: 18px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 6px 10px;
}

/* ---------- The other documents ---------- */

.legal-related {
  padding: 44px 56px 48px;
  border-bottom: 2.5px solid var(--ink);
}

.legal-related__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.legal-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.legal-related__links a {
  font-size: 17px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ink);
}
.legal-related__links a:hover { border-bottom-color: var(--lime); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .legal-hero { padding: 56px 32px 44px; }
  .legal-hero__title { font-size: 42px; }
  .legal-summary, .legal-toc, .legal-related { padding-left: 32px; padding-right: 32px; }
  .legal-section__head { padding-left: 32px; }
  .legal-section__body { padding-right: 32px; }
  .legal-section { grid-template-columns: 220px 1fr; }
}

@media (max-width: 760px) {
  .legal-hero { padding: 40px 20px 32px; gap: 16px; }
  .legal-hero__title { font-size: 31px; line-height: 1.06; max-width: none; }
  .legal-hero__lede { font-size: 16px; }
  .legal-hero__meta { gap: 8px 20px; }

  .legal-summary { padding: 32px 20px 34px; }
  .legal-summary__list li { font-size: 16px; }

  .legal-toc { padding: 32px 20px 34px; }

  /* One column: two columns of contents on a 390px screen means a six-word
     entry wrapping three times, which is harder to scan than a longer list. */
  .legal-toc__list { columns: 1; }
  /* Same 44px touch target the footer links hold to. */
  .legal-toc__list a { min-height: 44px; align-items: center; padding: 4px 0; }

  /* The clause number moves from its own column to a line above the title.
     Keeping the two-column grid here would leave the prose in a 40%-width
     ribbon, and dropping the number entirely would break every link from the
     contents into an unnumbered wall of text. */
  .legal-section { grid-template-columns: 1fr; }
  .legal-section__head {
    display: block;
    padding: 32px 20px 0;
    border-right: none;
  }
  .legal-section__n { display: block; margin-bottom: 10px; }
  .legal-section__title { font-size: 19px; }
  .legal-section__body { padding: 18px 20px 32px; max-width: none; }

  .legal-row { grid-template-columns: 1fr; gap: 6px; }

  .legal-related { padding: 32px 20px 36px; }
  .legal-related__links { flex-direction: column; gap: 0; }
  .legal-related__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom: none;
    font-size: 17px;
  }
}