/* ============================================================
   INCLINE Ventures — Legal / long-form pages
   Loaded on /privacy.html
   ============================================================ */

.legal-head { padding-block: clamp(2.5rem, 7vh, 4.5rem) var(--space-m); }
.legal-head__title {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  max-width: 16ch;
  margin-block: var(--space-s) var(--space-s);
}
.legal-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Pre-launch notice --------------------------------------
   REMOVE THIS BLOCK (and its markup) once the policy has been
   reviewed by a qualified adviser and the placeholders filled. */
.notice {
  border: 1.5px solid var(--accent);
  border-left-width: 4px;
  background: rgba(187, 39, 27, 0.1);
  padding: var(--space-m);
  margin-bottom: var(--space-xl);
}
.notice__head {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}
.notice p { font-size: var(--step--1); color: var(--ink); max-width: 70ch; }
.notice ul { margin: var(--space-2xs) 0 0; padding-left: 1.2rem; font-size: var(--step--1); color: var(--ink-muted); }

/* ---- Layout: sticky contents beside the prose ---------------- */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.toc { position: sticky; top: calc(var(--nav-h, 64px) + 1.5rem); }
.toc__head {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-s);
}
.toc__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); counter-reset: toc; }
.toc__link {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.2em;
  border-left: 1.5px solid transparent;
  padding-left: var(--space-2xs);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
@media (hover: hover) {
  .toc__link:hover { color: var(--ink); border-left-color: var(--accent); }
}

/* ---- Prose --------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > section { scroll-margin-top: calc(var(--nav-h, 64px) + 1.5rem); }
.prose > section + section { margin-top: var(--space-xl); }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  text-transform: uppercase;
  line-height: 1.05;
  padding-top: var(--space-s);
  border-top: 1.5px solid var(--line-strong);
  margin-bottom: var(--space-s);
}
.prose h2 .num { color: var(--accent); margin-right: 0.5em; }

.prose h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  margin: var(--space-m) 0 var(--space-2xs);
}

.prose p { margin-bottom: var(--space-s); line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }

.prose ul { margin: 0 0 var(--space-s); padding-left: 0; list-style: none; }
.prose ul li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  line-height: 1.65;
}
.prose ul li::before { content: '—'; color: var(--accent-text); }

.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .prose a:hover { color: var(--ink); } }

.prose strong { color: var(--ink); font-weight: 700; }

/* Unresolved facts the client must supply. Visible on purpose —
   they must not be able to ship this without noticing. */
.tbd {
  background: rgba(187, 39, 27, 0.16);
  border-bottom: 1.5px solid var(--accent);
  padding: 0.05em 0.35em;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: var(--space-l); }
  .toc { position: static; border-bottom: 1.5px solid var(--line); padding-bottom: var(--space-m); }
  .toc__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xs) var(--space-s); }
  .prose h2 { font-size: var(--step-2); }
}

@media (max-width: 560px) {
  .toc__list { grid-template-columns: 1fr; }
}