/* ==========================================================================
   The legal pages: Privacy, Legal notice, Terms, Cookies (templates/marketing/legal_page.html).

   The white world of the home page, without its motion: a white wall with a
   little still light at the top, one sentence, then the facts in rows drawn
   with hairlines, a caption on the left and the words on the right.
   What is still missing is shown in brackets, never guessed (.legal__missing).
   ========================================================================== */

.page-legal {
  --ink-cool: #0e1114;
  --muted-cool: #646a72;
  --fg: var(--ink-cool);
  --muted: var(--muted-cool);
  --line: rgb(14 17 20 / 0.1);
  background: #fdfdfc;
  color: var(--ink-cool);
}
html:has(body.page-legal) { background: #fdfdfc; }
.page-legal .topbar:not([data-open="true"]) { color: var(--ink-cool); background: linear-gradient(#fdfdfc 40%, rgb(253 253 252 / 0)); }

/* The light: the same three colours as the home page, resting at the top of the wall. */
.legal { position: relative; isolation: isolate; padding: calc(var(--bar) + clamp(4rem, 14svh, 9rem)) var(--gutter) clamp(5rem, 14svh, 9rem); }
.legal::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 34rem; pointer-events: none; z-index: -1;
  background:
    radial-gradient(40rem 12rem at 18% 0%, rgb(160 184 240 / 0.28), transparent 70%),
    radial-gradient(34rem 10rem at 62% 4%, rgb(248 222 168 / 0.3), transparent 70%),
    radial-gradient(28rem 12rem at 96% 14%, rgb(244 172 180 / 0.22), transparent 70%);
}

.legal__head { max-width: 1180px; margin-inline: auto; display: grid; gap: 1.4rem; padding-bottom: clamp(3.5rem, 10svh, 6rem); }
.legal__label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted-cool); }
.legal__title {
  max-width: 22ch; font-size: clamp(1.9rem, 4.2vw, 4.2rem); font-weight: 400; line-height: 1.08;
  letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance;
}
.legal__lead { max-width: 44ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--muted-cool); }

.legal__rows { max-width: 1180px; margin-inline: auto; border-top: 1px solid rgb(14 17 20 / 0.16); }
.legal__row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0.6rem 2rem; align-items: baseline;
  padding: 1.5rem 0 1.6rem; border-bottom: 1px solid rgb(14 17 20 / 0.08);
}
.legal__row dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-cool); }
.legal__row dd { max-width: 46ch; font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.55; letter-spacing: -0.005em; }
.legal__row dd p + p { margin-top: 0.3rem; }
/* The promise of the Terms: the one line in slightly larger words. */
.legal__row--promise dd { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.35; }

.legal__missing {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 6px;
  background: rgb(242 221 164 / 0.35); color: #6b5212; font-size: 0.92em;
}
.legal__link { text-decoration: underline; text-decoration-color: rgb(14 17 20 / 0.25); text-underline-offset: 0.24em; text-decoration-thickness: 1px; transition: text-decoration-color 0.3s; }
.legal__link:hover { text-decoration-color: currentColor; }
.page-legal :focus-visible { outline: 2px solid var(--focus, #5a4fd8); outline-offset: 3px; }

.legal__after { max-width: 1180px; margin: 2.2rem auto 0; color: var(--muted-cool); }
.legal__button {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 calc(1.5rem - 0.22em) 0 1.5rem; border-radius: 99px;
  border: 1px solid rgb(14 17 20 / 0.24); color: var(--ink-cool);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  transition: border-color 0.3s ease;
}
.legal__button:hover { border-color: var(--ink-cool); }

@media (max-width: 700px) {
  .legal__row { grid-template-columns: 1fr; padding: 1.2rem 0 1.3rem; }
}