/* Styles for the privacy notice and terms.

   These two pages used to pull Tailwind from cdn.tailwindcss.com and fonts
   from Google. Two third parties received every reader's IP address from the
   page that explains we do not share their data — and the Tailwind CDN is a
   just-in-time compiler that runs in the browser, so the pages also needed
   script execution to render text.

   This is the sixty-odd utility classes those pages actually use, written out
   by hand. It is smaller than the CDN's own runtime, needs no JavaScript at
   all, and lets the legal pages carry a Content-Security-Policy strict enough
   to be worth having. Keep it in step by hand if the markup changes; there is
   deliberately no build step in this project.

   The page-specific rules (.prose, .summary, .ph, .toc) were already inline in
   both files and are gathered here so the two pages cannot drift apart. */

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
table { border-collapse: collapse; }

/* ── brand ──
   From the brand brief. The legal pages carry their own stylesheet, so these
   are stated here as well as in index.html rather than shared — two files,
   four constants, and no build step between them. */
:root{
  --brand-navy:#0D1B2A;
  --brand-cream:#FAF8F5;
  --brand-card:#FFFDFA;
}

/* ── type ── */
* { font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.serif { font-family: 'Instrument Serif', Georgia, serif; }
body { background: var(--brand-cream); }

/* ── layout ── */
.min-h-screen { min-height: 100vh; }
.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-30 { z-index: 30; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.place-items-center { place-items: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }

/* ── spacing ── */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pl-5 { padding-left: 1.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }

/* ── colour and surface ── */
.bg-\[\#FBF8F3\] { background-color: var(--brand-cream); }
.bg-\[\#FBF8F3\]\/80 { background-color: rgba(250, 248, 245, 0.85); }
.bg-zinc-900 { background-color: var(--brand-navy); }
.hover\:bg-white:hover { background-color: #fff; }
.text-white { color: #fff; }
.text-zinc-900 { color: var(--brand-navy); }
.text-zinc-600 { color: #52525b; }
.text-zinc-500 { color: #71717a; }
.hover\:text-zinc-900:hover { color: var(--brand-navy); }
.border { border: 1px solid transparent; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-zinc-200 { border-color: #e4e4e7; }
.rounded-full { border-radius: 9999px; }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.transition { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.list-disc { list-style: disc; }

/* ── text ── */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-\[11px\] { font-size: 11px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[13px\] { font-size: 13px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[15px\] { font-size: 15px; }
.text-\[19px\] { font-size: 19px; }
.text-\[36px\] { font-size: 36px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-\[1\.05\] { line-height: 1.05; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-\[-0\.02em\] { letter-spacing: -0.02em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }

@media (min-width: 768px) {
  .md\:text-\[44px\] { font-size: 44px; }
}

/* ── the documents themselves ── */
.prose h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; letter-spacing: -0.02em; margin-top: 2.5rem; margin-bottom: 0.75rem; font-weight: 400; }
.prose h3 { font-size: 15px; font-weight: 500; margin-top: 1.5rem; margin-bottom: 0.375rem; }
.prose p, .prose li { font-size: 14px; line-height: 1.75; color: #3f3f46; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 13px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid #e4e4e7; }
.prose th { background: var(--brand-card); font-weight: 500; }
.prose a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 2px; }

/* A table on a phone is the one thing that will overflow, and the retention
   table is the part people actually come here to read. */
.prose table { display: block; overflow-x: auto; }

/* Placeholder still to be filled in before publishing. */
.ph { background: #FEF3C7; border-bottom: 1px solid #FCD34D; padding: 0 3px; border-radius: 2px; font-weight: 500; }

.summary { border: 1px solid #e4e4e7; background: var(--brand-card); border-radius: 16px; padding: 20px 24px; margin-top: 2rem; }
.summary li { font-size: 13.5px; line-height: 1.7; }

.callout { border: 1px solid #e4e4e7; background: var(--brand-card); border-radius: 16px; padding: 18px 22px; margin: 1.5rem 0; }
.callout p { font-size: 13.5px; margin: 0; }

.toc a { font-size: 13px; color: #52525b; text-decoration: none; }
.toc a:hover { color: var(--brand-navy); text-decoration: underline; }