/* ===========================================================================
   LOBBERO — long-form document pages (privacy, security, terms, cookies, DPA,
   FAQ). Loaded on top of site.css, which supplies the tokens and the shell.
   ---------------------------------------------------------------------------
   WHY THE TYPOGRAPHY CHANGES HERE AND NOWHERE ELSE.
   A policy is read, not scanned: long measure, a serif for headings, a mono for
   the metadata that has to be checked rather than read. Newsreader + IBM Plex
   are already self-hosted for exactly this in /fonts/legal.css — that file was
   added so the policy pages would stop sending every reader's IP to Google
   Fonts, and this is the only place those faces are used.

   THE COLOUR, HOWEVER, DOES NOT CHANGE. The drafts carried their own teal
   (#2E8B84) and their own ink; those are repointed to the brand tokens in
   site.css, so a policy page and the home page are recognisably one product.
   Nothing below defines a raw hex that is not a tint of a site.css token.
   =========================================================================== */

:root {
  --doc-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --doc-sans: "IBM Plex Sans", Inter, system-ui, -apple-system, sans-serif;
  --doc-mono: "IBM Plex Mono", var(--mono);

  --doc-surface: #ffffff;
  --doc-surface-2: #eff5f4;
  --doc-line: #dce8e7;
  --doc-line-soft: #edf3f2;
  /* #586e71, not #5e7477. The lighter value is 4.72:1 on porcelain but
     only 4.49:1 on --doc-surface-2, where table headers and the callout
     boxes sit — a hair under AA. #586e71 is 4.90:1 there and 5.15:1 on
     porcelain. */
  --doc-muted: #586e71;
  --doc-faint: #93a6a8;

  /* Callout tints. Amber for "you must do something about this", brand teal for
     "here is the mechanism". */
  /* #8c5f07, not #9c6b08: on --doc-amber-bg the lighter value measured
     4.14:1 and failed AA, and this is the colour of the "still to
     confirm" banner and every marked field. #8c5f07 is 4.98:1. */
  --doc-amber: #8c5f07;
  --doc-amber-bg: #fbf1da;
  --doc-amber-line: #ebd9ae;
  --doc-info-bg: #eaf4f1;
  --doc-info-line: #cfe6e0;
}

.doc {
  font-family: var(--doc-sans);
  font-size: 16px;
  line-height: 1.65;
}

/* `:not(.btn)` is a bug fix, not tidiness. `.doc a` (0,2,0) out-specifies
   `.btn-primary` (0,1,0), so every primary button inside a policy page was
   painted with teal TEXT on its teal background — 1.58:1, effectively
   invisible. Four buttons on /faq, four on /terms, four on /dpa, three on
   /cookies. A button brings its own colour; this rule is for links in prose. */
.doc a:not(.btn) {
  color: var(--violet);
  text-decoration: none;
}

.doc a:not(.btn):hover {
  text-decoration: underline;
}

/* ---------- Title block ---------- */
.doc .hero {
  padding: 56px 0 30px;
  max-width: 820px;
}

.doc .eyebrow {
  font-family: var(--doc-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 14px;
}

.doc h1 {
  font-family: var(--doc-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.doc .lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--doc-muted);
  max-width: 62ch;
}

.doc .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--doc-line);
  font-family: var(--doc-mono);
  font-size: 12.5px;
  /* --doc-muted, not --doc-faint. These labels are informational text and
     --doc-faint (#93A6A8) measures 2.42:1 on porcelain. --doc-muted is
     4.72:1. --doc-faint stays for placeholders and non-text icons, which is
     what design_system.md assigns palette.slateLight to. */
  color: var(--doc-muted);
}

.doc .meta b {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- The "complete this before publishing" banner ---------- */
.doc .review {
  background: var(--doc-amber-bg);
  border-top: 1px solid var(--doc-amber-line);
  border-bottom: 1px solid var(--doc-amber-line);
  margin: 10px 0 0;
}

.doc .review-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--doc-amber);
}

.doc .review-in svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
}

.doc .review-in b {
  color: #7a5205;
}

/* A field the operator still has to fill in. Deliberately loud: an unfilled
   entity name in a contract is a defect, and it must be impossible to publish
   one by accident. */
.doc .ph {
  font-family: var(--doc-mono);
  font-size: 0.92em;
  background: var(--doc-amber-bg);
  color: var(--doc-amber);
  border: 1px dashed var(--doc-amber-line);
  border-radius: 5px;
  padding: 1px 6px;
  /* NOT nowrap. "Article 27 representative — name and address" is 403px wide,
     and an unbreakable 403px inline box pushed a 320px phone into 127px of
     horizontal scroll. A marker that cannot wrap is a marker that breaks the
     page it is meant to annotate. */
  overflow-wrap: break-word;
  /* Keeps the dashed box from splitting mid-word where it can be avoided. */
  word-break: normal;
}

/* ---------- Two-column body ---------- */
.doc .grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 80px;
}

/* min-width: 0 on both tracks, and it is load-bearing.
   A grid item's automatic minimum size is its MIN-CONTENT width, so a wide
   table inside <article> sets the floor for the whole column even though the
   table sits in an `overflow-x: auto` wrapper and is perfectly able to scroll.
   With `.tw table { min-width: 620px }` that floor was 622px, so at 320px the
   single-column layout resolved its one `1fr` track to 622px and every policy
   page scrolled sideways by 326px. */
.doc .grid > * {
  min-width: 0;
}

.doc .toc {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  font-size: 14px;
}

.doc .toc h2 {
  font-family: var(--doc-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Same as .doc .meta — a section label is text, not a placeholder. */
  color: var(--doc-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

.doc .toc ol {
  list-style: none;
  counter-reset: toc;
  border-left: 1px solid var(--doc-line);
}

.doc .toc li {
  counter-increment: toc;
}

.doc .toc a {
  display: block;
  padding: 7px 12px;
  color: var(--doc-muted);
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.doc .toc a:hover {
  color: var(--ink);
  border-left-color: var(--iris);
  text-decoration: none;
}

.doc article > section {
  padding: 0 0 12px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.doc h2 {
  font-family: var(--doc-serif);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
}

.doc h2.sec {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--doc-line);
}

.doc h2.sec .n {
  font-family: var(--doc-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  /* --violet, not --iris: small coloured text on a light ground, which is
     what design_system.md assigns Deep Lagoon to. 3.05:1 -> 4.82:1. */
  color: var(--violet);
  flex: 0 0 auto;
}

.doc h3 {
  font-family: var(--doc-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 26px 0 8px;
}

.doc p,
.doc li {
  max-width: 74ch;
}

.doc article p {
  margin-bottom: 14px;
  color: var(--doc-muted);
}

.doc article p strong,
.doc article li strong {
  color: var(--ink);
  font-weight: 600;
}

.doc article ul,
.doc article ol {
  margin: 0 0 16px 20px;
  color: var(--doc-muted);
}

.doc article li {
  margin-bottom: 8px;
}

/* A defined term. Not a link — it is the sentence's own emphasis. */
.doc .term {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -0.42em 0 rgba(0, 161, 154, 0.14);
}

/* ---------- Callouts ---------- */
.doc .glance {
  background: var(--doc-info-bg);
  border: 1px solid var(--doc-info-line);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 8px;
}

.doc .glance h2 {
  margin: 0 0 12px;
  font-size: 1.45rem;
  border: 0;
  padding: 0;
}

.doc .glance ul {
  margin: 0 0 0 20px;
}

.doc .glance li {
  color: var(--ink);
}

.doc .box {
  background: var(--doc-surface-2);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 16px;
}

.doc .box p {
  margin-bottom: 8px;
}

.doc .box p:last-child {
  margin-bottom: 0;
}

.doc .box p.k {
  font-family: var(--doc-sans);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.doc .box.warn {
  background: var(--doc-amber-bg);
  border-color: var(--doc-amber-line);
}

.doc .box.warn p.k {
  color: var(--doc-amber);
}

/* ---------- Tables ----------
   design_system.md §8 rule 4: a table that stays tabular scrolls inside its
   own wrapper, and never clips. */
.doc .tw {
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  background: var(--doc-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
}

.doc .tw table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 14px;
}

.doc .tw th,
.doc .tw td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--doc-line-soft);
}

.doc .tw thead th {
  font-family: var(--doc-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--doc-muted);
  background: var(--doc-surface-2);
  white-space: nowrap;
}

.doc .tw tbody tr:last-child td {
  border-bottom: 0;
}

.doc .tw td {
  color: var(--doc-muted);
}

.doc .tw td:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* A lawful-basis / status label inside a table cell. */
.doc .lb {
  display: inline-block;
  font-family: var(--doc-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet);
  background: rgba(0, 161, 154, 0.09);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ---------- Control grid (the Security page's "at a glance") ---------- */
.doc .controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.doc .ctl {
  background: var(--doc-surface);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 18px;
}

.doc .ctl .ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(0, 161, 154, 0.09);
  color: var(--violet);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.doc .ctl .ico svg {
  width: 19px;
  height: 19px;
  display: block;
}

.doc .ctl b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}

.doc .ctl > span {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--doc-muted);
}

/* ---------- Rights cards ---------- */
.doc .rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.doc .rc {
  background: var(--doc-surface);
  border: 1px solid var(--doc-line);
  border-radius: 12px;
  padding: 16px 18px;
}

.doc .rc b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 4px;
  color: var(--ink);
}

.doc .rc span {
  font-size: 13.5px;
  color: var(--doc-muted);
}

/* ---------- End-of-document contact block ---------- */
.doc .fl {
  list-style: none;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc .fl li {
  font-size: 15px;
}

.doc .doc-cta {
  margin: 40px 0 0;
  background: var(--doc-surface-2);
  border: 1px solid var(--doc-line);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
}

.doc .doc-cta h2 {
  margin: 0 0 6px;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
}

.doc .doc-cta p {
  margin: 0 auto 18px;
  color: var(--doc-muted);
  max-width: 48ch;
}

.doc .doc-cta .row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .doc .grid {
    /* minmax(0, 1fr), never a bare 1fr — see the note on `.doc .grid > *`. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* The contents list stops being a rail and becomes a collapsed block at the
     top; sticky positioning in a single column just pins it over the text. */
  .doc .toc {
    position: static;
    background: var(--doc-surface);
    border: 1px solid var(--doc-line);
    border-radius: 14px;
    padding: 16px 18px;
  }

  .doc .toc ol {
    border-left: 0;
    columns: 2;
    column-gap: 20px;
  }

  .doc .toc a {
    padding: 8px 0;
    border-left: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .doc .toc a:hover {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .doc .hero {
    padding: 36px 0 24px;
  }

  .doc .toc ol {
    columns: 1;
  }

  .doc h2 {
    font-size: 1.55rem;
  }

  .doc h2.sec {
    flex-direction: column;
    gap: 4px;
  }
}