/* ════════════════════════════════════════════════════════════════════════════
   PAPIK · Legal pages · premium upgrade (shared by the 15 legal docs, 5 langs)
   Loaded AFTER each page's inline <style>, so these rules win ties.
   Language: rl-* card system · mint field (#d9e4e0) + floating white panel,
   soft fills, rounded corners, fi-tr icons. Palette-strict.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page field · hero and body share the mint field so panels float on it ── */
.legal-hero {
  background:
    radial-gradient(125% 120% at 78% 12%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 120% at 12% 100%, rgba(0,40,25,0.10) 0%, rgba(0,40,25,0) 55%),
    #d9e4e0;
  border-bottom: none;
  padding: 128px 0 54px;
}
.legal-hero::before { content: none; }
.legal-hero__eyebrow i {
  background: #002819;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.legal-hero__eyebrow span { color: var(--muted); }
.legal-chip {
  background: #fff;
  border: 1px solid rgba(0,40,25,0.08);
  box-shadow: 0 6px 18px -10px rgba(0,40,25,0.16);
}

.legal-body {
  background:
    radial-gradient(125% 120% at 78% 88%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 120% at 12% 0%, rgba(0,40,25,0.10) 0%, rgba(0,40,25,0) 55%),
    #d9e4e0;
  padding: 8px 0 112px;
}

/* ── Floating white panel · the "porta dins" signature ── */
.legal-layout {
  background: #fff;
  border: 1px solid rgba(0,40,25,0.06);
  border-radius: 28px;
  box-shadow: 0 30px 70px -34px rgba(0,40,25,0.22);
  padding: clamp(28px, 4.5vw, 60px);
  max-width: 1180px;
}

/* ── TOC · soft mint card inside the panel ── */
.legal-toc {
  background: rgba(217,228,224,0.45);
  border: 1px solid rgba(0,40,25,0.06);
  border-radius: 18px;
  top: 112px;
}
.legal-toc a { color: var(--muted); }
.legal-toc a:hover { color: var(--green); }

/* ── Section headings · numbered mint tile instead of hairline rows ── */
.legal-content > h2 {
  border-top: none;
  padding-top: 0;
  margin: 58px 0 18px;
}
.legal-content > h2::before {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #d9e4e0;
  color: #002819;
  border-radius: 11px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
  margin-right: 14px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ── Identity card · soft mint fill, brand labels ── */
.legal-idcard {
  background: rgba(217,228,224,0.45);
  border: 1px solid rgba(0,40,25,0.06);
  border-radius: 20px;
  padding: 10px 30px;
}
.legal-idcard li { border-bottom: 1px solid rgba(0,40,25,0.08); }
.legal-idcard li strong { color: var(--green); }

/* ── Tables (cookie inventory) · soft card table, self-scrolling if wide ── */
.legal-content table {
  border: 1px solid rgba(0,40,25,0.08);
  border-radius: 16px;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.legal-content th { background: rgba(217,228,224,0.5); color: #002819; }

/* ── Related docs · icon tile pops, hover matches site cards ── */
.legal-rcard__icon { background: #d9e4e0; color: #002819; border-radius: 12px; }
a.legal-rcard {
  border-radius: 18px;
  border: 1px solid rgba(0,40,25,0.08);
}
a.legal-rcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(0,40,25,0.22);
}
.legal-related { border-top: 1px solid rgba(0,40,25,0.08); }

/* ── Blockquotes / cross-links inside legal content ── */
.legal-content blockquote,
.legal-content .cross-links {
  background: rgba(217,228,224,0.45);
  border-radius: 18px;
}

/* ── Mobile ── */
@media (max-width: 719px) {
  .legal-hero { padding: 112px 0 40px; }
  .legal-layout { border-radius: 20px; padding: 22px 18px 30px; }
  .legal-body { padding-bottom: 72px; }
}