/**
 * Copyright (c) 2026 KDTech
 * Author: david@KDTech
 * All rights reserved.
 *
 * Tilefold website — legal pages
 *
 * Long-form reading layout for the Privacy Policy (and later pages like it):
 * a static navigation bar, one narrow column of text, headings with room to
 * breathe, readable lists and links that look like links. Builds on the
 * tokens and base layers; logical properties keep the Arabic (RTL) mirror
 * correct if the page is translated.
 */

.legal-nav {
  position: sticky;
  background: rgb(10 11 16 / 0.86);
  border-block-end-color: var(--line);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.legal-nav .back {
  margin-inline-start: auto;
  color: var(--text-2);
  font-size: 15px;
}

.legal-nav .back:hover {
  color: var(--text-1);
}

.legal {
  padding-block: clamp(48px, 8vw, 96px) clamp(64px, 9vw, 120px);
}

.legal-body {
  max-width: 720px;
  margin-inline: auto;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
}

.legal-body h1 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 650;
}

.legal-body .effective {
  margin: 14px 0 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* The opening paragraph (who we are and where) sits a little apart from the date. */
.legal-body .effective + p {
  margin-block-start: 28px;
}

.legal-body h2 {
  margin: 56px 0 0;
  color: var(--text-1);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 620;
}

.legal-body h3 {
  margin: 28px 0 0;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 600;
}

.legal-body p,
.legal-body ul {
  margin: 14px 0 0;
}

.legal-body ul {
  padding-inline-start: 22px;
}

.legal-body li + li {
  margin-block-start: 8px;
}

.legal-body strong {
  color: var(--text-1);
  font-weight: 600;
}

.legal-body a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 3px;
}

.legal-body a:hover {
  text-decoration-color: currentcolor;
}