/* Legal pages: same fonts and tokens as the landing page, set for long reading. */
@import url('../styles.css');

.lg-top { border-bottom: 1px solid var(--line); }
.lg-top__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lg-brand { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--cream); text-decoration: none; }
.lg { max-width: 760px; padding-block: 48px 96px; }
.lg-back { display: inline-block; margin-bottom: 36px; font-size: .9375rem; color: var(--muted); text-decoration: none; }
.lg-back:hover { color: var(--amber); }
.lg h1 { font-family: var(--font-display); font-weight: 360; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; }
.lg .lg-updated { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.lg .lg-summary { margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.lg h2 { font-family: var(--font-display); font-weight: 420; font-size: 1.45rem; line-height: 1.2; margin-top: 44px; }
.lg h3 { font-weight: 600; font-size: 1.0625rem; margin-top: 22px; }
.lg p, .lg li { color: color-mix(in srgb, var(--cream) 86%, var(--muted)); }
.lg p + p, .lg h2 + p, .lg h3 + p, .lg p + ul, .lg ul + p { margin-top: 12px; }
.lg h2 + ul, .lg h3 + ul { margin-top: 10px; }
.lg ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 6px; }
.lg a { color: var(--cream); }
.lg table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .9375rem; }
.lg th, .lg td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.lg th { font-weight: 600; color: var(--cream); }
.lg .table-wrap { overflow-x: auto; }
.lg mark.todo { background: rgba(242,201,136,.14); color: var(--amber); border: 1px dashed rgba(242,201,136,.5); border-radius: 6px; padding: 0 5px; }
.lg-pl-note { margin-bottom: 28px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-strong); color: var(--muted); font-size: .9375rem; }
.lg-foot { border-top: 1px solid var(--line); padding-block: 28px 36px; }
.lg-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .875rem; color: var(--muted); }
.lg-foot a { color: color-mix(in srgb, var(--cream) 82%, var(--muted)); text-decoration: none; }
.lg-foot a:hover { color: var(--amber); }

/* 404 page (written by tools/build.mjs) */
.lg--404 { text-align: center; }
.lg-404__raccoon { display: block; margin: 24px auto 8px; }
.lg-404__links { margin-top: 28px; }