/* The three pages the app links out to: FAQ, Privacy, Impressum.
 *
 * They are real HTML files rather than app routes, because a privacy policy
 * and an Impressum must be readable when the app is broken, and because a
 * regulator reading one should not need JavaScript to do it.
 *
 * WHY THIS FILE EXISTS. All three carried their own copy of a stylesheet from
 * two design worlds ago: the #e9eef7 page, the violet accent, gradient text in
 * the heading, and Inter loaded from fonts.googleapis.com. Three consequences,
 * in order of how much they mattered:
 *
 *   1. A render-blocking request to a third-party origin on a betting site,
 *      handing a visitor's IP to Google before a word of the PRIVACY POLICY
 *      could paint. That page in particular.
 *   2. Three pages the footer links to that looked like a different product
 *      from the one they were linked from.
 *   3. Three copies of the same CSS to keep in step, which is why they had
 *      drifted in the first place.
 *
 * One file, on our own origin, in the tokens the app itself uses. Cached once
 * and shared by all three.
 */

/* The same two files the app preloads, so a visitor arriving here from the app
 * pays nothing: the font is already in the cache under the same URL. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}

/* Day, unconditionally, exactly as the app now sets it. These are the app's own
   token values, not an approximation of them. */
:root {
  color-scheme: light;
  --void: oklch(0.975 0.003 245);
  --void-deep: oklch(0.955 0.004 245);
  --paper: oklch(1 0 0);
  --sunk: oklch(0.945 0.005 245);
  --ink: oklch(0.225 0.018 245);
  --dim: oklch(0.362 0.015 245);
  --faint: oklch(0.438 0.014 245);
  --us: oklch(0.505 0.135 245);
  --them: oklch(0.505 0.115 58);
  --line: oklch(0.2 0.02 245 / 0.14);
  --tint: oklch(0.2 0.02 245 / 0.05);
  --sh-1: 0 1px 2px oklch(0.2 0.02 245 / 0.07), 0 4px 12px oklch(0.2 0.02 245 / 0.06);
  --r-sm: 12px;
  --r-md: 18px;
  --r-pill: 999px;
}

* { box-sizing: border-box; margin: 0; }

html {
  background: var(--void-deep);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  font: 16px/1.65 "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--us); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--us); outline-offset: 3px; }

/* The app's ground, reduced to its two moving parts and then stopped. These
   pages are read, not scrolled through, so the stage does not run here: one
   lamp above the fold and the page's own tint, painted once. */
.bglayers {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, oklch(0.968 0.008 240) 0%, transparent 62%);
}
.bg-aurora,
.bg-dust { display: none; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px max(18px, env(safe-area-inset-left, 0px)) calc(64px + env(safe-area-inset-bottom, 0px));
}

/* WIDTH IS THE HIERARCHY, as it is everywhere else on this site: one family,
   expanded for anything that owns a zone, and no second typeface. The heading
   used to be gradient-filled, which the design system rules out outright.
   Emphasis is weight and size. */
h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 span { color: var(--us); }
h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 32px 0 8px;
  color: var(--ink);
}
p, li { color: var(--dim); }
p b, li b { color: var(--ink); font-weight: 600; }
p + p { margin-top: 10px; }
ul { padding-left: 20px; margin-top: 6px; }
li + li { margin-top: 4px; }

.sub { color: var(--dim); margin: 10px 0 28px; max-width: 62ch; }
.updated { color: var(--faint); font-size: 14px; margin: 8px 0 10px; }

.card {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-top: 18px;
}

.addr { color: var(--ink); font-style: normal; line-height: 1.7; }
.addr b { font-weight: 700; }

/* FAQ: one question per fold, and the marker is drawn rather than typed. A
   plus sign standing in for an icon is the same shortcut as an emoji standing
   in for one, so this is a two-stroke mark that rotates into a minus. */
details {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  border-radius: var(--r-md);
  padding: 4px 20px;
  margin-bottom: 10px;
}
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 108%;
  font-size: 16px;
  color: var(--ink);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--us), var(--us)) center / 15px 1.8px no-repeat,
    linear-gradient(var(--us), var(--us)) center / 1.8px 15px no-repeat;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
details[open] summary::after { transform: rotate(135deg); }
details p { margin-top: 4px; padding-bottom: 16px; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 28px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 78%;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
}
.back:hover { background: var(--tint); }

@media (prefers-reduced-motion: reduce) {
  summary::after { transition: none; }
}