/* Terms of Service and Privacy Policy (terms.html, privacy.html). Builds on site.css. */
.lg-pad { padding-left: max(16px, calc(50% - 600px)); padding-right: max(16px, calc(50% - 600px)); }

/* Top of the page */
.lg-hero { position: relative; padding-top: 72px; padding-bottom: 44px; border-bottom: 1px solid var(--line); overflow: hidden; }
.lg-hero::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 58, 82, 0.18), transparent); pointer-events: none; }
.lg-hero > * { position: relative; }
.lg-hero h1 { margin-bottom: 16px; }
.lg-hero .lead { max-width: 40em; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.lg-date { display: inline-flex; align-items: center; gap: 8px; padding: 0.45em 0.95em; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: 0.85em; font-weight: 600; }
.lg-date::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.lg-switch { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); }
.lg-switch a { padding: 0.45em 1.05em; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.88em; color: var(--muted); }
.lg-switch a:hover { color: var(--text); }
.lg-switch a.on { background: var(--brand); color: #fff; }

/* Contents list + document */
.lg-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 48px; }
.lg-toc { position: sticky; top: 92px; display: grid; gap: 14px; }
.lg-toc .eyebrow { margin: 0; }
.lg-toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.lg-toc ol a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.9em; line-height: 1.3;
  border-left: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.lg-toc ol a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--line); font-variant-numeric: tabular-nums; transition: color 0.15s; }
.lg-toc ol a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.lg-toc ol a.on { color: var(--text); background: rgba(224, 58, 82, 0.1); border-left-color: var(--brand); }
.lg-toc ol a.on::before { color: var(--brand-hi); }
.lg-help { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-size: 0.88em; color: var(--muted); display: grid; gap: 10px; }
.lg-help b { color: var(--text); }

.lg-doc { display: grid; gap: 16px; min-width: 0; }
.lg-short { padding: 28px; border-radius: var(--radius); border: 1px solid rgba(224, 58, 82, 0.35);
  background: linear-gradient(135deg, rgba(224, 58, 82, 0.12), rgba(224, 58, 82, 0.02) 60%), var(--panel); }
.lg-short h2 { font-size: 1.7em; margin-bottom: 4px; }
.lg-short .ticks { margin-top: 14px; }
.lg-short .ticks li { color: #d6d9e0; }
.lg-short .fine { margin-top: 16px; }

.lg-sec { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 26px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
  scroll-margin-top: 16px; }
.lg-num { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(224, 58, 82, 0.12); border: 1px solid rgba(224, 58, 82, 0.35);
  color: var(--brand-hi); font-family: var(--display); font-size: 1.35em; line-height: 1; }
.lg-sec h2 { font-size: 1.55em; margin: 6px 0 10px; }
.lg-sec p, .lg-sec li { color: var(--muted); line-height: 1.7; }
.lg-sec p + p, .lg-sec p + ul, .lg-sec ul + p { margin-top: 12px; }
.lg-sec strong { color: var(--text); font-weight: 700; }
.lg-sec a { color: var(--text); text-decoration-color: var(--brand); text-underline-offset: 3px; }
.lg-sec ul { list-style: none; display: grid; gap: 10px; }
.lg-sec li { position: relative; padding-left: 20px; }
.lg-sec li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

.lg-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg2); }
.lg-contact h2 { font-size: 1.4em; margin: 0 0 4px; }
.lg-contact p { color: var(--muted); font-size: 0.92em; }

@media (max-width: 900px) {
  .lg-body { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .lg-toc { position: static; }
  .lg-toc ol { grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .lg-help { display: none; }
}
@media (max-width: 560px) {
  .lg-hero { padding-top: 40px; padding-bottom: 32px; }
  .lg-toc ol { grid-template-columns: 1fr; }
  .lg-sec { grid-template-columns: 1fr; gap: 6px; padding: 22px 20px; }
  .lg-num { width: 42px; height: 42px; font-size: 1.15em; border-radius: 12px; }
  .lg-short { padding: 22px 20px; }
  .lg-contact { padding: 22px 20px; }
}
@media print {
  .nav, .lg-toc, .lg-switch, footer, .lg-hero::before { display: none !important; }
  body { background: #fff; color: #000; }
  .lg-body { display: block; padding: 0; }
  .lg-sec, .lg-short, .lg-contact { background: none; border: 0; padding: 12px 0; break-inside: avoid; }
  .lg-sec p, .lg-sec li, .lg-short .ticks li { color: #000; }
}