/* ============================================================
   SUBTEN — legal pages
   ============================================================ */
.legal-main { padding-top: clamp(110px, 14vh, 150px); padding-bottom: clamp(70px, 10vw, 120px); }
.legal-wrap { max-width: 800px; margin-inline: auto; }

.legal-back {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 34px; transition: color .25s, gap .25s var(--ease);
}
.legal-back:hover { color: var(--accent-strong); gap: 12px; }
[data-theme="dark"] .legal-back:hover { color: var(--accent); }
.legal-back svg { width: 16px; height: 16px; }

.legal-head { padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.legal-head h1 { font-size: clamp(34px, 5.5vw, 54px); letter-spacing: -0.04em; line-height: 1.0; }
.legal-head .updated { color: var(--ink-3); font-size: 14px; font-weight: 600; margin-top: 16px; }

.legal-body { font-size: 16.5px; color: var(--ink-2); line-height: 1.7; }
.legal-body h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(21px, 2.6vw, 27px); color: var(--ink); margin: 44px 0 14px; line-height: 1.15;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 18px; color: var(--ink); margin: 26px 0 8px; letter-spacing: -0.02em; }
.legal-body p { margin-bottom: 16px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { list-style: none; margin: 6px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal-body ul li { position: relative; padding-left: 26px; }
.legal-body ul li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.legal-body a { color: var(--accent-strong); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--accent-strong) 35%, transparent); }
[data-theme="dark"] .legal-body a { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.legal-body strong { color: var(--ink); font-weight: 700; }

.legal-toc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 22px 26px; margin-bottom: 44px;
}
.legal-toc h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 14px; font-weight: 800; }
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.legal-toc ol li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); font-size: 14.5px; font-weight: 550; transition: color .2s; }
.legal-toc a:hover { color: var(--accent-strong); }
[data-theme="dark"] .legal-toc a:hover { color: var(--accent); }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; color: var(--accent-strong); font-size: 12.5px; }
[data-theme="dark"] .legal-toc a::before { color: var(--accent); }

.legal-callout {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-md); padding: 22px 26px; margin: 28px 0; color: var(--ink);
}
.legal-callout p { margin: 0; font-size: 15.5px; }
.legal-callout strong { display: block; margin-bottom: 6px; font-family: var(--font-display); }

@media (max-width: 560px) { .legal-toc ol { grid-template-columns: 1fr; } }