/* Shared styles for the legal pages (privacy.html, terms.html).
   Brand tokens mirror the :root block in index.html — keep them in sync. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:      #f26b1d;
  --brand-deep: #c2410c;
  --brand-pale: #fff6ef;
  --off-white:  #f7f9fc;
  --ink:        #0a0f1e;
  --ink-light:  #3a4165;
  --ink-faint:  #7a84a8;
  --border:     rgba(242,107,29,.14);
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── NAV ─────────────────────────────────────────────────────── */
.legal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 820px; margin: 0 auto; padding: 1.5rem 5vw;
}
.legal-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--ink); letter-spacing: -.02em; text-decoration: none;
}
.legal-logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.legal-logo .accent { color: var(--brand); }
.legal-back {
  font-size: .85rem; color: var(--ink-faint); text-decoration: none;
  transition: color .2s;
}
.legal-back:hover { color: var(--brand); }

/* ─── DOCUMENT ────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 820px; margin: 0 auto;
  padding: 2rem 5vw 5rem;
}
.legal-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .6rem;
}
.legal-wrap h1 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em;
  line-height: 1.1; margin-bottom: .5rem;
}
.legal-updated {
  font-size: .85rem; color: var(--ink-faint);
  padding-bottom: 2rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.legal-wrap h2 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.3;
  margin: 2.75rem 0 .85rem;
}
.legal-wrap h3 {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 1rem; letter-spacing: -.01em;
  margin: 1.75rem 0 .6rem; color: var(--ink-light);
}
.legal-wrap p { color: var(--ink-light); font-weight: 300; margin-bottom: 1rem; }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 1rem 1.25rem; }
.legal-wrap ol { margin-bottom: 1.5rem; }
.legal-wrap ol li { margin-bottom: 1rem; }
.legal-wrap li {
  color: var(--ink-light); font-weight: 300;
  margin-bottom: .6rem; padding-left: .35rem;
}
.legal-wrap li::marker { color: var(--brand); }
.legal-wrap strong { color: var(--ink); font-weight: 600; }
.legal-wrap a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--border); }
.legal-wrap a:hover { border-bottom-color: var(--brand); }

/* ─── TABLES ──────────────────────────────────────────────────── */
/* wrapper scrolls on narrow screens so the page body never does */
.legal-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: 12px;
}
.legal-wrap table { border-collapse: collapse; width: 100%; min-width: 420px; }
.legal-wrap th, .legal-wrap td {
  text-align: left; vertical-align: top; padding: .7rem .9rem;
  font-size: .85rem; line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.legal-wrap th {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .76rem;
  letter-spacing: .02em; color: var(--ink); background: var(--brand-pale);
  white-space: nowrap;
}
.legal-wrap td { color: var(--ink-light); font-weight: 300; }
.legal-wrap tr:last-child th, .legal-wrap tr:last-child td { border-bottom: 0; }

/* ─── CALLOUTS ────────────────────────────────────────────────── */
.legal-callout {
  background: var(--brand-pale); border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 12px; padding: 1.1rem 1.3rem;
  font-size: .88rem; color: var(--ink-light); font-weight: 300;
  margin-bottom: 2rem;
}
.legal-callout ul { margin: .7rem 0 .2rem 1.1rem; }
.legal-callout li { font-size: .88rem; margin-bottom: .45rem; }
.legal-wrap code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; background: rgba(10,15,30,.06);
  padding: .1em .38em; border-radius: 4px;
}

/* team-facing reminder — deliberately louder, meant to be deleted pre-launch */
.legal-callout-warn {
  background: #fff8e6; border-color: rgba(217,119,6,.25);
  border-left-color: #d97706;
  margin-top: 3rem; margin-bottom: 0;
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
.legal-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 5vw; text-align: center;
}
.legal-footer p { font-size: .78rem; color: var(--ink-faint); margin-bottom: .4rem; }
.legal-footer a { color: var(--ink-faint); text-decoration: none; }
.legal-footer a:hover { color: var(--brand); }