/* Shared styles for the legal pages (privacy, terms, compliance).
   These pages are deliberately plain static HTML - they do not load the
   Claude Design runtime (support.js), so they render instantly, are fully
   crawlable without JavaScript, and can be edited by anyone. Design tokens
   are copied from index.html so they match the marketing site. */

:root {
  --bg:        #141414;
  --bg-alt:    #111111;
  --bg-deep:   #0C0C0C;
  --panel:     #1D1D1D;
  --line:      #303030;
  --line-lit:  #4A4A4A;
  --fg:        #F2F2F2;
  --body:      #DCDCDC;
  --muted:     #9F9F9F;
  --green:     #006E4C;
  --green-lit: #2FBF8A;
  --green-brd: #0A8A61;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

a { color: var(--green-lit); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--green); color: #fff; }

/* ---------- header ---------- */
.lg-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20,20,20,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.lg-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 20px;
}
.lg-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.lg-brand img { height: 26px; width: auto; display: block; }
.lg-brand span {
  font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; color: var(--body);
}
.lg-back { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.lg-back:hover { color: var(--body); text-decoration: none; }

/* ---------- layout ---------- */
.lg-wrap { max-width: 820px; margin: 0 auto; padding: 64px 32px 96px; }

.lg-eyebrow {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); font-weight: 600; margin-bottom: 14px;
}
h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: 44px; line-height: 1.1;
  letter-spacing: -.03em; font-weight: 600; margin: 0 0 14px; color: var(--fg);
}
.lg-updated { font-size: 14px; color: var(--muted); margin: 0 0 36px; }
.lg-lede { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0 0 12px; }

h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 24px; line-height: 1.25;
  letter-spacing: -.02em; font-weight: 600; color: var(--fg);
  margin: 52px 0 14px; padding-top: 10px;
}
h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 17.5px; font-weight: 600;
  color: var(--body); margin: 30px 0 10px;
}
p  { font-size: 15.5px; margin: 0 0 16px; color: var(--muted); }
li { font-size: 15.5px; margin-bottom: 9px; color: var(--muted); }
ul, ol { padding-left: 22px; margin: 0 0 18px; }
strong { color: var(--body); font-weight: 600; }

/* ---------- review banner ---------- */
/* Delete this block (and the matching markup in each page) once counsel signs off. */
.lg-review {
  border: 1px solid var(--green-brd); background: rgba(0,110,76,.12);
  border-radius: 12px; padding: 16px 20px; margin: 0 0 40px;
}
.lg-review p { color: var(--body); font-size: 14.5px; margin: 0; }
.lg-review strong { color: var(--green-lit); }

/* ---------- contents ---------- */
.lg-toc {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 26px; margin: 0 0 12px;
}
.lg-toc h2 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--body); margin: 0 0 14px; padding: 0; font-family: 'IBM Plex Sans', sans-serif;
}
.lg-toc ol { margin: 0; padding-left: 20px; }
.lg-toc li { margin-bottom: 7px; font-size: 14.5px; }
.lg-toc a { color: var(--muted); }
.lg-toc a:hover { color: var(--green-lit); }

/* ---------- callout ---------- */
.lg-note {
  border-left: 2px solid var(--green); background: var(--bg-alt);
  padding: 16px 20px; margin: 22px 0; border-radius: 0 10px 10px 0;
}
.lg-note p:last-child { margin-bottom: 0; }

/* ---------- table ---------- */
.lg-table-scroll { overflow-x: auto; margin: 0 0 22px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; }
th, td {
  text-align: left; padding: 12px 14px; font-size: 14.5px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
th { color: var(--body); font-weight: 600; white-space: nowrap; }
td { color: var(--muted); }

/* ---------- footer ---------- */
.lg-footer {
  border-top: 1px solid var(--line); background: var(--bg-deep);
  padding: 40px 32px 34px; margin-top: 40px;
}
.lg-footer-inner {
  max-width: 820px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted);
}
.lg-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.lg-footer-links a { color: var(--muted); }
.lg-footer-links a:hover { color: var(--green-lit); }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .lg-header-inner { padding: 12px 20px; }
  .lg-wrap { padding: 44px 20px 68px; }
  h1 { font-size: 31px; }
  h2 { font-size: 21px; margin-top: 42px; }
  .lg-lede { font-size: 16.5px; }
  .lg-footer { padding: 32px 20px 28px; }
}