/* ==========================================================================
   InsiteMedia — Legal pages (RODO / Cookies)
   Static, readable prose layout reusing the site's tokens from style.css.
   No 3D canvas here on purpose — these pages exist to be read, not to
   perform, so the backdrop is just the quiet dot grid.
   ========================================================================== */

body.legal-page{
  background:
    radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 26px 26px;
  background-color: var(--bg);
}

.legal-hero{
  padding: calc(var(--nav-h) + 64px) 32px 40px;
}
.legal-hero__inner{
  max-width: 760px;
  margin: 0 auto;
}
.legal-hero .chapter-label{ margin-bottom: 14px; }
.legal-hero h1{
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 16px;
}
.legal-hero__lead{
  color: var(--text-muted);
  max-width: 56ch;
  font-size: 16px;
}
.legal-hero__meta{
  display:flex; align-items:center; gap: 8px;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.legal-hero__meta .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* Quick jump nav ----------------------------------------------------------- */
.legal-toc{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legal-toc a{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.legal-toc a:hover{ color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* Content ------------------------------------------------------------------ */
.legal-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 32px 100px;
}
.legal-section{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 38px;
  margin-bottom: 22px;
  box-shadow: 0 30px 60px -42px rgba(23,20,15,0.15);
  scroll-margin-top: calc(var(--nav-h) + 18px);
}
.legal-section__num{
  display:inline-flex;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
  letter-spacing: .03em;
}
.legal-section h2{
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 23px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal-section h3{
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  margin: 20px 0 8px;
}
.legal-section p{
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 12px;
}
.legal-section p:last-child{ margin-bottom: 0; }
.legal-section ul{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display:flex; flex-direction: column; gap: 8px;
}
.legal-section ul:last-child{ margin-bottom: 0; }
.legal-section li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--text-muted);
}
.legal-section li::before{
  content:"";
  position:absolute; left:0; top: 9px;
  width: 8px; height: 1.5px;
  background: var(--accent);
}
.legal-section a{ color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.legal-section a:hover{ border-color: var(--accent); }
.legal-section strong{ color: var(--ink); }

/* Simple definition-style table (used for cookie list) --------------------- */
.legal-table{
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 13.5px;
}
.legal-table th, .legal-table td{
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}
.legal-table th{
  color: var(--text-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.legal-table tr:last-child td{ border-bottom: none; }
.legal-table td strong{ color: var(--ink); }

@media (max-width: 720px){
  .legal-section{ padding: 26px 22px; }
  .legal-table{ display:block; overflow-x:auto; white-space:nowrap; }
}