/* =========================================================
   Arrowline — Legal page shell (shared by privacy.html, cookies.html)
   Editorial document layout: narrow column, generous gaps, no rules.
   ========================================================= */

/* ============ Hero ============
   Short title-only hero. No animated blend — legal pages should
   read as documents, not landing pages. */
.legal-hero {
  background: var(--bg);
  padding: 144px 0 56px;
  box-sizing: border-box;
}
.legal-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}
.legal-hero-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--accent);
  margin: 0 0 20px;
  max-width: 16ch;
  text-wrap: balance;
}
.legal-updated {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin: 0;
}

/* ============ Body ============
   Single narrow reading column, editorial rhythm. */
.legal-body {
  background: var(--bg);
  padding: 56px 0 144px;
  box-sizing: border-box;
}
.legal-body-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}
.legal-article {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.legal-intro {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}
.legal-article > section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-article h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.legal-article p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}
/* Lists match the paragraph voice exactly — same size, colour and rhythm —
   so a bulleted clause reads as part of the same document rather than as a
   different kind of element. Markers sit outside the reading column's left
   edge, keeping the text block flush with the paragraphs above it. */
.legal-article ul,
.legal-article ol {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-article li { text-wrap: pretty; }
.legal-article li::marker { color: var(--fg-muted); }
.legal-article a {
  color: var(--accent);
  text-decoration: none;
}
.legal-article a:hover { opacity: 0.7; }

@media (max-width: 1023px) {
  .legal-hero { padding: 112px 0 48px; }
  .legal-body { padding: 48px 0 96px; }
}
@media (max-width: 639px) {
  .legal-hero { padding: 96px 0 40px; }
  .legal-hero-inner { padding: 0 24px; }
  .legal-body { padding: 40px 0 80px; }
  .legal-body-inner { padding: 0 24px; }
  .legal-article { gap: 40px; }
}