/* Shared by privacy.html and terms.html.
 *
 * index.html deliberately keeps its CSS inline — it is the page that has to paint fast and
 * it is the one people link to. These two are text documents that nobody reads twice, so
 * they share a file rather than carrying two copies of the same tokens that then drift.
 *
 * Tokens are the same names and values as index.html's. Keep them in step: a legal page in
 * a different blue than the page that links to it reads as someone else's site, which is the
 * one impression a privacy policy cannot afford to give. */

/* Inter, self-hosted from lambdabit.dev's own /assets — same four weights and the same
 * `font-display: swap` as index.html and as the consultancy site. Root-relative, so it does
 * not matter that this stylesheet lives a directory deeper. Nothing third-party is fetched:
 * privacy.html tells the reader this site loads no fonts from elsewhere, and it must stay true. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Inter_18pt-Regular.woff2') format('woff2'),
       url('/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/Inter_18pt-Medium.woff2') format('woff2'),
       url('/assets/fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/Inter_18pt-SemiBold.woff2') format('woff2'),
       url('/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Inter_18pt-Bold.woff2') format('woff2'),
       url('/assets/fonts/Inter_18pt-Bold.ttf') format('truetype');
}

:root {
  --color-primary: #4F46E5;
  --color-secondary: #8A2BE2;
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --bg-card: #ffffff;
  --text: #1f2937;
  --text-soft: #4b5563;
  --border: #e5e7eb;
  --accent: var(--color-primary);
  --footer-bg: #111827;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

/* Light only, matching index.html — the dark palette that was here is gone. The reasoning is
   written out in index.html next to the same deletion; the short version is that the rest of
   lambdabit.dev is light-only and a dark page reached from a white one reads as a different
   site. These two files have to stay in step: a privacy policy in a different theme than the
   page linking to it is exactly the impression a privacy policy cannot afford to give. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-card);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); }

/* Only 400/500/600/700 exist as files; 650 and 750 were being faux-bolded by the browser. */
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 .3em; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 2.2em 0 .6em; }
h3 { font-size: 1.02rem; font-weight: 600; margin: 1.6em 0 .4em; }
p, li { margin: 0 0 1em; }
ul { padding-left: 1.3em; }

/* White on a shadow, matching index.html and the consultancy site's `.main-header`. */
header {
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}
header .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; flex-wrap: wrap; }
/* Same breadcrumb, logo and breakpoints as index.html — see the comments there. These two
   pages had no link to lambdabit.dev anywhere at all, header or footer, so they were the
   worst case of it. */
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; letter-spacing: -.01em; }
.brand a { text-decoration: none; }
.brand-parent { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.brand-parent img { display: block; height: 34px; width: auto; }
.brand-parent:hover { opacity: .8; }
.brand-sep { color: #cbd5e1; font-weight: 300; }
.brand-product { color: var(--text-soft); font-weight: 500; white-space: nowrap; }
.brand-product:hover { color: var(--text); }
header nav { margin-left: auto; display: flex; gap: 20px; }
header nav a { text-decoration: none; color: var(--text-soft); font-size: .95rem; font-weight: 500; }
header nav a:hover { color: var(--color-primary); }
/* Breakpoints match index.html's. 360 rather than 400 so a 390px phone still sees which page
   it is on — see the reasoning next to the same rule there. */
@media (max-width: 720px) {
  .brand { gap: 6px; font-size: .9rem; }
  .brand-parent .brand-word { display: none; }
  .brand-parent img { height: 30px; }
  header nav { gap: 14px; }
  header nav a { font-size: .85rem; }
}
@media (max-width: 360px) { .brand-sep, .brand-product { display: none; } }

main { padding: 48px 0 72px; }

.updated { color: var(--text-soft); font-size: .95rem; margin-bottom: 2.5em; }

/* The short answer, above the document, for the reader who will not read the document. */
.summary {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 0 2.5em;
}
.summary p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 0 0 1.5em; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 650; }
/* Scope names must not break mid-token — `.../auth/spread sheets` reads as two things and
   this table's whole job is to let someone check the list against their consent screen.
   The wrapping .scroll-x takes the overflow on narrow screens instead. */
td code { font-size: .88em; white-space: nowrap; }

/* Wide content must scroll inside itself rather than widening the page. */
/* Same affordance as index.html's tables — see the long comment there. This one matters more
   than it looks: the permissions table is the thing a cautious reader came to check against
   their consent screen, and a silently clipped column is how they conclude something is being
   hidden from them. */
.scroll-x { overflow-x: auto; }
.scroll-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scroll-note { display: none; }
@media (max-width: 720px) {
  .scroll-x {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .scroll-note { display: block; margin: 10px 0 0; font-size: .85rem; color: var(--text-soft); }
}

/* #111827, matching index.html and the consultancy site's `.main-footer`. */
footer {
  background: var(--footer-bg);
  padding: 28px 0;
  color: #9ca3af;
  font-size: .9rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
footer a { color: #d1d5db; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }