/* Shared styles for the static legal pages (/terms, /privacy). Linked after
   styles.css so it resolves the design tokens. Kept in one place so the two
   pages never drift (they had already: table rules on one, a dead hr on the
   other). Dependency-light on purpose — legal pages must render if CDNs fail. */
body { margin: 0; background: var(--surface-page); color: var(--fg-default); font-family: var(--font-sans); }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Top bar */
.lbar { border-bottom: 1px solid var(--divider-subtle); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface-page) 82%, transparent); }
.lbar__in { display: flex; align-items: center; gap: 20px; height: 58px; }
.lbar__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg-strong); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.lbar__links { display: flex; gap: 18px; margin-left: auto; }
.lbar__links a { color: var(--fg-muted); font-size: 14px; font-weight: 500; }
.lbar__links a:hover { color: var(--fg-default); text-decoration: none; }

/* Document */
.legal { padding: 44px 0 72px; }
.legal h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; color: var(--fg-strong); margin: 0 0 8px; font-weight: 700; }
.legal .meta { color: var(--fg-subtle); font-size: 13px; margin: 0 0 8px; }
.legal .lede { color: var(--fg-muted); font-size: 15.5px; line-height: 1.65; margin: 18px 0 8px; }
.legal h2 { font-size: 19px; letter-spacing: -0.01em; color: var(--fg-strong); margin: 38px 0 10px; font-weight: 650; }
.legal h2 .num { color: var(--brand-primary); font-variant-numeric: tabular-nums; margin-right: 10px; }
.legal h3 { font-size: 15px; color: var(--fg-strong); margin: 20px 0 8px; font-weight: 620; }
.legal p, .legal li { color: var(--fg-default); font-size: 14.5px; line-height: 1.72; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 7px; }
.legal strong { color: var(--fg-strong); font-weight: 620; }
.legal .callout { border: 1px solid var(--brand-primary-line); background: var(--brand-primary-soft); border-radius: var(--radius-md); padding: 14px 16px; margin: 16px 0; font-size: 14px; line-height: 1.65; }
.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; }
.legal th, .legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--divider-subtle); vertical-align: top; }
.legal th { color: var(--fg-subtle); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.legal .tablewrap { overflow-x: auto; }

/* Footer */
.foot { border-top: 1px solid var(--divider-subtle); padding: 30px 0; color: var(--fg-subtle); font-size: 13px; }
.foot__in { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.foot__in a { color: var(--fg-muted); }
.foot__sp { flex: 1; }