/* Shared styles for Navrox legal pages.
   Reuses the same type system + palette as the landing. */

:root{
  --font-sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --paper:   #f1ece1;
  --paper2:  #e8e2d3;
  --paper3:  #ddd5c1;
  --ink:     #0b0b0d;
  --ink2:    #2a2a30;
  --ink3:    #5e5e68;
  --ink4:    #9a9aa3;
  --rule:    #0b0b0d22;
  --rule2:   #0b0b0d11;
  --copper:  #b3683a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
html { scroll-behavior: smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--copper); color: var(--paper); }

/* shared underline link */
.ulink { position: relative; display: inline-block; cursor: pointer; text-decoration: none; color: inherit; }
.ulink::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 320ms cubic-bezier(.6,0,.2,1);
}
.ulink:hover::after{ transform: scaleX(1); transform-origin: 0 50%; }
.ulink.always::after{ transform: scaleX(1); transform-origin: 0 50%; }

.mono{
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── PAGE FRAME ─────────────────────────────────────────────────────────── */
.legal-shell{ max-width: 1400px; margin: 0 auto; padding: 0 max(28px, 4vw); }

.legal-topbar{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 0 18px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper);
  z-index: 10;
}
.legal-topbar .brand{
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  transition: opacity 200ms ease;
}
.legal-topbar .brand:hover{ opacity: 0.72; }
.legal-topbar .brand-mark{
  width: 32px; height: 32px;
  display: block; user-select: none;
  /* the source PNG is white-on-transparent — invert for light backgrounds */
  filter: brightness(0);
}
.legal-topbar .brand-name{
  /* Locked to Geist to match the main Wordmark on the landing pages. */
  font-family: 'Geist', 'Inter', -apple-system, sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
  font-size-adjust: none;
}
.legal-topbar nav{
  display: flex; gap: 28px; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
}
.legal-topbar nav a{ color: var(--ink2); }
.legal-topbar nav a.home{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  padding: 8px 14px;
  border: 1px solid var(--ink);
  transition: background 180ms ease, color 180ms ease;
}
.legal-topbar nav a.home::after{ display: none; } /* suppress shared ulink underline */
.legal-topbar nav a.home:hover{ background: var(--ink); color: var(--paper); }
.legal-topbar nav a.home .arrow{
  font-family: var(--font-mono); font-size: 13px; line-height: 1;
}

.legal-hero{
  padding: 80px 0 40px;
  display: grid; grid-template-columns: 220px 1fr; gap: 64px;
  border-bottom: 1px solid var(--rule);
}
.legal-hero .label{ font-size: 11px; color: var(--ink3); }
.legal-hero h1{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.legal-hero .meta{
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink3);
  display: flex; flex-wrap: wrap; gap: 18px;
}
.legal-hero .meta span::before{
  content:""; display:inline-block; width:6px; height:6px; background: var(--copper);
  margin-right: 8px; transform: translateY(-1px);
}

/* ─── BODY ───────────────────────────────────────────────────────────────── */
.legal-body{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 56px 0 96px;
}
.legal-toc{
  position: sticky; top: 96px; align-self: start;
  font-size: 12px;
}
.legal-toc .label{
  font-size: 10px; color: var(--ink3); margin-bottom: 14px;
}
.legal-toc ol{ list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.legal-toc ol li{ counter-increment: toc; }
.legal-toc ol li a{ color: var(--ink2); display: flex; gap: 10px; line-height: 1.45; }
.legal-toc ol li a::before{
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10px; color: var(--ink4);
  letter-spacing: 0.08em; padding-top: 1px;
}

.legal-prose{ max-width: 68ch; }
.legal-prose section{ padding: 28px 0; border-top: 1px solid var(--rule2); }
.legal-prose section:first-child{ border-top: 0; padding-top: 0; }
.legal-prose h2{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  display: flex; align-items: baseline; gap: 14px;
}
.legal-prose h2 .num{
  font-family: var(--font-mono); font-size: 11px; color: var(--ink4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.legal-prose h3{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  margin: 22px 0 8px;
}
.legal-prose p, .legal-prose li{
  font-size: 15px; line-height: 1.65; color: var(--ink2);
  margin-bottom: 12px;
}
.legal-prose ul, .legal-prose ol{ padding-left: 22px; margin-bottom: 12px; }
.legal-prose li{ margin-bottom: 6px; }
.legal-prose strong{ color: var(--ink); font-weight: 600; }
.legal-prose a{ color: var(--copper); }
.legal-prose a:hover{ text-decoration: underline; }

/* key/value table for Impressum-style facts */
.kv{
  margin: 16px 0 20px;
  display: grid;
  grid-template-columns: 220px 1fr;
  row-gap: 10px; column-gap: 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.kv dt{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink3);
  padding-top: 3px;
}
.kv dd{
  font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0;
}
.kv dd .todo{
  color: var(--copper); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em;
}

/* TODO callout — inline placeholder marker for unfilled facts */
.todo-pill{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--copper);
  color: var(--paper);
  vertical-align: 1px;
}

/* TODO banner — page-top warning during pre-launch */
.todo-banner{
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px max(28px, 4vw);
  text-align: center;
}
.todo-banner .accent{ color: var(--copper); }

/* footer (light variant for legal pages) */
.legal-foot{
  border-top: 1px solid var(--rule);
  padding: 36px max(28px, 4vw);
  font-size: 12px; color: var(--ink3);
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: center;
}
.legal-foot .links{ display: flex; flex-wrap: wrap; gap: 24px; }
.legal-foot .links a{ color: var(--ink2); }
.legal-foot .mark{
  font-family: var(--font-sans); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px;
}

/* responsive */
@media (max-width: 880px){
  .legal-hero{ grid-template-columns: 1fr; gap: 24px; padding: 40px 0 28px; }
  .legal-body{ grid-template-columns: 1fr; gap: 28px; padding: 36px 0 64px; }
  .legal-toc{ position: static; }
  .kv{ grid-template-columns: 1fr; }
  .legal-topbar nav{ display: none; }
}