/* Finturion huisstijl (docs/MARKETING_CONTEXT.md) -- gedeeld tussen alle 5
   marketingpagina's. Stond eerder 5x (bijna) letterlijk gekopieerd in een
   inline <style>-blok per pagina; zie docs/MARKETING_AUDIT.md, "Rekening 01"
   punt 5 voor waarom dat een probleem was (niet cachebaar tussen
   paginawissels, en de kopieen groeiden al uit elkaar -- zie de
   header-fixed-uitzondering op demo.html hieronder). Regels die zich per
   pagina anders gedragen (bv. .fin-plan-hero zelf, of alles onder
   .fin-portal-mock/.fin-portal-chart) staan bewust NIET hier, maar blijven
   in de eigen inline <style> van die pagina.
*/
:root{
   --fin-dark:#0C1B2A;
   --fin-accent:#3B6351;
   --fin-brand:#244B3B;
   --fin-gold:#C59B63;
}
.fin-header{background:#ffffff; box-shadow:0 2px 12px rgba(12,27,42,0.08);}
.fin-header .logo_default, .fin-header .logo__sticky{max-height:42px;width:auto;}
.fin-header .navbar_nav > li > a,
.fin-header .navbar_nav > li > a span{color:var(--fin-dark)!important;}
.fin-header .navbar_nav > li.active > a,
.fin-header .navbar_nav > li.active > a span,
.fin-header .navbar_nav > li:hover > a,
.fin-header .navbar_nav > li:hover > a span{color:var(--fin-accent)!important;}
/* De themabalk klapt op max-width:1200px om naar het hamburgermenu
   (theme-css.css verbergt daar .header_content_collapse) en geeft de logo- en
   menukolom samen 100% breedte. De Inloggen-kolom stond op d-none d-lg-block en
   kwam daardoor al vanaf 992px terug, maar paste niet meer op die regel: hij
   viel als tweede rij half uit de balk, over de hero heen. Hier dus exact op
   dezelfde grens verbergen -- en in ruil daarvoor staat Inloggen onder in het
   mobiele menu, want daar ontbrak het helemaal. */
.fin-header-actie{display:none;}
@media (min-width:1201px){ .fin-header-actie{display:block;} }
.fin-mobiel-inloggen{margin-top:24px;}
/* Boven de themagrens toont het thema de volledige navigatie. Zeven Nederlandse
   menu-items pasten daar net niet op EEN regel, waardoor de balk op elke
   laptopbreedte twee regels hoog werd (165px i.p.v. 100px). Twee oorzaken: de
   kolommen stonden op 25/50/25 terwijl het logo en de knop die ruimte niet
   nodig hebben, en de items zijn inline-block -- wat per item nog een spatie
   witruimte kost die je nergens ziet maar wel meetelt. Een flexrij haalt die
   witruimte weg. Gemeten: past nu op een regel vanaf 1201px, de grens waarop
   het thema de navigatie uberhaupt toont. */
@media (min-width:1201px){
   .fin-header .logo_column{width:17%;}
   .fin-header .menu_column{width:68%;}
   .fin-header-actie{width:15%;}
   .fin-header .header_content_collapse .navigation_menu ul.navbar_nav{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
   /* Het thema zet deze marge met !important vast op
      .header.style_nine .header_content_collapse .navigation_menu .navbar_nav li
      (theme-css.css). Deze selector is een tik specifieker (ul.navbar_nav > li)
      en staat later in de cascade, dus wint zonder aan het thema te komen. */
   .fin-header.style_nine .header_content_collapse .navigation_menu ul.navbar_nav > li{margin-right:18px!important;}
   .fin-header.style_nine .header_content_collapse .navigation_menu ul.navbar_nav > li:last-child{margin-right:0!important;}
}
.fin-mobiel-inloggen .theme-btn{display:block; width:100%; text-align:center;}
.fin-btn-gold{background:var(--fin-gold)!important; border-color:var(--fin-gold)!important; color:var(--fin-dark)!important; font-weight:600;}
.fin-btn-gold:hover{background:#b1854f!important; color:#fff!important;}
.fin-btn-outline{background:transparent!important; border:2px solid var(--fin-dark)!important; color:var(--fin-dark)!important; font-weight:600;}
.fin-btn-outline:hover{background:var(--fin-dark)!important; color:#fff!important;}
.theme-btn.fin-plan-btn{background:var(--fin-brand)!important; border-color:var(--fin-brand)!important; color:#fff!important;}
.theme-btn.fin-plan-btn:hover{background:var(--fin-dark)!important;}

/* De Creote-template kleurt de header bij het scrollen (.fixed-header) terug naar
   de standaard theme-kleur (blauw-groen). #fin-main-header wint op specificiteit
   zodat de header altijd wit blijft, ook na 250px scrollen. Dit is het
   basisgedrag -- op demo.html komt in de eigen <style> nog een positie-override
   bovenop (die pagina houdt de header bewust altijd fixed). */
#header_contents{transition: min-height .5s ease;}
#fin-main-header{
   background:#ffffff!important;
   padding-top:20px!important;
   padding-bottom:15px!important;
   transition: background-color .5s ease, box-shadow .5s ease, padding .5s ease;
}
#fin-main-header.fin-shrink{
   padding-top:10px!important;
   padding-bottom:10px!important;
}
#fin-main-header .logo_default, #fin-main-header .logo__sticky{
   transition: max-height .5s ease;
}
#fin-main-header.fin-shrink .logo_default, #fin-main-header.fin-shrink .logo__sticky{
   max-height:32px;
}
#fin-main-header .navbar_nav > li > a,
#fin-main-header .navbar_nav > li > a span{color:var(--fin-dark)!important;}
#fin-main-header .navbar_nav > li.active > a,
#fin-main-header .navbar_nav > li.active > a span,
#fin-main-header .navbar_nav > li:hover > a,
#fin-main-header .navbar_nav > li:hover > a span{color:var(--fin-accent)!important;}

/* Staffel-calculator (Light/Standaard/Premium) */
.fin-calc{background:#F7F5F1; border-radius:14px; padding:40px; margin-bottom:10px;}
.fin-calc h3{font-weight:700; color:var(--fin-dark); margin-bottom:6px;}
.fin-calc .fin-calc-sub{color:#5b6b66; margin-bottom:30px;}
.fin-calc-slider-row{display:flex; align-items:center; gap:20px; margin-bottom:10px;}
.fin-calc-slider-row input[type=range]{flex:1; height:8px; border-radius:6px; accent-color:var(--fin-brand);}
.fin-calc-count{min-width:180px; font-weight:700; color:var(--fin-brand); font-size:18px; text-align:right;}
.fin-staffel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;}
@media (max-width:900px){ .fin-staffel-grid{grid-template-columns:1fr;} }
.fin-staffel-card{background:#fff; border:2px solid #e4e4e0; border-radius:10px; padding:26px 22px; transition:all .2s ease;}
.fin-staffel-card.active{border-color:var(--fin-gold); box-shadow:0 8px 24px rgba(12,27,42,0.10); transform:translateY(-4px);}
.fin-staffel-card .fin-staffel-name{text-transform:uppercase; letter-spacing:1px; font-size:13px; font-weight:700; color:var(--fin-accent); margin-bottom:8px;}
.fin-staffel-card .fin-staffel-range{font-size:15px; color:var(--fin-dark); margin-bottom:14px;}
.fin-staffel-card .fin-staffel-price{font-size:28px; font-weight:800; color:var(--fin-dark); margin-bottom:4px;}
.fin-staffel-card .fin-staffel-price span{font-size:14px; font-weight:500; color:#5b6b66;}
.fin-staffel-card ul{list-style:none; padding:0; margin:14px 0 0; font-size:14px; color:#3c4a45;}
.fin-staffel-card ul li{padding:4px 0; padding-left:20px; position:relative;}
.fin-staffel-card ul li::before{content:"\2713"; position:absolute; left:0; color:var(--fin-brand); font-weight:700;}
.fin-staffel-note{font-size:14px; color:#5b6b66; margin-top:24px;}
.fin-included-list{list-style:none; padding:0; margin:0;}
.fin-included-list li{padding:12px 0; border-bottom:1px solid #eceae4; display:flex; align-items:baseline; gap:12px;}
.fin-included-list li i{color:var(--fin-brand);}
.fin-included-list li i.fin-icon-cross{color:#c0554f;}

/* Abonnementspagina-hero: tekstonderdelen (achtergrond+padding blijven per
   pagina lokaal, want die verschillen wel -- zie demo.html). */
.fin-plan-hero .breadcrumb-fin{color:var(--fin-gold); letter-spacing:1px; font-weight:600; margin-bottom:14px;}
.fin-plan-hero .breadcrumb-fin a{color:var(--fin-gold);}
.fin-plan-hero h1{color:#fff; font-weight:800; max-width:760px; margin:0 0 18px;}
.fin-plan-hero p{color:#e7ece9; max-width:680px; font-size:18px; line-height:1.6;}

/* KPI-tegel-tekst (Standaard/Premium/demo -- de tegel zelf blijft lokaal,
   die verschilt qua achtergrond/rand per pagina) */
.fin-portal-kpi-label{display:block; font-size:12px; color:#5b6b66; margin-bottom:4px;}
.fin-portal-kpi-value{display:block; font-size:20px; font-weight:800; color:var(--fin-dark);}

/* Adviesgesprek-formulier (Premium/demo.html) */
.fin-request-form{max-width:640px; margin:0 auto;}
.fin-request-row{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px;}
.fin-request-field{flex:1 1 240px;}
.fin-request-field label{display:block; font-size:13px; font-weight:600; color:var(--fin-dark); margin-bottom:6px;}
.fin-request-field input, .fin-request-field select{width:100%; padding:12px 14px; border:1px solid #d8d2c6; border-radius:8px; font-size:14px; background:#fff; box-sizing:border-box;}
.fin-request-form button{width:100%; margin-top:8px;}
.fin-request-note{font-size:12px; color:#5b6b66; text-align:center; margin-top:14px;}
.fin-request-status{margin-top:14px; font-size:14px; text-align:center; min-height:20px;}
.fin-request-status.succes{color:var(--fin-accent); font-weight:600;}
.fin-request-status.fout{color:#b23a3a; font-weight:600;}

/* Alleen voor schermlezers -- tekstalternatief bij iconen die zelf geen tekst
   bevatten (bv. de vink/kruis-iconen in de abonnementsvergelijkingen). */
.fin-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------------------------------------------------------------------------
   Iconen: inline SVG i.p.v. de twee icoon-webfonts
   ---------------------------------------------------------------------------
   De site gebruikte in totaal 6 icoontjes (vink, kruis, envelop, sluitkruis,
   play-pijl, vink-in-cirkel), maar downloadde daarvoor op ELKE pagina twee
   complete icoonfonts: icomoon.woff (~123KB over de lijn) en
   fontawesome-webfont.woff2 (~77KB), plus icomoon.css (476 selectors, 4
   gebruikt) en font-awesome.min.css (818 selectors, 3 gebruikt). Samen ~210KB
   voor 6 plaatjes. Die 6 staan nu als inline <svg> in de pagina's zelf -- de
   paden komen letterlijk uit de originele fonts (icomoon.svg /
   fontawesome-webfont.svg), zodat de vorm exact hetzelfde blijft.

   .fin-icon volgt de font-iconen die het vervangt: 1em groot (dus meeschalend
   met de font-size van de omliggende regel, precies zoals een glyph) en
   fill:currentColor (dus meekleurend, ook bij :hover). */
.fin-icon{width:1em; height:1em; fill:currentColor; vertical-align:-0.125em;}
/* Voor iconen die in een vaste, hoge doos staan (de 44px FAQ-knop, de 40px
   sluitknop, de 60px vink-in-cirkel) -- daar is verticaal centreren juister
   dan uitlijnen op de tekstregel. */
.fin-icon.fin-icon--center{vertical-align:middle;}

/* Twee glyphs zaten niet in de markup maar in ::before/::after van het
   Creote-thema (theme-css.css) en hingen dus óók aan het FontAwesome-font.
   Zonder dat font zouden dit leeg-vierkantjes worden, dus die tekenen we hier
   met een SVG-mask. background-color (i.p.v. een vaste kleur in de SVG) houdt
   de themakleur en de hover-overgang intact. */

/* Back-to-top-knop: pijl omhoog (was FontAwesome \f106, glyph "angle_up"). */
.prgoress_indicator::after{
   content:"";
   background-color:var(--primary-color-one);
   -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M1075 352q0 -13 -10 -23l-50 -50q-10 -10 -23 -10t-23 10l-393 393l-393 -393q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E") no-repeat center center;
           mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M1075 352q0 -13 -10 -23l-50 -50q-10 -10 -23 -10t-23 10l-393 393l-393 -393q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E") no-repeat center center;
   -webkit-mask-size:auto 18px;
           mask-size:auto 18px;
}
/* De ::before was een tweede, met een gradient over de tekst geclipte kopie van
   diezelfde pijl. Die is altijd onzichtbaar (opacity:0; de enige regel die 'm
   zou tonen -- ".prgoress_indicator:hover ::after/::before" -- heeft een
   descendant-combinator en mikt dus op de ::before van de <svg> erbinnen, niet
   op die van de knop zelf). Genereren we dus niet meer. */
.prgoress_indicator::before{content:none;}

/* Footer-navigatie: dubbele pijl naar rechts voor elke link
   (was FontAwesome \f101, glyph "double_angle_right"). */
.footer_widgets.navigation_foo.style_two .navigation_foo_inner ul li a::before{
   content:"";
   width:11px;
   height:26px;
   background-color:currentColor;
   -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M595 576q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l393 393l-393 393q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l466 -466q10 -10 10 -23zM979 576q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l393 393l-393 393q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E") no-repeat left center;
           mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M595 576q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l393 393l-393 393q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l466 -466q10 -10 10 -23zM979 576q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l393 393l-393 393q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E") no-repeat left center;
   -webkit-mask-size:auto 18px;
           mask-size:auto 18px;
}

/* Scenario-rekentool: knoppen + resultaatpaneel, gedeeld tussen demo.html
   (sector-specifieke scenario's) en abonnement-standaard.html (generieke
   variant). Wat wél per pagina verschilt (bv. de productiviteits-slider op
   demo.html) blijft in de eigen inline <style> van die pagina. */
.fin-scenario-intro{font-size:13px; color:#5b6b66; margin:0 0 20px; line-height:1.6;}
.fin-scenario-layout{display:flex; gap:36px; flex-wrap:wrap;}
.fin-scenario-col-buttons{flex:1 1 340px;}
.fin-scenario-col-result{flex:1 1 260px;}
/* 2-koloms variant (bv. abonnement-standaard.html) -- Groeien/Tegenslag naast
   elkaar i.p.v. onder elkaar, zonder apart resultaatpaneel (het effect is
   daar rechtstreeks zichtbaar in de KPI-tegels van de sectie erboven). */
.fin-scenario-columns{display:flex; gap:30px; flex-wrap:wrap; margin-top:10px;}
.fin-scenario-column{flex:1 1 260px;}
.fin-scenario-groep-label{font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#5b6b66; margin:18px 0 8px;}
.fin-scenario-groep-label:first-of-type{margin-top:0;}
.fin-scenario-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px;}
.fin-scenario-btn{border:2px solid var(--fin-brand); background:#fff; color:var(--fin-brand); border-radius:8px; padding:12px 18px; font-weight:600; font-size:14px; cursor:pointer; text-align:left; flex:1 1 200px; transition:all .2s ease;}
.fin-scenario-btn small{display:block; font-weight:400; color:#5b6b66; margin-top:3px; font-size:12px;}
.fin-scenario-btn:hover{border-color:var(--fin-gold);}
.fin-scenario-btn.actief{background:var(--fin-brand); border-color:var(--fin-brand); color:#fff;}
.fin-scenario-btn.actief small{color:#dfe8e3;}
.fin-scenario-result{background:#F7F5F1; border-radius:10px; padding:18px 20px; font-size:14px; height:100%;}
.fin-scenario-result-row{display:flex; justify-content:space-between; padding:4px 0;}
.fin-scenario-result-row.resultaat{font-weight:700; border-top:1px solid #e4e0d5; margin-top:6px; padding-top:10px;}
/* Bewust geen kleur op het resultaatgetal zelf (blijft zwart, ook als het
   positief is) -- alleen het verschil-tussen-haakjes wordt rood bij een
   negatief effect. */
.fin-scenario-result-delta.negatief{color:#b23a3a;}

/* Bedrijfsidentiteit in de footer (bedrijfsnaam, adres, telefoon, KvK, BTW-ID).
   Staat op alle pagina's, dus hier i.p.v. 5x inline. Bewust kleiner en iets
   gedempter dan de rest van de footer: het is verplichte informatie, geen
   marketingtekst, en het mag het contactblok erboven niet overschreeuwen. */
.fin-footer-identiteit{font-size:12.5px; line-height:1.75; opacity:.75;}

/* Verwijzing naar de privacyverklaring direct onder een formulier dat
   persoonsgegevens vraagt. Wordt door assets/js/finturion-privacy.js
   toegevoegd -- zie de toelichting in dat bestand voor waarom generiek.
   Zelfde toon/grootte als .fin-request-note hierboven: het is een voetnoot bij
   het formulier, geen eigen blok dat om aandacht vraagt. Alle formulieren staan
   op een lichte achtergrond (#fff of #F7F5F1), vandaar de donkere tekstkleur. */
.fin-form-privacy{font-size:12px; line-height:1.6; color:#5b6b66; text-align:center; margin:14px 0 0;}
.fin-form-privacy a{color:var(--fin-brand); text-decoration:underline;}
.fin-form-privacy a:hover{color:var(--fin-gold);}

/* --- Overstapsectie (index.html #overstappen) -------------------------------
   Beantwoordt het enige bezwaar dat élke bezoeker heeft: "ik heb al een
   boekhouder". Bewust een <dl> en geen kaartenraster: het zijn antwoorden op
   vragen, geen gelijkwaardige features, en een definitielijst zegt dat ook
   semantisch. Staat vlak voor de CTA, waar de twijfel zit. */
.fin-overstap{margin:0;}
.fin-overstap dt{
   font-size:19px; font-weight:700; color:var(--fin-dark);
   margin:0 0 6px; padding-left:34px; position:relative;
}
/* Vinkje als SVG-mask i.p.v. een icoonfont -- de site laadt geen icoonfont meer
   (zie de purge van icomoon/font-awesome), en currentColor houdt 'm meekleuren. */
.fin-overstap dt::before{
   content:""; position:absolute; left:0; top:4px; width:20px; height:20px;
   background-color:var(--fin-gold);
   -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E") no-repeat center center;
           mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' fill='black' d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E") no-repeat center center;
   -webkit-mask-size:contain; mask-size:contain;
}
.fin-overstap dd{
   margin:0 0 28px; padding-left:34px;
   font-size:16px; line-height:1.75; color:#41504b;
}
.fin-overstap dd:last-child{margin-bottom:0;}
@media (max-width: 767px){
   .fin-overstap dt{font-size:17px;}
   .fin-overstap dd{font-size:15px;}
}

/* --- Wat-als-strook (index.html #scenario-demo) ------------------------------
   Hier stond een interactieve rekentool die ook al op de Standaard-pagina en in
   de demo stond. De uitkomsten staan nu vast, dus wat overblijft is een rijtje
   voor-en-na-regels: de vraag links, het effect op het maandresultaat rechts.
   Dezelfde voorbeeldcijfers als "klein bedrijf" in demo.html. */
.fin-watals{list-style:none; margin:0; padding:0;}
.fin-watals li{
   display:flex; justify-content:space-between; align-items:baseline; gap:20px;
   flex-wrap:wrap; padding:18px 0; border-bottom:1px solid #e4e0d5;
}
.fin-watals li:last-child{border-bottom:none;}
.fin-watals-vraag{font-size:18px; font-weight:700; color:var(--fin-dark);}
.fin-watals-vraag small{display:block; font-size:14px; font-weight:400; color:#5b6b66; margin-top:3px;}
.fin-watals-effect{
   font-size:17px; color:#5b6b66; white-space:nowrap;
   font-variant-numeric:tabular-nums;
}
.fin-watals-effect .omlaag{color:#b23a3a;}
.fin-watals-effect .omhoog{color:var(--fin-accent);}
.fin-watals-slot{margin-top:30px; text-align:center;}
.fin-watals-slot p{color:#5b6b66; max-width:60ch; margin:0 auto 20px;}
@media (max-width: 767px){
   .fin-watals-vraag{font-size:16px;}
   .fin-watals-effect{font-size:16px;}
}

/* --- Wie het werk doet (index.html #wie-doet-het) ----------------------------
   De kaart is bewust typografisch en niet fotografisch: er is (nog) geen foto,
   en een lege placeholder-avatar ziet er slechter uit dan initialen die het
   zelfverzekerd doen. Zodra er een portretfoto is, vervangt die de initialen. */
.fin-mensen{background:#F7F5F1;}
.fin-mensen .before_title{color:var(--fin-accent); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px; margin-bottom:10px;}
.fin-mensen-kaart{
   background:#fff; border-radius:14px; padding:34px;
   box-shadow:0 6px 30px rgba(12,27,42,0.08); text-align:center;
}
.fin-mensen-initialen{
   display:inline-flex; align-items:center; justify-content:center;
   width:96px; height:96px; border-radius:50%;
   background:var(--fin-brand); color:#fff;
   font-size:34px; font-weight:700; letter-spacing:1px; margin-bottom:18px;
}
.fin-mensen-kaart h3{font-size:24px; margin:0 0 4px; color:var(--fin-dark);}
.fin-mensen-rol{color:var(--fin-gold); font-weight:600; margin:0 0 18px;}
.fin-mensen-taken{list-style:none; margin:0; padding:0; text-align:left;}
.fin-mensen-taken li{
   font-size:15px; color:#5b6b66; padding:8px 0 8px 30px;
   position:relative; border-top:1px solid #efece4;
}
.fin-mensen-taken li::before{
   content:""; position:absolute; left:0; top:12px; width:18px; height:18px;
   background-color:var(--fin-gold);
   -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
   mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fin-mensen-tekst h2.title{margin-bottom:18px;}
.fin-mensen-tekst p{color:#5b6b66; font-size:16px;}
@media (max-width: 991px){
   .fin-mensen-kaart{margin-bottom:30px;}
}

/* --- Sectorschakelaar bij de portal-mockup (abonnement-premium.html) --------
   Compacte schakelaar onder de mockup, geen kaartenrij zoals in demo.html:
   hij hoort bij de twee gemarkeerde KPI's erboven, niet bij de hele pagina. */
.fin-sector-schakel{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 0;}
.fin-sector-schakel-titel{font-size:13px; color:#5b6b66; margin-right:4px;}
.fin-sector-knop{
   background:#fff; border:1px solid #e4e0d5; border-radius:999px;
   padding:6px 14px; font-size:13px; font-weight:600; color:var(--fin-brand);
   cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.fin-sector-knop:hover{border-color:var(--fin-gold);}
.fin-sector-knop.actief{background:var(--fin-brand); border-color:var(--fin-brand); color:#fff;}
.fin-sector-knop:focus-visible{outline:2px solid var(--fin-gold); outline-offset:2px;}

/* ---------------------------------------------------------------------------
   Beslis-uitleg (index.html #zo-werkt-het) -- de telefoonkaart die laat zien wat
   het klantportaal echt aan je vraagt. Niet "klopt deze betaling bij deze
   factuur?": een betaling die precies op een openstaande factuur past wordt
   automatisch gekoppeld, daar komt geen klant aan te pas. Wat overblijft zijn
   twee soorten kaarten -- twee facturen die bijna even goed passen, en een
   bankregel zonder enig document.

   Daarom wordt hier getikt en niet geveegd, net als in het echte portaal: een
   veeg beantwoordt een ja/nee-vraag, en "welke van deze twee?" is dat niet.
   --------------------------------------------------------------------------- */
.fin-swipe-grid{display:grid; grid-template-columns:1fr 380px; gap:60px; align-items:center;}
@media (max-width: 991px){ .fin-swipe-grid{grid-template-columns:1fr; gap:40px; justify-items:center;} }

/* Geen nummers: dit zijn drie SOORTEN gevallen, geen stappen na elkaar. Een
   nummer zou een volgorde suggereren die er niet is. */
.fin-swipe-stappen{list-style:none; margin:26px 0 0; padding:0;}
.fin-swipe-stappen li{position:relative; padding:0 0 22px 34px;}
.fin-swipe-stappen li:last-child{padding-bottom:0;}
.fin-swipe-stappen li::before{
   content:""; position:absolute; left:0; top:7px; width:12px; height:12px;
   border-radius:50%; background:var(--fin-gold);
}
.fin-swipe-stappen strong{display:block; color:var(--fin-dark); font-weight:700; margin-bottom:3px;}
.fin-swipe-stappen span{color:#5b6b66; font-size:15px; line-height:1.65;}

/* De eerlijke alinea: dit kost de klant tijd die hij eerder niet kwijt was.
   Apart gezet omdat het de enige plek op de site is waar we een nadeel
   benoemen -- wegstoppen in de lopende tekst zou juist verdacht zijn. */
.fin-swipe-eerlijk{
   margin:26px 0 0; padding:16px 20px; border-left:3px solid var(--fin-gold);
   background:#fff; border-radius:0 10px 10px 0;
   font-size:14.5px; color:#5b6b66; line-height:1.65;
}

/* Telefoon: bewust een simpele omlijsting, geen fotorealistisch toestel --
   het gaat om de kaart erin, niet om het merk telefoon. */
.fin-swipe-telefoon{
   width:340px; max-width:100%; background:var(--fin-dark); border-radius:34px; padding:14px;
   box-shadow:0 22px 50px rgba(12,27,42,0.22);
}
.fin-swipe-scherm{background:#F7F5F1; border-radius:24px; padding:20px 16px 18px; min-height:470px; display:flex; flex-direction:column; overflow:hidden;}
.fin-swipe-scherm-kop{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
.fin-swipe-scherm-kop .titel{font-weight:700; color:var(--fin-dark); font-size:15px;}
.fin-swipe-teller{font-size:12.5px; color:#5b6b66; font-variant-numeric:tabular-nums;}

.fin-swipe-stapel{position:relative; flex:1; min-height:300px;}

.fin-swipe-kaart{
   position:absolute; inset:0 0 auto; background:#fff; border-radius:16px; padding:18px;
   box-shadow:0 4px 18px rgba(12,27,42,0.10);
   transition:transform .25s ease, opacity .25s ease;
}
/* De kaarten eronder zijn puur diepte: ze laten zien dat er nog meer aankomt
   zonder de inhoud te verklappen. */
.fin-swipe-kaart[data-diepte="1"]{transform:translateY(10px) scale(.96); opacity:.6;}
.fin-swipe-kaart[data-diepte="2"]{transform:translateY(20px) scale(.92); opacity:.3;}

.fin-swipe-regel-label{text-transform:uppercase; letter-spacing:1px; font-size:10.5px; font-weight:700; color:#8a9691; margin-bottom:6px;}
.fin-swipe-bedrag{font-size:24px; font-weight:800; color:var(--fin-dark); font-variant-numeric:tabular-nums; line-height:1.15;}
.fin-swipe-bedrag.bij{color:var(--fin-brand);}
.fin-swipe-omschrijving{font-size:13px; color:#5b6b66; margin:4px 0 0; line-height:1.5; word-break:break-word;}

/* De vraag staat tussen de bankregel en de opties: dat is de volgorde waarin je
   hem leest -- wat is dit, wat vragen we, waar kies je uit. */
.fin-keuze-vraag{
   font-size:13px; color:var(--fin-dark); font-weight:600; line-height:1.5;
   margin:16px 0 10px; padding-top:14px; border-top:1px solid #e3ddd1;
}
/* Tikken op een factuur IS de keuze -- geen aparte bevestigknop erna, precies
   zoals in het klantportaal. */
.fin-keuze-optie{
   display:block; width:100%; text-align:left; background:#F7F5F1;
   border:1.5px solid transparent; border-radius:10px; padding:11px 13px;
   margin-bottom:8px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.fin-keuze-optie:hover{border-color:var(--fin-brand); background:#fff;}
.fin-keuze-optie .regel{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.fin-keuze-optie .naam{font-weight:700; color:var(--fin-dark); font-size:14px;}
.fin-keuze-optie .bedrag{font-weight:700; color:var(--fin-dark); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.fin-keuze-optie .meta{font-size:12px; color:#5b6b66; margin-top:3px;}
.fin-keuze-geen{
   display:block; width:100%; background:none; border:none; padding:8px 0 0;
   color:var(--fin-brand); font-weight:600; font-size:13px; text-decoration:underline;
   cursor:pointer; text-align:center;
}
.fin-keuze-slot{text-align:center; padding:26px 18px;}
.fin-keuze-slot-titel{font-weight:700; color:var(--fin-dark); font-size:16px; margin-bottom:10px;}
.fin-keuze-slot-regel{font-size:13.5px; color:#5b6b66; line-height:1.6; margin-bottom:8px;}

.fin-swipe-hint{text-align:center; font-size:12px; color:#5b6b66; margin:12px 0 0;}

/* Wie liever geen beweging ziet, krijgt de kaarten zonder animatie. */
@media (prefers-reduced-motion: reduce){
   .fin-swipe-kaart{transition:none;}
   .fin-keuze-optie{transition:none;}
}