/* Uppa legal pages: the privacy policy, the health data policy and the terms, built from legal/artifacts/drafts */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
/* Greek letters from Comfortaa, a rounded face that sits well beside Fredoka (SIL OFL) */
@font-face { font-family: "Fredoka"; src: url("fonts/comfortaa-greek-wght.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
:root { --ink: #2f2636; --soft: #5c5066; --pink: #9a6c82; --line: #eadde2; --bg: #fbf6f2; --card: #ffffff; }
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--pink); text-underline-offset: 2px; }
a:hover { color: #7d5468; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.lg-head { max-width: 760px; margin: 0 auto; padding: 22px 16px; display: flex; align-items: center; justify-content: space-between; }
.lg-logo { font: 600 30px/1 "Fredoka", system-ui, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.lg-logo span { color: var(--pink); }
.lg-back { font: 500 15px "Fredoka", system-ui, sans-serif; }
.lg-end { display: flex; align-items: center; gap: 14px; }
/* the language picker, top right: a small glass pill (globe and language code) that opens a list of languages, each
   named in its own language (js/lang.js closes it) */
.lang { position: relative; }
.lang summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 15px/1 "Fredoka", system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(60, 45, 80, .16);
}
.lang li a { display: block; padding: 9px 14px; border-radius: 10px; font: 400 15px/1.2 "Fredoka", system-ui, sans-serif; color: var(--ink); text-decoration: none; }
.lang li a:hover, .lang li a:focus-visible { background: #f4eff6; outline: none; }
.lang li a[aria-current] { font-weight: 600; color: var(--pink); }

.lg { max-width: 760px; margin: 0 auto; padding: 8px 16px 56px; }
.lg h1 { font: 600 clamp(32px, 6vw, 44px)/1.1 "Fredoka", system-ui, sans-serif; letter-spacing: -0.01em; margin: 10px 0 10px; text-wrap: balance; }
.lg h1 + p { color: var(--soft); margin-bottom: 18px; }
.lg h2 { font: 600 25px/1.25 "Fredoka", system-ui, sans-serif; margin: 38px 0 10px; }
.lg h3 { font: 600 19px/1.3 "Fredoka", system-ui, sans-serif; margin: 22px 0 6px; }
.lg p { margin: 10px 0; }
.lg ul, .lg ol { margin: 10px 0; padding-left: 24px; }
.lg li { margin: 5px 0; }
.lg li ul { margin: 4px 0; }
.tw { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.lg table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.lg th, .lg td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 120px; }
.lg tr:last-child td { border-bottom: 0; }
.lg th { font-weight: 600; background: #f6eef0; }
.lg-foot { border-top: 1px solid var(--line); padding: 24px 16px 40px; text-align: center; color: var(--soft); font-size: 14px; }
.lg-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 10px; font-size: 15px; }
.lg-foot [aria-current="page"] { color: var(--ink); text-decoration: none; font-weight: 600; }