/* =================================================================
   Shared styles for the legal pages (/privacy, /cookies, /legal).

   The landing page keeps its CSS inline because it is one file with
   one job. These three pages are plain documents that share the same
   look, so their styles live here instead of being copied three times.
   Tokens and font faces mirror the ones in index.html - if you change
   a colour or a typeface there, change it here too.
   ================================================================= */

@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:      #ffffff;
  --ink:     #111111;
  --ink-80:  #333333;
  --muted:   #8a8a8a;
  --line:    #e6e6e5;
  --pad:     40px;
  --max:     1240px;
  --prose:   680px;   /* comfortable reading width */
  --todo:    #fff1c2;  /* highlight behind every blank left to fill */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-80);
  font-family: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* --- Header -------------------------------------------------------
   A plain bar rather than the landing page's floating marks: these
   pages scroll as documents, with nothing to sample behind them. */
header { border-bottom: 1px solid var(--line); }
.bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.mark .logo { width: 22px; height: 22px; display: block; flex: none; color: var(--ink); }
.mark span { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.back { font-size: 14px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); }

/* --- Document ------------------------------------------------------ */
main { padding: 72px 0 96px; }
article { max-width: var(--prose); }

h1 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  margin: 0;
}
h2 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 21px;
  line-height: 1.3;
  margin: 48px 0 12px;
}
h3 {
  color: var(--ink);
  font-weight: 500;
  font-size: 17px;
  margin: 28px 0 8px;
}
p, li { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li::marker { color: var(--muted); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--muted); }

/* The date sits under the title, and the note flags the page as a
   draft. Both are deliberately quiet. */
.updated { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.lede { font-size: 18px; margin-top: 28px; }

/* Draft banner: a standing reminder that nothing here has been through
   a lawyer yet. Delete the block from each page once it has. */
.draft-note {
  margin: 32px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

/* Every blank that still needs a real value. Highlighted so none of
   them can reach a published page unnoticed - search for "todo" to
   find them all. */
.todo {
  background: var(--todo);
  /* Padding cancelled by the negative margin, so a highlight never
     opens a gap before the comma that follows it. */
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 3px;
  font-weight: 500;
  /* Long blanks wrap like any other text; clone keeps the highlight's
     padding on every line rather than only the first. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Definition-style blocks: "what we collect" and the company details. */
.rows { margin: 0 0 14px; }
.rows > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.rows > div:first-child { border-top: 1px solid var(--line); }
.rows dt, .rows .k { color: var(--ink); }
.rows dd, .rows .v { margin: 0; }

/* --- Footer -------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding: 40px 0; }
.foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-left { display: grid; gap: 8px; }

@media (max-width: 900px) {
  :root { --pad: 24px; }
  main { padding: 48px 0 72px; }
  .rows > div { grid-template-columns: 1fr; gap: 2px; }
}