/* Shared styles for the static legal pages (/privacy, /terms, /support,
   /copyright).
   Palette + type roles mirror src/styles.css and the marketing page —
   keep in sync with the freewheel-design skill if those change. */
:root {
  --screen: #F6EFE1;
  --forest: #2E4F4D;
  --pine: #1C3733;
  --fluoro: #C7F04A;
  --ink: #23201C;
  --ink-secondary: rgba(35, 32, 28, 0.55);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--screen);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 96px; }
header.site {
  padding: 22px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 30px;
  color: var(--forest);
  text-decoration: none;
}
.backlink {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
}
.eyebrow {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 56px 0 10px;
}
/* Headings hyphenate and never overrun the page. "Terms of Use" is three short
   words; "Nutzungsbedingungen" and "Datenschutzerklärung" are one word each,
   wider than a 390px phone at this size, and the German page shipped its
   heading cut off at the right edge (found on `npm run world`'s own
   screenshot, 2026-09-06). `hyphens: auto` breaks them the way a German
   reader expects, using the page's lang; `overflow-wrap: anywhere` is the
   floor for a word the dictionary does not know. */
h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--pine);
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
  margin-bottom: 28px;
}
h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--forest);
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
  margin: 40px 0 10px;
}
/* Support asks a question and answers it, which privacy and terms never do,
   so it needs a third level the other two pages have no use for. Sits between
   h2 and body: the body face rather than display, because at 17px Bricolage
   next to a 22px Bricolage h2 reads as a broken h2 rather than a rung below
   it. */
h3 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 26px 0 6px;
}
/* The one thing on the support page a reader may have arrived specifically
   to find: the address to write to. Boxed so it survives a skim, in the
   band cream the marketing page uses for the same job. */
.callout {
  background: #EFE7D7;
  border-radius: 16px;
  padding: 22px 24px;
  margin: 28px 0 8px;
}
.callout p { margin-bottom: 0; }
.callout p a {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.callout-label {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 8px;
}
.callout-note {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-secondary);
}
p { margin-bottom: 14px; }
ul { margin: 0 0 14px 22px; }
li { margin-bottom: 8px; }
a { color: var(--forest); }
.meta {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 40px;
}
footer.site {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid rgba(35, 32, 28, 0.12);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-secondary);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer.site a { color: var(--ink-secondary); }

/* THE SAME PAGE IN THE OTHER SIX LANGUAGES (2026-09-06). Every legal page
   exists in the app's seven languages, generated from one template
   (scripts/legal). The row is the mono label role, like .backlink: names
   rather than flags, the current language unlinked. */
nav.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 2px 0 0;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
nav.langs a { color: var(--forest); text-decoration: none; }
nav.langs span { color: var(--ink-secondary); }
/* a translation says so, once, under the date */
.translated { margin: -18px 0 24px; font-size: 14px; color: var(--ink-secondary); }