/* Castflow legal pages — shared styles for /privacy.html and /terms.html.
   No build step: plain CSS, loaded with a ?v= cache-buster from each page.

   THREE surfaces load this file and must stay in sync:
     public/privacy.html     — file-backed policy
     public/terms.html       — file-backed policy
     utils/policyPage.js     — the shell used once a policy is edited from the
                               admin dashboard (routes/policyPages.js)

   THE LOOK IS castflow.co's (CFT-1324, 2026-08-12). These pages used to render
   as a white card on grey — the dashboard's own chrome — while the identical
   documents linked from the marketing site were drawn in the site's editorial
   style. Same link, same text, two different products to look at. The design
   below is the one the landing site used for /confidentialite/ before that page
   was retired into a redirect: Geist, a sand wash under the opening screen, a
   760px measure, teal accents, and the site's black footer. Anything you change
   here should still be recognisable as castflow.co.

   The class names are part of the contract. Once an admin saves a policy, the
   inner HTML of each <section data-lang="…"> is stored verbatim in the database
   and re-rendered through utils/policyPage.js — so `.intro`, `.footer-links`,
   `.meta`, `.lede`, `.callout`, `.annexe` and the bare h2/p/ul/table/strong/em
   rules below have to keep working on text written months ago. Rename one and
   old stored bodies lose their styling. */

:root {
  /* castflow.co's teal, not the dashboard's #006a85 — these pages read as the
     marketing site now, and the two greens differ enough to notice side by side. */
  --teal: #007692;
  --teal-dark: #005f76;
  --teal-wash: #eef6f8;
  --teal-line: rgba(0, 118, 146, .4);
  --ink: #0a0a0a;
  --body: rgba(0, 0, 0, .70);
  --mut: rgba(0, 0, 0, .45);
  --line: rgba(0, 0, 0, .10);
  --sand: #f6f4f1;
  --card: #ffffff;
  --measure: 760px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Geist is castflow.co's typeface; the stack behind it is what the dashboard
     uses, so a blocked Google Fonts request degrades to the app's own look
     rather than to Times. */
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The sand wash under the opening screen, fading back to white before the
   document proper starts. On the landing page this was two stacked gradient
   sections; a legal document is one long column, so it is one background that
   stops rather than a band that repeats behind 500 lines of prose. */
body::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1100px; z-index: -1;
  background: linear-gradient(to bottom, #ffffff 0, var(--sand) 380px, var(--sand) 62%, #ffffff 100%);
}

a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--teal-dark); }

/* ---- Top bar ------------------------------------------------------------
   The site's floating pill nav. It is a link back to castflow.co and a language
   jump, nothing else: there is no menu to open on a legal page. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 10px 16px;
  background: transparent;
}
.topbar .nav-pill {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  min-height: 66px; padding: 0 14px 0 22px;
  background: var(--card); border-radius: 999px;
  box-shadow: 2px 10px 50px rgba(0, 0, 0, .18);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.topbar .brand img.mark { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; display: block; }
.topbar .brand img.wordmark { height: 22px; width: auto; object-fit: contain; display: block; }
.topbar .spacer { flex: 1; }
.topbar .backlink {
  font-size: 15px; font-weight: 500; color: #1e1e1e; text-decoration: none;
  padding: 9px 22px; border-radius: 999px; white-space: nowrap;
}
.topbar .backlink:hover { background: #f3f4f6; color: #1e1e1e; }

/* Anchor pills that jump to the other language's section. Not a toggle: both
   languages are always on the page (see utils/policyPage.js). The reader's own
   language is printed first, here and in the document. */
.lang-nav { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 13px; font-weight: 500; }
.lang-nav a { color: rgba(0, 0, 0, .4); text-decoration: none; padding: 6px 6px; }
.lang-nav a:hover { color: #000; }
.lang-nav a[aria-current] { color: #000; }
.lang-nav .sep { color: rgba(0, 0, 0, .2); }

/* ---- Document -----------------------------------------------------------
   A 760px measure on the page itself — no card, no border. */
.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 46px 24px 24px;
}

/* Each language section opens like an article: eyebrow, title, lede, meta. */
.doc > section { scroll-margin-top: 96px; }

/* "LÉGAL" over the title. Drawn from CSS rather than written into the markup
   because the same rule then decorates a body stored in the database months
   ago, and it cannot be duplicated by a body that happens to carry its own. */
.doc > section[data-lang]::before {
  content: "Légal";
  display: block;
  font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 18px; padding-left: 34px;
  background-image: linear-gradient(to right, var(--teal-line), var(--teal-line));
  background-repeat: no-repeat;
  background-size: 24px 1px;
  background-position: left center;
}
.doc > section[data-lang="en"]::before { content: "Legal"; }

.doc h1 {
  font-size: 52px; font-weight: 500; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.08;
  margin: 0 0 20px;
}
.doc h2 {
  font-size: 24px; font-weight: 500; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.25;
  margin: 2.75rem 0 1rem;
}
.doc h3 { font-size: 19px; font-weight: 500; color: var(--ink); margin: 2rem 0 .75rem; }
.doc p { font-size: 17px; line-height: 1.75; margin: 0 0 1.5rem; }
.doc strong { color: var(--ink); font-weight: 600; }
/* Italic at the inherited size: the v2 bodies use <em> INLINE for statute names
   ("Loi sur la protection des renseignements personnels dans le secteur privé")
   and foreign terms, mid-sentence. It used to be muted non-italic because its
   only job was the "Last updated:" line — that line is `.meta` now. */
.doc em { font-style: italic; }
.doc sup { font-size: .7em; line-height: 0; vertical-align: super; }

/* Bulleted lists get the site's small teal square instead of a disc. Ordered
   lists keep their numbers — a numbered clause is referred to by its number. */
.doc ul {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.doc ul > li { position: relative; padding-left: 1.65rem; font-size: 17px; line-height: 1.75; }
.doc ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--teal);
}
.doc ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.doc ol > li { font-size: 17px; line-height: 1.75; margin: 0 0 .75rem; }
.doc li > ul, .doc li > ol { margin-top: .75rem; margin-bottom: 0; }

/* Version / effective-date line under the h1. */
.doc .meta { color: var(--mut); font-size: 14px; line-height: 1.6; margin: 0 0 26px; }
/* Opening summary paragraph of a document. */
.doc .lede { font-size: 18px; color: rgba(0, 0, 0, .6); line-height: 1.5; margin: 0 0 26px; }

/* ---- Tables -------------------------------------------------------------
   The v2 policies state who is responsible for what, which processor sits
   where, and how long each category is kept, as tables. They scroll inside
   their own wrapper on a phone rather than widening the page. */
.doc table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 15px;
  display: block; overflow-x: auto;
}
.doc th, .doc td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6;
}
.doc th {
  color: var(--ink); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom-color: rgba(0, 0, 0, .18); white-space: nowrap;
}
.doc tr:last-child td { border-bottom: 0; }

/* A point the reader must not skim past — an obligation, a limit, a "this is
   never sent anywhere". Same accent as `.intro`, which is a preamble box. */
.doc .callout {
  background: var(--sand); border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 2rem 0;
  font-size: 16px;
}
.doc .callout p { font-size: 16px; margin: .5rem 0; }
.doc .callout p:first-child { margin-top: 0; }
.doc .callout p:last-child { margin-bottom: 0; }

/* Annex A of the Terms — the processing agreement. A document inside the
   document, so it gets an h1 of its own and a heavier rule above it. */
.doc .annexe { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.doc .annexe h1 { font-size: 34px; margin-bottom: 18px; }

/* Preamble / definitions box inside a policy body. Stored bodies use it. */
.intro {
  border-left: 3px solid var(--teal); background: var(--teal-wash);
  border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 2rem 0;
  font-size: 16px;
}
.intro p { font-size: 16px; }
.intro p:last-child { margin-bottom: 0; }

/* "Both languages are on this page" note, above the first section. */
.lang-note {
  border-left: 3px solid rgba(0, 0, 0, .12);
  padding: 4px 0 4px 18px; margin: 0 0 44px;
  font-size: 14px; color: var(--mut);
}
.lang-note p { margin: 4px 0; font-size: 14px; line-height: 1.6; }

/* Cross-link to the other policy + copyright, at the end of each section. */
.footer-links {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  color: var(--mut); font-size: 14px;
}
.footer-links p { font-size: 14px; margin: 0; line-height: 1.6; }

/* Separator between the two language sections. */
.lang-sep { border: 0; border-top: 1px solid var(--line); margin: 5rem 0 4rem; }

/* ---- Actions under the document ----------------------------------------
   The landing page closed every article on a black pill back to the site. */
.doc-actions {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 24px 80px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.doc-actions .btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  background: #000; color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 500; height: 48px; padding: 0 28px; border-radius: 999px;
  transition: background-color .2s ease;
}
.doc-actions .btn-dark:hover { background: var(--teal); color: #fff; }
.doc-actions .btn-quiet { font-size: 15px; font-weight: 500; color: var(--teal); text-decoration: none; }
.doc-actions .btn-quiet:hover { opacity: .7; }

/* ---- Site footer --------------------------------------------------------
   castflow.co's black footer, so the page ends where the site ends. */
.site-footer {
  background: #000; color: #fff;
  padding: 64px 24px 32px;
  overflow: hidden;
}
.site-footer .cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
  max-width: 1152px; margin: 0 auto 64px;
}
.site-footer h3 {
  color: #fff; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; margin: 0 0 20px; text-align: center;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-footer a { color: rgba(255, 255, 255, .5); font-size: 14px; text-decoration: none; transition: color .3s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .wordmark { display: block; width: 100%; height: auto; user-select: none; }
.site-footer .bar {
  max-width: 1152px; margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.site-footer .bar p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .3); }
.site-footer .bar .social { display: flex; align-items: center; gap: 24px; }
.site-footer .bar a { font-size: 12px; color: rgba(255, 255, 255, .3); }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .topbar { padding: 8px 12px; }
  .topbar .nav-pill { min-height: 58px; padding: 0 10px 0 16px; gap: 10px; }
  .topbar .brand img.wordmark { display: none; }
  .topbar .backlink { padding: 8px 14px; font-size: 14px; }
  .doc { padding: 32px 20px 16px; }
  .doc h1 { font-size: 34px; }
  .doc h2 { font-size: 21px; }
  .doc .annexe h1 { font-size: 27px; }
  .doc p, .doc ul > li, .doc ol > li { font-size: 16px; }
  .doc .lede { font-size: 17px; }
  .doc-actions { padding: 0 20px 56px; }
  .site-footer { padding: 48px 20px 28px; }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 44px; }
  .site-footer .bar { justify-content: center; text-align: center; }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  body::before { display: none; }
  .topbar, .lang-nav, .doc-actions, .site-footer { display: none; }
  .doc { max-width: none; margin: 0; padding: 0; }
  .doc h1 { font-size: 28px; }
  .doc h2 { font-size: 18px; break-after: avoid; }
  .doc p, .doc ul > li, .doc ol > li { font-size: 11pt; line-height: 1.5; }
  a { color: var(--ink); text-decoration: none; }
}