/* ════════════════════════════════════════════════════════════════
   Fince — publieke pagina's
   ────────────────────────────────────────────────────────────────
   Eén stylesheet voor login, registratie, voorwaarden, privacy en
   contact. Zelfde designtaal als het dashboard (app/static/style.css)
   en de landingspagina: monochroom, vlakken zonder rand met rechte
   hoeken, tekst waar het dashboard geen knop zou zetten. Chroma
   draagt betekenis en verschijnt hier alleen in meldingen.

   De tokens zijn dezelfde als in style.css; de typeschaal is groter,
   omdat deze pagina's op armlengte gelezen worden en niet van dichtbij
   afgescand zoals een dashboard.
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --accent:#4a4f55;
  --bg:#08090a;--bg2:#0f1011;--bg3:#151719;--bg4:#1c1f22;
  --sf1:rgba(255,255,255,.025);--sf2:rgba(255,255,255,.05);--sf3:rgba(255,255,255,.08);
  --bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.10);--bd3:rgba(255,255,255,.14);
  --t1:#f7f8f8;--t2:#9ca1aa;--t3:#80858e;
  --pos:#2f9e5f;--pos-bg:rgba(47,158,95,.11);--pos-bd:rgba(47,158,95,.26);
  --neg:#d84158;--neg-bg:rgba(216,65,88,.11);--neg-bd:rgba(216,65,88,.26);
  --ff:'Geist','Helvetica Neue',sans-serif;
  --fs-micro:10px;--fs-xs:11px;--fs-sm:12.5px;--fs-md:14px;--fs-lg:16px;
  --fs-h3:17px;--fs-h2:clamp(24px,3.2vw,34px);--fs-h1:clamp(30px,4.6vw,50px);
  --r-sm:5px;--r-md:7px;
  --tr:.18s cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:max(24px,calc((100vw - 1160px)/2));

  /* ── Afstanden ────────────────────────────────────────────────
     Dezelfde drie namen als in style.css, een maat ruimer: dit is
     lopende tekst op 14px met een regelafstand van 1,8, geen
     dashboardraster. Daarvóór stonden hier zes bijna-gelijke getallen
     (28/22/20/20/18/16) die als slordigheid lazen in plaats van als
     hiërarchie, en twee sectiematen (52 en 44) die hetzelfde bedoelden.

       --gap-vlak  blok ↔ blok binnen een kolom
       --gap-hero  paginakop ↔ eerste vlak
       --gap-sec   tekstsectie ↔ tekstsectie                        */
  --gap-vlak:20px;
  --gap-hero:28px;
  --gap-sec:48px;
}
html[data-theme="light"]{
  color-scheme:light;
  --accent:#3a3e43;
  --bg:#f7f8f9;--bg2:#ffffff;--bg3:#ffffff;--bg4:#eef0f2;
  --sf1:rgba(0,0,0,.02);--sf2:rgba(0,0,0,.045);--sf3:rgba(0,0,0,.075);
  --bd:rgba(0,0,0,.07);--bd2:rgba(0,0,0,.11);--bd3:rgba(0,0,0,.16);
  --t1:#101113;--t2:#5c616b;--t3:#6d727b;
  --pos:#0f7a45;--pos-bg:rgba(15,122,69,.10);--pos-bd:rgba(15,122,69,.24);
  --neg:#b3202f;--neg-bg:rgba(179,32,47,.10);--neg-bd:rgba(179,32,47,.24);
}
html[data-theme="light"] .only-dark{display:none}
html:not([data-theme="light"]) .only-light{display:none}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--t1);font-family:var(--ff);font-size:var(--fs-md);line-height:1.6;
     -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
     min-height:100svh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--sf3);color:var(--t1)}

/* ── Navigatie ─────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:56px;display:flex;align-items:center;
     gap:24px;padding:0 var(--pad);background:color-mix(in srgb,var(--bg) 76%,transparent);
     backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bd)}
.brand img{height:26px;width:auto;display:block}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-theme{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:color var(--tr)}
.nav-theme:hover{color:var(--t1)}
.nav-theme svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .nav-theme .ic-moon{display:none}
html:not([data-theme="light"]) .nav-theme .ic-sun{display:none}

/* Acties zijn tekst, geen pillen — zoals in het dashboard. */
.act{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;color:var(--t1);
     white-space:nowrap;transition:gap var(--tr),color var(--tr)}
.act svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act:hover{gap:10px}
.act-sub{font-size:var(--fs-sm);color:var(--t3);white-space:nowrap;transition:color var(--tr)}
.act-sub:hover{color:var(--t1)}

/* ── Tekstpagina's (voorwaarden, privacy, contact) ─────────── */
/* Geen eigen max-width: --pad centreert de kolom van 1160px al, precies zoals
   bij de nav en de footer. Allebei toepassen zou de marge verdubbelen en de
   inhoud naar binnen duwen, uit lijn met de balken erboven en eronder. */
main{flex:1;width:100%;padding:132px var(--pad) 96px}
.kicker{display:flex;align-items:center;gap:12px;font-size:var(--fs-micro);letter-spacing:.12em;
        text-transform:uppercase;color:var(--t3);font-weight:500;margin-bottom:22px}
.kicker::before{content:"";width:4px;height:4px;background:var(--t3)}
h1{font-size:var(--fs-h1);font-weight:500;letter-spacing:-.035em;line-height:1.05;max-width:18ch;text-wrap:balance}
.updated{margin-top:16px;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.intro{margin-top:var(--gap-vlak);font-size:var(--fs-lg);color:var(--t2);font-weight:300;line-height:1.65;max-width:62ch;text-wrap:pretty}

.body-txt{margin-top:var(--gap-sec);border-top:1px solid var(--bd)}
.body-txt h2{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em;color:var(--t1);
             margin:var(--gap-sec) 0 14px;display:flex;align-items:baseline;gap:14px}
.body-txt h2 .n{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--t3);font-weight:500}
.body-txt p{color:var(--t2);font-weight:300;font-size:var(--fs-sm);line-height:1.8;margin-bottom:14px;max-width:78ch}
.body-txt ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;max-width:78ch}
.body-txt li{display:flex;gap:12px;color:var(--t2);font-weight:300;font-size:var(--fs-sm);line-height:1.75;
             padding:9px 0;border-top:1px solid var(--bd)}
.body-txt li:first-child{border-top:none}
.body-txt li::before{content:"";width:4px;height:4px;background:var(--t3);flex-shrink:0;margin-top:9px}
.body-txt strong{color:var(--t1);font-weight:500}
/* Termenlijst: begrip links, uitleg rechts, in twee vaste kolommen. Zonder
   dit bepaalt de lengte van het begrip waar de uitleg begint, en dan staat
   elke regel op een andere positie — precies wat een opsomming van definities
   onleesbaar maakt. De omschrijving is een los tekstdeel in de <li>; in een
   grid wordt dat vanzelf een eigen kolom. */
.body-txt ul.defs li{display:grid;grid-template-columns:4px 172px 1fr;gap:0 14px;align-items:start}
.body-txt ul.defs li strong{line-height:1.75}
@media(max-width:720px){
  /* Te smal voor twee kolommen. Terug naar gewone tekstloop: het begrip loopt
     door in de zin. Niet naar een smallere kolomindeling, want de omschrijving
     is een naamloos tekstdeel — dat is met geen enkele selector te plaatsen en
     belandt dan in de bulletkolom van vier pixels. */
  .body-txt ul.defs li{display:flex;gap:12px}
}
.body-txt a{color:var(--t1);border-bottom:1px solid var(--bd2);transition:border-color var(--tr)}
.body-txt a:hover{border-color:var(--t1)}
/* Uitgelicht blok: een vlak zonder rand, zoals overal in het dashboard. */
.callout{background:var(--bg2);padding:16px 18px;margin:var(--gap-vlak) 0;max-width:78ch;
         color:var(--t2);font-size:var(--fs-sm);font-weight:300;line-height:1.75}
.callout strong{color:var(--t1)}

/* ── Auth (login & registratie) ────────────────────────────── */
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:104px var(--pad) 72px}
.auth{width:100%;max-width:420px}
.auth h1{font-size:clamp(24px,3.4vw,32px);max-width:none}
.auth .sub{margin-top:12px;font-size:var(--fs-md);color:var(--t2);font-weight:300;line-height:1.6}
.panel{margin-top:var(--gap-hero);background:var(--bg2);padding:26px 24px 24px}

.notice{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);font-weight:300;line-height:1.55;
        padding:11px 13px;margin-bottom:var(--gap-vlak)}
.notice.err{background:var(--neg-bg);color:var(--neg)}
.notice.ok{background:var(--pos-bg);color:var(--pos)}
.notice.info{background:var(--bg);color:var(--t2)}
html[data-theme="light"] .notice.info{background:var(--bg4)}
.notice a{color:inherit;text-decoration:underline;font-weight:500}

/* Google is de zij-ingang: een vlak zonder rand, zoals overal in het
   dashboard. De omlijning maakte er een knop van die met de hoofdactie
   concurreerde. */
.btn-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
           background:var(--bg);color:var(--t2);border-radius:0;
           padding:12px 18px;font-size:var(--fs-sm);font-weight:500;
           transition:color var(--tr),background var(--tr)}
html[data-theme="light"] .btn-oauth{background:var(--bg4)}
.btn-oauth:hover{color:var(--t1)}
.btn-oauth svg{flex-shrink:0}

.divider{display:flex;align-items:center;gap:12px;margin:var(--gap-vlak) 0;font-size:var(--fs-micro);
         letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:500}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--bd)}

form{display:flex;flex-direction:column;gap:15px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
             font-size:var(--fs-sm);font-weight:500;color:var(--t1);margin-bottom:7px}
.field label .aside{font-size:var(--fs-xs);color:var(--t3);font-weight:400;transition:color var(--tr)}
.field label .aside:hover{color:var(--t1)}
.field input{width:100%;background:var(--bg);border:1px solid var(--bd2);border-radius:var(--r-sm);
             padding:10px 13px;color:var(--t1);font-family:inherit;font-size:var(--fs-md);line-height:1.3;
             outline:none;transition:border-color var(--tr)}
html[data-theme="light"] .field input{background:var(--bg4)}
.field input::placeholder{color:var(--t3)}
.field input:focus{border-color:var(--bd3)}
.hint{font-size:var(--fs-xs);color:var(--t3);font-weight:300;margin-top:6px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);color:var(--t2);
       font-weight:300;line-height:1.5;cursor:pointer}
.check input{margin-top:2px;accent-color:var(--t1);flex-shrink:0}

/* De hoofdactie krijgt dezelfde rand en hoeken als de invoervelden erboven,
   zodat het formulier als één stapel leest. Alleen de tekst is voller en
   lichter — dat is genoeg onderscheid, zonder kleur of een gevuld vlak. */
.btn-main{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
          background:transparent;color:var(--t1);
          border:1px solid var(--bd2);border-radius:var(--r-sm);
          padding:12px 20px;margin-top:4px;
          font-size:var(--fs-md);font-weight:600;
          transition:border-color var(--tr),background var(--tr)}
.btn-main:hover{border-color:var(--bd3);background:var(--sf1)}
.btn-main svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.perks{margin-top:var(--gap-vlak);padding-top:16px;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:9px}
.perk{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);color:var(--t2);font-weight:300}
.perk svg{width:12px;height:12px;fill:none;stroke:var(--t3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:4px}

.swap{margin-top:var(--gap-vlak);font-size:var(--fs-sm);color:var(--t3);text-align:center}
.swap a{color:var(--t1);font-weight:500}
.swap a:hover{text-decoration:underline}

/* ── Footer ────────────────────────────────────────────────── */
footer{border-top:1px solid var(--bd);padding:34px var(--pad);display:flex;justify-content:space-between;
       align-items:center;gap:20px;flex-wrap:wrap;width:100%}
footer img{height:22px;width:auto;display:block;opacity:.8}
.fl{display:flex;gap:22px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--t3)}
.fl a{transition:color var(--tr)}
.fl a:hover{color:var(--t1)}

/* ── Reveal ────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── Responsief ────────────────────────────────────────────── */
@media(max-width:640px){
  /* Zelfde goot als de aandeel-pagina's op een telefoon (20px), en een
     krappere nav-goot: op 390px stak "Gratis starten" 2px buiten beeld,
     want brand + drie acties passen daar niet in 24px marge met 20px
     tussenruimte. */
  :root{--gap-vlak:16px;--gap-hero:24px;--gap-sec:36px;
        --pad:max(20px,calc((100vw - 1160px)/2))}
  .nav{gap:16px}
  .nav-right{gap:14px}
  main{padding-top:104px;padding-bottom:72px}
  .stage{padding:88px 20px 56px}
  .panel{padding:20px 18px}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
  .fl{gap:8px 18px}
}