/* Standalone stylesheet for the legal pages.

   Deliberately independent of site.css: that file is a Tailwind build whose
   @source only scans index.html, so utility classes used here would be purged
   on the next rebuild. Plain CSS keeps the legal pages correct no matter what
   happens to the marketing build. */

:root {
  --brand: rgb(160 2 52);
  --ink: #1a1a2e;
  --paper: #ffffff;
  --soft: #f7f3f5;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.legal-header {
  background: var(--ink);
  color: #fff;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.25rem 1.25rem;
}
.legal-header-inner {
  max-width: 52rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.legal-header a { color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.legal-header a:hover { text-decoration: underline; }
.legal-logo { background: #fff; border-radius: .5rem; padding: .4rem .6rem; display: inline-flex; }
.legal-logo img { height: 1.75rem; width: auto; display: block; }

main.legal {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.legal h1 {
  font-family: 'Sora', 'Figtree', sans-serif;
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
}
.legal h2 {
  font-family: 'Sora', 'Figtree', sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(26, 26, 46, .1);
}
.legal h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.legal p, .legal li { color: rgba(26, 26, 46, .8); }
.legal a { color: var(--brand); }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: .4rem; }

.legal-lead { font-size: 1.0625rem; color: rgba(26, 26, 46, .7); }
.legal-updated { font-size: .875rem; color: rgba(26, 26, 46, .5); margin-bottom: 2rem; }

.legal-toc {
  background: var(--soft);
  border: 1px solid rgba(26, 26, 46, .08);
  border-radius: .9rem;
  padding: 1.1rem 1.35rem;
  margin: 2rem 0;
}
.legal-toc p { font-weight: 700; margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(26, 26, 46, .55); }
.legal-toc ol { margin: 0; }

.legal-box {
  background: var(--soft);
  border-left: 3px solid var(--brand);
  border-radius: .5rem;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.legal-box p:first-child { margin-top: 0; }
.legal-box p:last-child { margin-bottom: 0; }

table.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .9375rem;
}
table.legal-table th, table.legal-table td {
  border: 1px solid rgba(26, 26, 46, .12);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}
table.legal-table th { background: var(--soft); font-weight: 700; }
.legal-table-wrap { overflow-x: auto; }

/* Marks a field the operator still has to supply. Visible on purpose: an
   obviously blank field is honest, a plausible invented one is not. */
.todo {
  background: #fff3cd;
  border: 1px dashed #b8860b;
  border-radius: .3rem;
  padding: 0 .35rem;
  font-size: .9em;
  color: #7a5c00;
  white-space: normal;
}

.legal-footer {
  border-top: 1px solid rgba(26, 26, 46, .1);
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  font-size: .875rem;
  color: rgba(26, 26, 46, .55);
}
.legal-footer-inner { max-width: 52rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.legal-footer a { color: rgba(26, 26, 46, .7); }

.legal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .65rem 1.15rem; border-radius: .75rem;
  font-size: .9375rem; font-weight: 600; line-height: 1;
  background: var(--brand); color: #fff; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
}
.legal-btn:hover { opacity: .9; }
.legal-btn-secondary { background: #fff; color: var(--ink); border-color: rgba(26, 26, 46, .25); }
.legal-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.legal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }