/* NitroStudy's legal pages (privacy, voorwaarden, cookies): one calm reading column on the app's night (always dark, like the app), with the
   legal documents linked in a glass bar at the top. */
:root {
  --bg:#05060c; --paper:rgba(255,255,255,.035); --paper-solid:#0d1019; --ink:#eef1f8; --muted:#a3abc0; --line:rgba(255,255,255,.09);
  --accent:#fbbf24; --link:#67e8f9; --ok:#34d399; --note:rgba(251,191,36,.09); --note-line:rgba(251,191,36,.28);
  --glow-a:rgba(34,211,238,.13); --glow-b:rgba(139,92,246,.13); --bar:rgba(5,6,12,.72); color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; min-height:100vh; color:var(--ink); font:16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(48rem 30rem at -10% -10%, var(--glow-a), transparent 70%),
    radial-gradient(40rem 28rem at 110% 0%, var(--glow-b), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
.legal { max-width:800px; margin:0 auto; padding:0 max(18px, env(safe-area-inset-right, 0px)) 80px max(18px, env(safe-area-inset-left, 0px)); }

/* Top bar: sticky glass, brand left, the three pages and the language switch as pills. */
.legal-top {
  position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:0 calc(-1 * max(18px, env(safe-area-inset-left, 0px))) 36px; padding:14px max(18px, env(safe-area-inset-left, 0px));
  background:var(--bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.legal-brand { font-weight:900; letter-spacing:.04em; color:var(--ink); text-decoration:none; font-size:18px; }
.legal-brand b { color:var(--accent); }
.legal-nav { display:flex; flex-wrap:wrap; gap:6px; }
.legal-nav a {
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--muted);
  text-decoration:none; font-size:14px; font-weight:600; transition:color .15s, border-color .15s;
}
.legal-nav a:hover { color:var(--ink); border-color:var(--muted); }
.legal-nav a[aria-current="page"] { color:#04050a; border-color:transparent; background:linear-gradient(90deg, #22d3ee, #38bdf8); }
.legal-nav a[lang] { border-style:dashed; }

h1 { font-size:clamp(32px, 6vw, 46px); line-height:1.08; letter-spacing:-.02em; margin:0 0 8px; text-wrap:balance; }
h2 { position:relative; font-size:21px; line-height:1.3; margin:44px 0 10px; padding-left:16px; text-wrap:balance; scroll-margin-top:90px; }
h2::before { content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px; border-radius:4px; background:linear-gradient(#22d3ee, #8b5cf6); }
h3 { font-size:17px; margin:22px 0 6px; }
p, li { max-width:70ch; }
ul { padding-left:22px; }
li + li { margin-top:6px; }
li::marker { color:var(--link); }
a { color:var(--link); text-underline-offset:2px; }
a:hover { text-decoration-thickness:2px; }
strong { color:var(--ink); }

.legal-updated { display:inline-block; color:var(--muted); font-size:13px; font-weight:600; margin:0 0 18px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--paper); }
.legal-concept { position:relative; padding:14px 16px 14px 46px; border-radius:14px; background:var(--note); border:1px solid var(--note-line); font-size:15px; }
.legal-concept::before { content:"!"; position:absolute; left:14px; top:14px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#1a1205; font-weight:900; font-size:14px; line-height:1; }

/* "In short": the card a reader may stop at, with check marks. */
.legal-short {
  margin-top:22px; padding:20px 22px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(var(--paper-solid), var(--paper-solid)) padding-box, linear-gradient(135deg, rgba(34,211,238,.55), rgba(139,92,246,.45)) border-box;
  border-color:transparent; box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.legal-short h2 { margin:0 0 10px; padding:0; font-size:18px; }
.legal-short h2::before { display:none; }
.legal-short ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.legal-short li { position:relative; padding-left:32px; margin:0; }
.legal-short li::before {
  content:"✓"; position:absolute; left:0; top:.15em; display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:color-mix(in srgb, var(--ok) 20%, transparent); color:var(--ok); font-size:12px; font-weight:900; line-height:1;
}

.fill { padding:1px 6px; border-radius:6px; background:var(--note); border:1px dashed var(--note-line); color:var(--accent); font-weight:600; font-size:.92em; }

.table { overflow-x:auto; margin:14px 0; border-radius:14px; border:1px solid var(--line); background:var(--paper); }
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th, td { text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
thead th { color:var(--muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; background:color-mix(in srgb, var(--link) 7%, transparent); }
tbody tr:hover td { background:color-mix(in srgb, var(--link) 4%, transparent); }
code { font:13px ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap:anywhere; padding:1px 5px; border-radius:5px; background:var(--paper); border:1px solid var(--line); }

footer { margin-top:56px; padding:18px 20px; border-radius:14px; border:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:14px; }

/* The statutory withdrawal form (herroepen.html): a card that reads like a form to copy or print. */
.legal-form { margin:14px 0; padding:18px 22px; border-radius:14px; border:1px dashed rgba(103,232,249,.35); background:var(--paper); }
.legal-form ul { list-style:none; padding:0; display:grid; gap:10px; }
.legal-form li + li { margin-top:0; }
.legal-blank { color:var(--muted); }
@media print { body { background:#fff; color:#000; } .legal-top, .legal-short, footer { display:none; } .legal-form { border-color:#000; } }
.legal-cta { display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:14px; background:linear-gradient(90deg, #fcd34d, #f59e0b); color:#1a1205; font-weight:900; text-decoration:none; box-shadow:0 10px 26px rgba(245,158,11,.25); }
.legal-cta:hover { filter:brightness(1.08); }