/* OttaNote — stijl voor de juridische pagina's (voorwaarden/privacy/restitutie).
   Sluit aan op de marketingsite: Elms Sans display-font, royal-blue accent. */
@font-face{
  font-family:'Elms Sans';
  src:url('/elms-sans-variable.woff2') format('woff2');
  font-weight:300 700; font-display:swap;
}
:root{
  --accent:#4169E1; --ink:#1a1a1a; --muted:#6b6b6b;
  --bg:#ffffff; --bg-soft:#F6F5F4; --line:#e7e6e4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.topbar{display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,40px); border-bottom:1px solid var(--line)}
.wordmark{font-family:'Elms Sans',system-ui,sans-serif; font-size:1.35rem; font-weight:600;
  color:var(--ink); text-decoration:none; letter-spacing:-0.02em}
.wordmark .otta{color:var(--accent)}
.topbar a.home{color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:600}
.topbar a.home:hover{color:var(--accent)}
.topbar-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end}
.langs{display:inline-flex; gap:2px; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:3px}
.langs a{color:var(--muted); font-size:.78rem; font-weight:600; padding:.2em .5em; border-radius:6px; text-decoration:none}
.langs a:hover{color:var(--accent)}
.langs a.active{background:#fff; color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wrap{max-width:760px; margin:0 auto; padding:clamp(32px,6vw,64px) clamp(20px,5vw,40px)}
h1,h2,h3{font-family:'Elms Sans',system-ui,sans-serif; letter-spacing:-0.02em; line-height:1.15; color:var(--ink)}
h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .15em}
h2{font-size:1.3rem; margin:1.9em 0 .5em}
.updated{color:var(--muted); font-size:.95rem; margin:0 0 2.4em}
ul{padding-left:1.2em}
li{margin:.35em 0}
table{border-collapse:collapse; width:100%; margin:1.1em 0; font-size:.95rem}
th,td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top}
th{background:var(--bg-soft)}
blockquote{margin:1.3em 0; padding:.85em 1.1em; background:var(--bg-soft);
  border-left:3px solid var(--accent); border-radius:6px}
code{background:var(--bg-soft); padding:.12em .35em; border-radius:4px; font-size:.9em}
.back{display:inline-block; margin-top:2.6em; color:var(--accent); text-decoration:none; font-weight:600}
footer{border-top:1px solid var(--line); padding:24px clamp(20px,5vw,40px);
  color:var(--muted); font-size:.9rem; text-align:center}
footer a{color:var(--muted); text-decoration:none; margin:0 8px}
footer a:hover{color:var(--accent)}

@media(max-width:720px){
  /* De gegevenstabel heeft drie tekstkolommen en kan niet smaller dan zo'n
     425px; op een telefoon trok die de hele pagina 71px breder dan het scherm,
     zodat je élke alinea heen en weer moest schuiven om 'm uit te lezen. Laat
     de tabel nu in z'n eigen kader schuiven en de rest van de pagina staan. */
  table{display:block; overflow-x:auto}
}