/*
 * The legal and contact pages (terms, privacy, refunds, data processing,
 * GDPR, contact) in the site's design (Joachim, 2026-10-14): the green bar
 * with the white logo, the grey page, the text on the apps' card frame,
 * Quicksand headings (was Fredoka), green links and faded lines. Replaces each page's own
 * pop-art styles (dotted paper, thick black borders, coloured drop shadows).
 */
:root {
  --font-ui: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-card: 12px;
  --shadow-card: 0 0 20px rgba(0, 0, 0, 0.07);
  --color-page-bg: #D9D9D9;
  --color-canvas: #E0E0E0;
  --color-brand-green: #5CA23E;
  --color-ink-2: #202020;
  --color-grey-mid: #808080;
  --color-grey-line: #C8C8C8;
  --color-white-outline: #FFFFFF33;
  --rule-fade: linear-gradient(90deg, transparent, #A7A7A7 12%, #A7A7A7 88%, transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--color-ink-2);
  background: var(--color-page-bg);
  line-height: 1.6;
}

/* The bar: the site's green navbar, logo home on the left. */
.legal-top {
  max-width: 1140px;
  margin: 16px 16px 0;
  padding: 0 clamp(16px, 3vw, 28px);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-brand-green);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 1172px) { .legal-top { margin: 24px auto 0; } }
.legal-top .brand { display: inline-flex; line-height: 0; }
.legal-top .brand img { height: 20px; width: auto; }
.legal-top .back {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none;
}
.legal-top .back:hover { background: rgba(255, 255, 255, 0.14); }

/* The document, on a card. */
.wrap {
  max-width: 800px;
  margin: 32px auto 64px;
  padding: clamp(24px, 5vw, 48px);
  background: var(--color-canvas);
  border: 1px solid #FFFFFF;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (max-width: 832px) { .wrap { margin: 24px 16px 48px; } }

h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.15; font-weight: 700; margin: 0 0 8px; }
.subtitle { color: var(--color-grey-mid); font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.updated { color: var(--color-grey-mid); font-size: 13px; font-weight: 500; margin: 0 0 32px; padding-top: 12px; position: relative; }
.updated::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-fade); }
h2 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 36px 0 12px; }
h3 { font-size: 17px; font-weight: 600; margin: 20px 0 8px; }
p, li { font-size: 15px; color: #3A3A3A; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }
a { color: var(--color-brand-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.82; }
strong { color: var(--color-ink-2); font-weight: 600; }
code { font-size: 13px; background: rgba(255, 255, 255, 0.6); padding: 1px 6px; border-radius: 6px; }

/* Boxes inside the document: a lighter card, the same frame. */
.callout, .card, .company-box, .right-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #FFFFFF;
  border-radius: var(--radius-card);
  padding: 18px 22px;
  margin: 20px 0;
}
.callout p:last-child, .card p:last-child, .right-card p:last-child { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
.card-grid .card { margin: 0; }
.card h3, .right-card h3 { margin: 0 0 6px; }
.right-card { margin: 0 0 14px; }
.right-card p { font-size: 14px; margin: 0 0 8px; }
.right-card .how { font-size: 13px; color: var(--color-grey-mid); margin: 0; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-grey-line); vertical-align: top; }
th { font-weight: 600; color: var(--color-ink-2); }
td { color: #3A3A3A; }

.home-link { display: inline-block; margin-top: 24px; font-size: 14px; }
.footer { margin-top: 48px; padding-top: 24px; position: relative; font-size: 13px; color: var(--color-grey-mid); }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-fade); }
.footer p, .footer li { font-size: 13px; color: var(--color-grey-mid); }
.footer a { color: var(--color-grey-mid); }

/* Language picker in the bar (no script: a <details> that opens a list). */
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF; font-size: 14px; font-weight: 600;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: '▾'; font-size: 12px; }
.langs summary:hover { background: rgba(255, 255, 255, 0.14); }
.langs nav {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 10; min-width: 170px;
  max-height: 320px; overflow-y: auto; padding: 4px 0;
  background: var(--color-grey-mid); border: 2px solid var(--color-white-outline); border-radius: 10px;
}
.langs nav a { display: block; padding: 8px 14px; color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none; }
.langs nav a:hover, .langs nav a[aria-current] { background: rgba(255, 255, 255, 0.18); opacity: 1; }

/* Above the content of a translated page. */
.translation-note {
  font-size: 13px; color: var(--color-grey-mid); margin: 0 0 24px;
  padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.45);
}