/* ─────────────────────────────────────────────────────────────────────────
   VARU — Legal pages (standalone, no build step)
   ───────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ── */
:root {
  --ink:        #0A0A0A;
  --ink-soft:   #111111;
  --bone:       #FFFFFF;
  --bone-50:    rgba(255,255,255,0.50);
  --bone-30:    rgba(255,255,255,0.30);
  --bone-15:    rgba(255,255,255,0.15);
  --bone-08:    rgba(255,255,255,0.08);
  --bone-04:    rgba(255,255,255,0.04);
  --acid:       #FFD60A;
  --guau-red:   #E5352B;
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pad-x: clamp(20px, 4vw, 56px);
  --t-fast: 240ms;
  --ease:   cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink); }
body {
  background: var(--ink); color: var(--bone);
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--acid); color: var(--ink); }

/* ── Top bar ── */
.legal-bar {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--pad-x);
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bone-08);
}
.legal-bar .left  { justify-self: start; display: flex; gap: 24px; align-items: center; }
.legal-bar .right { justify-self: end; display: flex; gap: 24px; align-items: center; }
.legal-bar .logo  { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .08em; color: var(--bone); }
.legal-bar .logo .dot { color: var(--acid); }
.legal-bar .back  { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--bone-50); transition: color var(--t-fast) var(--ease); }
.legal-bar .back:hover { color: var(--bone); }
.legal-bar .crumb { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--bone-50); }
.legal-bar .crumb .acid { color: var(--acid); }
.legal-bar .lang-switch { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--bone-15); border-radius: 999px; }
.legal-bar .lang-switch button { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; padding: 5px 10px; border-radius: 999px; color: var(--bone-50); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); background: none; border: 0; }
.legal-bar .lang-switch button.is-on { background: var(--bone); color: var(--ink); }

/* ── Hero ── */
.legal-hero {
  padding: clamp(72px, 10vw, 140px) var(--pad-x) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--bone-15);
  background: var(--ink);
}
.legal-hero .meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.legal-hero .meta .cell { display: flex; flex-direction: column; gap: 6px; }
.legal-hero .meta .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--bone-50); }
.legal-hero .meta .v { font-family: var(--font-mono); font-size: 13px; color: var(--bone); }
.legal-hero .meta .v.acid { color: var(--acid); }
.legal-hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 6rem);
  letter-spacing: -0.035em; line-height: 0.96; margin: 0; max-width: 16ch;
}
.legal-hero h1 .acid { color: var(--acid); }
.legal-hero .lede {
  margin-top: 22px; max-width: 60ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.5;
  color: var(--bone-50);
}

/* ── Layout ── */
.legal-grid {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 72px) var(--pad-x) clamp(72px, 8vw, 120px);
  align-items: start; background: var(--ink);
}

/* ── TOC ── */
.legal-toc { position: sticky; top: 90px; }
.legal-toc h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--bone-50); margin: 0 0 14px; font-weight: 400; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: grid; gap: 2px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: grid; grid-template-columns: 32px 1fr; gap: 8px;
  padding: 8px 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.35;
  color: var(--bone-50); border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease);
}
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--bone-30); padding-top: 1px; }
.legal-toc a:hover { color: var(--bone); }

/* ── Body ── */
.legal-body { max-width: 72ch; }
.legal-body section { border-top: 1px solid var(--bone-15); padding: clamp(28px, 4vw, 52px) 0; }
.legal-body section:first-child { border-top: 0; padding-top: 0; }
.legal-body .sec-num { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--acid); display: block; margin-bottom: 12px; }
.legal-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 22px; color: var(--bone); }
.legal-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 26px 0 10px; color: var(--bone); }
.legal-body p { font-size: 15px; line-height: 1.7; color: var(--bone); margin: 0 0 16px; }
.legal-body p.muted { color: var(--bone-50); }
.legal-body p strong { color: var(--bone); font-weight: 600; }
.legal-body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal-body ul li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 15px; line-height: 1.65; color: var(--bone); }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--acid); }
.legal-body a.inline { color: var(--acid); border-bottom: 1px solid rgba(255,214,10,.3); padding-bottom: 1px; transition: border-color var(--t-fast) var(--ease); }
.legal-body a.inline:hover { border-bottom-color: var(--acid); }

.legal-body .callout {
  margin: 22px 0; padding: 18px 20px;
  border: 1px solid var(--bone-15); border-left: 2px solid var(--acid);
  background: var(--bone-04);
  font-size: 14px; line-height: 1.6; color: var(--bone);
  border-radius: 0 4px 4px 0;
}
.legal-body .callout .tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--acid); display: block; margin-bottom: 8px; }

.legal-body dl { margin: 12px 0 20px; }
.legal-body dl > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--bone-15); }
.legal-body dl > div:last-child { border-bottom: 1px solid var(--bone-15); }
.legal-body dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--bone-50); padding-top: 2px; }
.legal-body dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bone); }

/* ── Footer ── */
footer { background: var(--ink); border-top: 1px solid var(--bone-15); }
.legal-foot {
  padding: clamp(40px, 5vw, 72px) var(--pad-x);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
.legal-foot .col h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--bone-50); margin: 0 0 14px; font-weight: 400; }
.legal-foot .col p { font-size: 14px; color: var(--bone); line-height: 1.5; margin: 0 0 8px; }
.legal-foot .col a { display: block; font-size: 14px; color: var(--bone-50); padding: 3px 0; transition: color var(--t-fast) var(--ease); }
.legal-foot .col a:hover { color: var(--bone); }
.legal-foot .col .acid { color: var(--acid); }
.legal-base {
  padding: 20px var(--pad-x) 28px;
  border-top: 1px solid var(--bone-08);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--bone-50);
}

/* ── i18n ── */
[data-i18n] { display: none; }
[data-i18n].is-on { display: revert; }

/* ── Responsive ── */
@media (max-width: 880px) {
  .legal-hero .meta { grid-template-columns: 1fr 1fr; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; display: grid; }
  .legal-body dl > div { grid-template-columns: 1fr; gap: 4px; }
  .legal-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .legal-bar { grid-template-columns: 1fr auto; }
  .legal-bar .crumb { display: none; }
  .legal-hero .meta { grid-template-columns: 1fr 1fr; }
}