/* =========================================================
   LEGAL PAGES — page-specific styles
   Used by legal-notice.html, privacy-policy.html, cookies-policy.html
   Loaded AFTER styles.css. Keep it small and additive.
   ========================================================= */

/* The legal pages don't have a hero, so reset the page to start
   below the fixed nav. */
.legal-page {
  padding: 140px 40px 80px;
  position: relative;
  z-index: 1;
}

/* The marketing page hides the bg-glow blobs and the top blue gradient
   of .bg-field behind its full-screen hero canvas; legal pages have no
   hero, so those blue accents leak in and visually thicken the fixed
   nav (the tinted band reads as part of the header). Suppress them
   here so the area directly under the nav stays a clean dark surface
   matching the scrolled state on the home page. */
.bg-glow--1,
.bg-glow--2 { display: none; }
.bg-field {
  background:
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(25, 227, 201, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

/* Reading-comfortable container — narrower than the marketing
   sections so long-form prose stays in a good measure (~70ch). */
.legal__container {
  max-width: 780px;
  margin: 0 auto;
}

/* "Back to home" link, set above the title. */
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 32px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.legal__back:hover {
  color: var(--accent);
  transform: translateX(-3px);
}
.legal__back svg {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--ease);
}

/* Page eyebrow + title block. */
.legal__head {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.legal__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: 14px;
  /* descender protection — same pattern as title-line--accent */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.legal__updated {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Long-form prose block. */
.legal__prose {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-soft);
}
.legal__prose h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 56px 0 18px;
}
.legal__prose h2:first-child { margin-top: 0; }
.legal__prose h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 36px 0 12px;
}
.legal__prose p {
  margin: 0 0 18px;
}
.legal__prose ul {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.legal__prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.legal__prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.legal__prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(25, 227, 201, 0.3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal__prose a:hover {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}
.legal__prose strong {
  color: var(--text);
  font-weight: 500;
}

/* Identity / contact block — a slightly framed callout used in the
   Legal Notice and Privacy Policy for the SAS details. */
.legal__identity {
  margin: 24px 0;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 15px;
}
.legal__identity p { margin: 0 0 6px; }
.legal__identity p:last-child { margin-bottom: 0; }
.legal__identity strong { color: var(--text); }

/* Mobile tweaks. */
@media (max-width: 720px) {
  .legal-page { padding: 110px 22px 60px; }
  .legal__head { margin-bottom: 36px; padding-bottom: 22px; }
  .legal__prose { font-size: 15.5px; line-height: 1.72; }
  .legal__prose h2 { margin-top: 44px; }
  .legal__identity { padding: 18px 20px; }
}