/* Legal pages (privacy policy, terms) — hero, at-a-glance cards, sticky contents, numbered sections. Uses global tokens. */
.lg { max-width: 1120px; margin: 0 auto; padding: 8px 0 60px; }
.lg-hero { padding: 30px 0 8px; max-width: 820px; }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); color: var(--brand-dark, var(--brand)); }
.lg-hero h1 { margin: 16px 0 12px; font-size: clamp(1.9rem, 5vw, 3rem) !important; line-height: 1.12 !important; letter-spacing: -.03em; }
.lg-hero h1 small { display: block; margin-top: 6px; font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lg-lead { color: var(--muted); font-size: 1.06rem; line-height: 1.7; margin: 0 0 18px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 12px; font-size: .82rem; font-weight: 600; background: var(--card); border: 1px solid var(--border); color: var(--muted); }

.lg-glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 38px; }
.lg-glance > div { display: grid; gap: 4px; padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.lg-glance > div:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.lg-glance i, .lg-card i, .lg-rights i, .lg-contact i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-style: normal; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--card)); margin-bottom: 6px; }
.lg-glance b { font-size: .98rem; } .lg-glance span { color: var(--muted); font-size: .85rem; line-height: 1.5; }

.lg-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.lg-toc { position: sticky; top: 92px; }
.lg-toc details { border: 1px solid var(--border); border-radius: 20px; background: var(--card); padding: 6px 8px 10px; box-shadow: var(--shadow); }
.lg-toc summary { cursor: pointer; list-style: none; padding: 12px 12px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-toc a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; }
.lg-toc a span { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand); }
.lg-toc a:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--text); }
.lg-toc a.on { background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--text); }
.lg-toc a.on span { background: var(--brand); color: #fff; }

.lg-body { min-width: 0; }
.lg-intro { margin: 0 0 6px; padding: 18px 20px; border-radius: 18px; border-left: 4px solid var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--card)); line-height: 1.7; }
.lg-sec { margin-top: 38px; scroll-margin-top: 96px; }
.lg-sec h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: clamp(1.25rem, 2.6vw, 1.65rem); line-height: 1.25; letter-spacing: -.02em; }
.lg-n { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), var(--violet, #7c4dff)); }
.lg-sec p { line-height: 1.75; color: var(--muted); margin: 0 0 12px; }
.lg-sec p strong, .lg-sec b { color: var(--text); }
.lg-sec a { color: var(--brand-dark, var(--brand)); font-weight: 600; text-underline-offset: 3px; }
[data-theme="dark"] .lg-sec a { color: var(--brand); }

.lg-cards { display: grid; gap: 14px; margin-top: 8px; }
.lg-cards.two { grid-template-columns: repeat(2, 1fr); }
.lg-card { padding: 22px; border-radius: 22px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.lg-card h3 { margin: 0 0 8px; font-size: 1.05rem; } .lg-card p { margin-bottom: 10px; } .lg-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lg-card li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.lg-tick { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--brand); }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lg-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); line-height: 1.65; color: var(--muted); }
.lg-callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, #34a853 10%, var(--card)); border: 1px solid color-mix(in srgb, #34a853 35%, var(--border)); }
.lg-callout svg { flex: none; margin-top: 3px; color: #1e8e3e; }
.lg-rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 6px 0 16px; }
.lg-rights > div { display: grid; gap: 3px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); }
.lg-rights span { color: var(--muted); font-size: .88rem; }
.lg-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lg-contact a { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); color: var(--text) !important; text-decoration: none; min-width: 0; transition: transform .18s, border-color .18s; }
.lg-contact a:hover { transform: translateY(-2px); border-color: var(--brand); }
.lg-contact i { margin: 0; flex: none; } .lg-contact span { display: grid; min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: .92rem; } .lg-contact small { color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.lg-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.lg-top { display: inline-flex; align-items: center; gap: 6px; } .lg-top svg { transform: rotate(-90deg); }

@media (max-width: 980px) { .lg-glance { grid-template-columns: repeat(2, 1fr); } .lg-contact { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .lg-layout { grid-template-columns: 1fr; gap: 18px; } .lg-toc { position: static; }
  .lg-cards.two, .lg-rights { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .lg-glance { grid-template-columns: 1fr; } .lg-sec h2 { gap: 10px; } .lg-n { width: 34px; height: 34px; } .lg-card { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .lg-glance > div, .lg-contact a { transition: none; } }

/* Terms-specific */
.lg-defs { display: grid; gap: 10px; }
.lg-defs > div { padding: 15px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); line-height: 1.65; }
.lg-defs dt { display: inline; font-weight: 800; color: var(--text); } .lg-defs dd { display: inline; margin: 0 0 0 4px; color: var(--muted); }
.lg-no { background: #ea4335; } .lg-card-warn { border-color: color-mix(in srgb, #ea4335 30%, var(--border)); background: color-mix(in srgb, #ea4335 5%, var(--card)); }
.lg-warn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ea4335; color: #fff; vertical-align: -4px; margin-right: 4px; }
.lg-ic-red { color: #ea4335 !important; background: color-mix(in srgb, #ea4335 12%, var(--card)) !important; }
.lg-callout-red { margin-top: 16px; background: color-mix(in srgb, #ea4335 8%, var(--card)); border-color: color-mix(in srgb, #ea4335 35%, var(--border)); }
.lg-callout-red svg { color: #ea4335; }
.lg-hero .lg-lead a { color: var(--brand-dark, var(--brand)); font-weight: 600; }