/* THE PRIVACY PAGE.
   Same shell as the signing page on purpose — a customer arrives here from a link on that form,
   and a document that looks like a different company's website invites them to doubt it. The
   width, the card, the type and the colours are app.css's; what is added is reading typography,
   because this is 1,200 words on a phone rather than a form with eight boxes in it.

   SEPARATE FILE, NOT AN ADDITION TO app.css. app.css is fetched by every customer mid-signing and
   is stamped by its own hash; growing it by a third for a page almost none of them will open puts
   the cost on the wrong journey. */

:root{color-scheme:light}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin:0;background:#f4f5f7;color:#1c1c1e}
.wrap{max-width:34rem;margin:0 auto;padding:1rem}
.card{background:#fff;border:1px solid #e4e4e7;border-radius:12px;padding:1.25rem;margin:1rem 0}

h1{font-size:1.3rem;line-height:1.3;margin:0 0 .25rem}
.updated{color:#666;font-size:.85rem;margin:0 0 1.25rem}

/* 1.75rem of space above a heading and .35rem below it, so a heading belongs to the text UNDER
   it rather than floating between two blocks. On a long policy read by thumb-scrolling that is
   the difference between finding "How long we keep it" and scrolling past it twice. */
h2{font-size:1rem;margin:1.75rem 0 .35rem;color:#111;letter-spacing:.01em}
p{margin:.55rem 0}

/* The bullets carry the substance in this document — the field list, the retention rules and who
   can see what are all lists. Indented enough to read as a list, not so far that a 320px screen
   loses a third of its width to the gutter. */
ul{margin:.55rem 0;padding-left:1.15rem}
li{margin:.45rem 0}

strong{font-weight:650}
a{color:#1c6cf3}

/* LINKS STAY LEGIBLE WHEN THE CONTACT ADDRESS IS THE WHOLE POINT. An email that wraps mid-word on
   a narrow phone is one a customer copies wrongly. */
a[href^="mailto:"]{overflow-wrap:anywhere}

@media (prefers-color-scheme: dark){
  /* The signing form is light-only (color-scheme:light) because its inputs and the signature pad
     are drawn against white. This page has neither, so it can honour a reader's dark setting —
     and a wall of small print at full brightness is exactly the thing people read at night. */
  :root{color-scheme:dark}
  body{background:#131417;color:#e9e9ec}
  .card{background:#1b1c20;border-color:#303138}
  h1,h2{color:#f4f4f6}
  .updated{color:#9a9aa2}
  a{color:#7ab0ff}
}

/* ── ADDED 2026-10-13 WITH THE REVISED POLICY AND THE PER-COMPANY PAGE. ────────────────────
   Three classes, and each exists because a sentence on these pages has to be READ differently
   from the paragraph beside it — not for decoration. */

/* THE CONTACT BLOCK IS AN ADDRESS, SO IT IS SET AS ONE. A postal address run together as prose
   is the thing a reader has to re-parse; <br> lines plus a hair more leading make it scannable,
   and `overflow-wrap:anywhere` keeps a long street line from pushing the card wide on a 320px
   phone (the same failure the mailto rule above already guards against). */
.contact{line-height:1.5;overflow-wrap:anywhere}

/* A FIELD THE DOCUMENT IS STILL WAITING FOR, MARKED SO IT CANNOT BE READ AS SETTLED.
   The alternative — leaving "[INSERT …]" in running text, or quietly guessing — is how a draft
   gets treated as final. An amber rule down the side says "this line is not finished" at a
   glance, and the sentence itself says who has to finish it. It is deliberately NOT a bright
   warning box: this is a document, and a reader skimming for their own rights should not be
   pulled to an editorial note first. */
.pending{border-left:3px solid #e0a416;padding-left:.7rem;color:#4a4a4f}

/* THE DRAFT BANNER, ABOVE THE CARD RATHER THAN INSIDE IT, so it reads as something said ABOUT
   the document rather than a clause of it. It carries the only status a visitor needs: not in
   force, not linked from any form, and what is outstanding. */
.banner{background:#fff8e6;border:1px solid #efd58a;border-radius:12px;padding:.9rem 1rem;
  margin:1rem 0 0;font-size:.92rem;line-height:1.55;color:#4a3c15}
.banner strong{display:block;margin-bottom:.2rem;color:#6b5312}

@media (prefers-color-scheme: dark){
  .pending{border-left-color:#c79a2e;color:#b9b9c0}
  .banner{background:#2a2414;border-color:#55471f;color:#e6d9ae}
  .banner strong{color:#f3e3b4}
}