/* Legal pages — privacy and terms, both languages. Prefix: .lg-  */

/* ---------- hero: a clay "record" tablet, marks pressed in one by one ---------- */
.lg-updated { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--gold-soft); }
.lg-updated::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.page-hero-art.lg-art svg { max-width: 290px; filter: drop-shadow(0 26px 26px rgba(0,0,0,.4)); animation: bob 7s ease-in-out infinite alternate; }
.lg-tablet .lg-clay { fill: url(#lg-clay-grad); }
.lg-tablet .lg-edge { fill: none; stroke: var(--clay-deep); stroke-opacity: .5; stroke-width: 2; }
.lg-tablet .lg-rule { stroke: var(--clay-deep); stroke-opacity: .35; stroke-width: 1.4; }
.lg-tablet .lg-imp { fill: #8a5028; fill-opacity: .55; }
.lg-tablet .lg-imp-hi { fill: #f0caa2; fill-opacity: .55; }
.lg-tablet .lg-tail { fill: none; stroke: #8a5028; stroke-opacity: .5; stroke-width: 2.2; stroke-linecap: round; }
.lg-tablet .lg-mark { transform-box: fill-box; transform-origin: center; animation: press .5s var(--ease) both; animation-delay: calc(var(--k) * 40ms + 500ms); }
.lg-tablet .lg-seal { transform-box: fill-box; transform-origin: center; animation: pop 1s var(--ease) 2.4s both; }
.lg-tablet .lg-seal-ring { fill: rgba(138,80,40,.18); stroke: var(--gold); stroke-width: 4; }
.lg-tablet .lg-seal-core { fill: var(--gold); }
.lg-tablet .lg-r-gold, .lg-tablet .lg-r-over { fill: none; stroke: var(--gold); stroke-width: 4.5; }
.lg-tablet .lg-r-lapis { fill: none; stroke: var(--lapis-700); stroke-width: 4.5; }
@media (max-width: 920px) { .page-hero-art.lg-art svg { max-width: 200px; } }

/* ---------- privacy: the path a message takes ---------- */
.lg-path { list-style: none; counter-reset: lp; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 0; }
.lg-path li { counter-increment: lp; position: relative; padding-top: 40px; padding-inline-end: clamp(16px, 2.5vw, 36px); }
.lg-path li::before {
  content: ""; position: absolute; top: 9px; inset-inline: 0; height: 2px;
  background: repeating-linear-gradient(to left, var(--lapis-300) 0 7px, transparent 7px 14px);
  background-size: 14px 2px; animation: lg-flow 1s linear infinite;
}
.lg-path li:last-child::before { inset-inline-end: auto; width: 20px; }
.lg-path li::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 0; width: 14px; height: 14px;
  background: var(--lapis-500); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--stone);
}
.lg-path li:last-child::after { background: var(--gold); }
.lg-path b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--lapis-900); line-height: 1.5; margin-bottom: 4px; }
.lg-path b::before { content: counter(lp) ". "; font-family: var(--f-ui); font-weight: 300; color: var(--lapis-500); }
.lg-path span { display: block; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
@keyframes lg-flow { from { background-position: 0 0; } to { background-position: -14px 0; } }
[dir="ltr"] .lg-path li::before { animation-direction: reverse; }

/* ---------- document layout: contents rail + prose ---------- */
.lg-grid { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lg-aside { position: sticky; top: 110px; font-family: var(--f-ui); }
.lg-aside h2 { font-family: var(--f-ui); font-weight: 500; font-size: var(--t-sm); color: var(--lapis-700); margin-bottom: 14px; }
.lg-toc { list-style: none; border-inline-start: 2px solid var(--line); }
.lg-toc a {
  position: relative; display: block; padding: 7px 0; padding-inline-start: 20px; margin-inline-start: -2px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-decoration: none;
  border-inline-start: 2px solid transparent; transition: color .2s, border-color .2s;
}
.lg-toc a:hover { color: var(--lapis-700); border-inline-start-color: var(--gold); }
.lg-other { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); line-height: 1.9; }
.lg-other a { font-weight: 500; text-decoration: none; }
.lg-other a:hover { text-decoration: underline; }
.lg-prose h2 { scroll-margin-top: 100px; display: flex; align-items: baseline; gap: 12px; }
.lg-prose h2::before { content: ""; width: 10px; height: 10px; background: var(--lapis-500); transform: translateY(-2px) rotate(45deg); flex: none; }

@media (max-width: 920px) {
  .lg-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-aside { position: static; }
}
@media (max-width: 600px) {
  .lg-path { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lg-path li { padding: 0 0 26px; padding-inline-start: 34px; }
  .lg-path li:last-child { padding-bottom: 0; }
  .lg-path li::before, .lg-path li:last-child::before {
    top: 14px; bottom: 0; inset-inline: auto; inset-inline-start: 6px; width: 2px; height: auto;
    background: repeating-linear-gradient(to bottom, var(--lapis-300) 0 7px, transparent 7px 14px);
    background-size: 2px 14px; animation-name: lg-flow-v; animation-direction: normal;
  }
  .lg-path li:last-child::before { display: none; }
  .lg-path li::after { top: 9px; }
}
@keyframes lg-flow-v { from { background-position: 0 0; } to { background-position: 0 14px; } }