/* sturo.nl, gedeelde opmaak.
 *
 * Stond eerst in index.html zelf. Met een pagina is dat sneller, want er
 * is geen tweede verzoek nodig voordat er iets te zien is. Vanaf vier
 * pagina's kantelt dat: dit bestand wordt een keer opgehaald en daarna
 * uit de cache gehaald, en dan is vier keer dezelfde 250 regels meesturen
 * duurder dan een verzoek.
 *
 * Wat hier staat komt een op een uit de app. Zie apps/nextjs in de
 * Sturo-repo als er iets uit de pas gaat lopen.
 */

  :root{
    --papier:#faf7f1; --zand:#f1ece1; --inkt:#1f2320; --grijs:#5b615c;
    --groen:#3d8c6e; --vlak:#237356; --rand:#e5e2dc; --kaart:#ffffff;
    /* Alleen voor de Sturo-kant van de vergelijking. Nagerekend tegen de
       tekstkleuren die erop staan: inkt 13,5, grijs 5,4 en vlak 4,9. Alle
       drie ruim boven de 4,5 die kleine tekst nodig heeft. */
    --groenvlak:#e3efe8; --groenrand:#c8ddd1;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--papier); color:var(--inkt);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    /* Ruimte onderaan, zodat de startbalk de laatste regel niet afdekt. */
    padding-bottom:88px;
  }
  .kolom{max-width:1024px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0}
  a{color:inherit}
  strong{font-weight:600}
  .merk{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:26px;letter-spacing:.02em;color:var(--groen)}

  /* Een woord dat eruit moet springen zonder te schreeuwen. Een streep
     eronder in de huiskleur, geen markeerstift. */
  .markeer{
    background:linear-gradient(transparent 62%,rgba(61,140,110,.28) 62%);
    padding-bottom:1px;
  }

  /* ---- knoppen ---- */
  .knop{display:inline-block;border-radius:999px;padding:13px 24px;font-weight:500;font-size:15px;text-decoration:none;transition:transform .2s}
  .knop:hover{transform:translateY(-2px)}
  .knop-vol{background:var(--vlak);color:#fff}
  .knop-leeg{background:var(--kaart);border:1px solid var(--rand)}
  .knop-wit{background:#fff;color:var(--vlak)}
  .knop-rand{border:1px solid rgba(255,255,255,.45);color:#fff}
  .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .klein{color:var(--grijs);font-size:14px;margin-top:12px}

  /* ---- hero ---- */
  .hero-band{background:linear-gradient(180deg,var(--zand) 0%,var(--papier) 78%);border-bottom:1px solid var(--rand);padding:32px 0 64px}
  h1{font-size:clamp(2.2rem,6vw,3.25rem);line-height:1.05;margin-top:40px;max-width:16ch}
  .lead{color:var(--grijs);font-size:clamp(1rem,2.4vw,1.125rem);max-width:52ch;margin-top:20px}
  .hero{display:grid;gap:40px;align-items:center}
  /* 1024 en niet 820. Chrome op Android zet het venster in
     desktopweergave op ongeveer 980 pixels en schaalt dat terug naar het
     scherm. Bij 820 sloeg de hero daar dus om naar twee kolommen, en zag
     je op een telefoon een uitgezoomde desktoppagina met minieme letters.
     Zie werkafspraak 13 in de Mainframe: een blok met een vaste tweede
     kolom moet omslaan vóór die 980. */
  @media(min-width:1024px){
    .hero{grid-template-columns:1.25fr 1fr;gap:40px}
    .hero h1{margin-top:24px}
  }

  /* Het scherm als kaart, zonder getekende telefoon eromheen, net als
     .appvenster verderop. Tot 15-09-2026 stond hier een donkere rand met
     een eilandje bovenin en een veegstreepje onderin. Tim vond dat
     goedkoop ogen, en het eilandje viel ook nog over "verzonnen cijfers"
     in de bovenste regel van de schermafdruk. De verhouding 9 op 19,5
     blijft: de schermafdrukken zijn hele telefoonschermen. .telefoon-rand
     staat nog in de html als omhulsel, zonder eigen opmaak. */
  .telefoon{width:100%;max-width:224px;margin:0 auto}
  .telefoon-scherm{position:relative;overflow:hidden;background:#fff;aspect-ratio:9/19.5;
    border-radius:16px;border:1px solid var(--rand);
    box-shadow:0 26px 50px -26px rgba(20,52,43,.30),0 2px 6px rgba(20,52,43,.06)}
  .telefoon-scherm img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

  /* De vier schermen in de hero die echt scrollen, na elkaar, in een
     lus: dezelfde opzet als de rondleidingsvideo voor de
     LinkedIn-lancering. Elk scherm (.rondleiding-laag) is opgebouwd uit
     drie lagen van dezelfde lange schermafdruk:
       .vast.boven    het balkje bovenin, blijft op zijn plek
       .venster       het midden, hierin scrolt de inhoud echt
       .vast.onder    de navigatie onderin, blijft op zijn plek
     Precies zoals een bezoeker het zelf zou ervaren: alleen de inhoud
     beweegt, het toestel blijft stilstaan.

     De vier schermen delen één lus van 17 seconden en hebben elk hun
     eigen keyframes (geen gedeelde animatie met alleen een delay, want
     elk scherm scrolt een ander aantal pixels in een andere tijd). Een
     scherm is onzichtbaar, wordt zichtbaar, scrolt, en wordt weer
     onzichtbaar voordat het volgende komt. De pixelmaten gaan uit van de
     volle breedte van 224px waarop de telefoon hier altijd getekend
     wordt; zie .telefoon hierboven.

     animation-play-state wordt door gedrag.js op pause/running gezet
     zodra de hero buiten beeld raakt. */
  .rondleiding-laag{position:absolute;inset:0;opacity:0;animation-duration:17s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}
  .rondleiding-vast{position:absolute;left:0;width:100%;overflow:hidden;z-index:2}
  .rondleiding-vast.boven{top:0;height:47px}
  .rondleiding-vast.onder{bottom:0;height:35px}
  /* height:auto zet hier expres de regel
     .telefoon-scherm img{height:100%;object-fit:cover} hierboven terug:
     die is bedoeld voor het ene losse plaatje dat er vroeger stond, en
     zou deze lange schermafdrukken plat drukken tot de hoogte van hun
     bandje. Deze afbeeldingen moeten hun eigen volle hoogte houden en
     mee schalen met de breedte; het bijknippen gebeurt door
     overflow:hidden op de ouder, niet door object-fit. Met height:auto
     is er geen mismatch meer tussen vak en beeld, dus object-fit doet
     er niet meer toe. */
  .rondleiding-vast img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
  /* De navigatie onderin: het plaatje met zijn onderkant tegen de
     onderkant van de strook, niet met een vaste afstand vanaf boven.
     Hier stond eerst top:-952px, uitgerekend op een telefoonbreedte van
     224px. Het scherm binnen de rand is echter 208px breed, en daar is
     het plaatje maar 919px hoog: 952px omhoog trekken schoof het dus
     volledig uit beeld en de onderbalk bleef leeg. Met bottom:0 klopt
     het op elke breedte, zonder uitgerekend getal. */
  .rondleiding-vast.onder img{top:auto;bottom:0}
  .rondleiding-venster{position:absolute;left:0;top:51px;width:100%;height:396px;overflow:hidden;z-index:1}
  /* img.rondleiding-rol en niet .rondleiding-rol: dezelfde specificiteit
     nodig als .telefoon-scherm img hierboven (klasse plus
     elementnaam), anders wint die oudere regel alsnog en wordt dit
     plaatje plat gedrukt op de hoogte van het venster in plaats van
     zijn eigen volle hoogte te houden. Kostte een omweg om te vinden:
     height:auto zonder deze aanscherping deed stilletjes niets. */
  img.rondleiding-rol{position:absolute;left:0;top:-51px;width:100%;height:auto;display:block;animation-duration:17s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}

  .rondleiding-laag[data-scherm="start"]{animation-name:schermStart}
  .rondleiding-laag[data-scherm="start"] .rondleiding-rol{animation-name:scrolStart}
  @keyframes schermStart{
    0%{opacity:0} 2.941%{opacity:1} 32.941%{opacity:1} 35.294%{opacity:0} 100%{opacity:0}
  }
  @keyframes scrolStart{
    0%{transform:translateY(0)} 2.941%{transform:translateY(0)}
    32.941%{transform:translateY(-505px)} 100%{transform:translateY(-505px)}
  }

  .rondleiding-laag[data-scherm="openstaand"]{animation-name:schermOpenstaand}
  .rondleiding-laag[data-scherm="openstaand"] .rondleiding-rol{animation-name:scrolOpenstaand}
  @keyframes schermOpenstaand{
    0%,35.294%{opacity:0} 38.235%{opacity:1} 56.471%{opacity:1} 58.824%{opacity:0} 100%{opacity:0}
  }
  @keyframes scrolOpenstaand{
    0%,35.294%{transform:translateY(0)} 38.235%{transform:translateY(0)}
    56.471%{transform:translateY(-231px)} 100%{transform:translateY(-231px)}
  }

  .rondleiding-laag[data-scherm="klanten"]{animation-name:schermKlanten}
  .rondleiding-laag[data-scherm="klanten"] .rondleiding-rol{animation-name:scrolKlanten}
  @keyframes schermKlanten{
    0%,58.824%{opacity:0} 61.765%{opacity:1} 77.647%{opacity:1} 79.412%{opacity:0} 100%{opacity:0}
  }
  @keyframes scrolKlanten{
    0%,58.824%{transform:translateY(0)} 61.765%{transform:translateY(0)}
    77.647%{transform:translateY(-188px)} 100%{transform:translateY(-188px)}
  }

  .rondleiding-laag[data-scherm="maanden"]{animation-name:schermMaanden}
  .rondleiding-laag[data-scherm="maanden"] .rondleiding-rol{animation-name:scrolMaanden}
  @keyframes schermMaanden{
    0%,79.412%{opacity:0} 82.353%{opacity:1} 98.824%{opacity:1} 100%{opacity:0}
  }
  @keyframes scrolMaanden{
    0%,79.412%{transform:translateY(0)} 82.353%{transform:translateY(0)}
    98.824%{transform:translateY(-159px)} 100%{transform:translateY(-159px)}
  }

  /* ---- blokken ---- */
  section{padding:56px 0;border-bottom:1px solid var(--rand)}
  section.band{background:var(--zand)}
  .nr{color:var(--grijs);font-size:12px;letter-spacing:.14em;font-variant-numeric:tabular-nums;margin-bottom:10px}
  h2{font-size:clamp(1.5rem,4vw,1.9rem);line-height:1.2}
  .onder{color:var(--grijs);max-width:60ch;margin-top:12px}
  .tussenkop{font-weight:500;margin:40px 0 12px}

  .raster{display:grid;gap:16px;margin-top:28px}
  @media(min-width:700px){.raster{grid-template-columns:repeat(3,1fr)}}
  .kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:20px}
  .kaart h3{font-size:17px;margin-bottom:6px}
  .kaart p{color:var(--grijs);margin:0;font-size:15px}

  /* ---- nu naast straks ----
     Twee kolommen vanaf 700 pixels, met een kop boven elke kolom. Daaronder
     stapelen de vakken en draagt elk vak zijn eigen kopje, want de
     kolomkoppen vallen dan weg. De rechterkant is te herkennen aan een groene
     rand aan de zijkant, met de bestaande kleuren uit het palet. Zo hoeft er
     geen nieuwe achtergrondkleur bij die apart op contrast nagerekend moet
     worden. */
  /* De twee vakken van een rij staan dicht op elkaar en de rijen ver uit
     elkaar. Op een telefoon staat alles onder elkaar, en met overal
     dezelfde tussenruimte lees je zes losse kaartjes in plaats van drie
     keer hetzelfde onderwerp van twee kanten. */
  .vergelijk{display:grid;gap:28px;margin-top:28px}
  .vergelijk-kop{display:none}
  .vergelijk-rij{display:grid;gap:8px}
  .vergelijk-vak{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:20px}
  .vergelijk-vak h3{font-size:17px;margin-bottom:6px}
  .vergelijk-vak p{color:var(--grijs);margin:0;font-size:15px}
  /* Kleur doet hier het werk, en niet alleen het randje links. Op een
     telefoon scrol je langs de vakken zonder de kolomkoppen te zien; dan
     moet je aan het vlak zelf kunnen zien of dit de oude of de nieuwe
     situatie is. Volgorde van de regels telt: border-color zet alle vier de
     randen, border-left daarna alleen die ene. */
  .vergelijk-vak.straks{background:var(--groenvlak);border-color:var(--groenrand);border-left:3px solid var(--groen)}
  .vergelijk-vak .label{font-size:13px;font-weight:500;color:var(--vlak);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}

  /* Een lijstje binnen zo'n vak, voor het blok "Is dit iets voor jouw
     bedrijf?". Geen bolletjes: de twee vakken staan al naast elkaar en
     dragen elk hun eigen kop, dus de opsomming hoeft niet ook nog een
     tweede keer aan te kondigen dat het een opsomming is. De regels
     krijgen een dunne scheiding, zodat je ze een voor een langsgaat en
     bij de jouwe blijft hangen. */
  .past{list-style:none;margin:0;padding:0}
  .past li{color:var(--grijs);font-size:15px;line-height:1.5;padding:9px 0;border-top:1px solid var(--rand)}
  .past li:first-child{border-top:0;padding-top:2px}
  .past li:last-child{padding-bottom:0}
  .vergelijk-vak.straks .past li{border-top-color:var(--groenrand)}
  /* De doorverwijzing onder de nee-kolom. Iets los van de lijst, want het
     is geen vijfde reden maar wat je dan wel kunt doen. */
  .vergelijk-vak .past + p{margin-top:16px;font-size:14px}
  /* Ankers waar de demo, de maandmail, de nee-kolom en de onderbalk
     (Wat het kost) naartoe springen.
     Zonder deze ruimte landt de kop tegen de bovenrand: het nummer
     erboven valt weg, en de inschuifanimatie van .reveal trekt de kop
     daarna nog 16 pixels verder omhoog. Gemeten op 15-09-2026. */
  #voor-wie,#vertrouwen,#regio-insight,#kosten{scroll-margin-top:88px}
  @media(min-width:700px){
    .vergelijk-rij{gap:16px}
    .vergelijk-kop{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .vergelijk-titel{font-size:13px;font-weight:500;color:var(--grijs);margin:0;text-transform:uppercase;letter-spacing:.04em}
    .vergelijk-titel.straks{color:var(--vlak)}
    .vergelijk-rij{grid-template-columns:1fr 1fr}
    .vergelijk-vak .label{display:none}
  }

  /* Punten onder elkaar, voor waar het er meer dan drie zijn. */
  .punten{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;margin-top:20px;overflow:hidden}
  .punt{padding:14px 20px;border-bottom:1px solid var(--rand)}
  .punt:last-child{border-bottom:0}
  .punt b{font-weight:500}
  .punt p{margin:2px 0 0;color:var(--grijs);font-size:15px}

  .naschrift{color:var(--grijs);max-width:62ch;margin-top:20px;font-size:15px}

  /* Een schermafdruk uit de app zelf. Met een rand eromheen, anders
     zweeft het beeld op de ondergrond en leest het als een plaatje in
     plaats van als een scherm. */
  .beeld{margin:32px 0 0;max-width:780px}
  .beeld-kader{border:1px solid var(--rand);border-radius:16px;overflow:hidden;background:var(--kaart);box-shadow:0 20px 44px -32px rgba(20,52,43,.55)}
  .beeld img{display:block;width:100%;height:auto}
  .beeld figcaption{color:var(--grijs);font-size:14px;margin-top:12px}
  /* Een breed scherm van 1152 pixels teruggebracht naar 342 is niet meer
     te lezen, en een plaatje waar je op moet turen overtuigt niemand.
     Het scherm Maanden heeft een eigen mobiele versie, dit scherm niet,
     dus dat laten we op een telefoon weg. */
  @media(max-width:640px){.beeld-breed{display:none}}

  /* ---- het maandbericht ---- */
  .mail{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;overflow:hidden;max-width:640px;margin-top:28px;box-shadow:0 14px 40px -24px rgba(20,52,43,.30)}
  .mail-kop{background:var(--zand);padding:14px 20px;border-bottom:1px solid var(--rand)}
  .mail-van{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:13px}
  .mail-van em{font-style:normal;color:var(--grijs);font-weight:400}
  .mail-tijd{color:var(--grijs);font-size:12px}
  .mail-onderwerp{font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:600;margin:4px 0 0}
  .mail-body{padding:20px;font-size:15px}
  .mail-body p{margin:0 0 16px}
  .actie{background:var(--vlak);color:#fff;border-radius:12px;padding:14px 16px;margin:16px 0}
  .actie span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
  .etiket{color:var(--grijs);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px}
  .voetnoot{color:var(--grijs);font-size:14px;border-top:1px solid var(--rand);padding-top:16px;margin:0}

  /* ---- koppelingen ---- */
  .lijst{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;margin-top:24px;max-width:680px;overflow:hidden}
  .rij{padding:14px 20px;border-bottom:1px solid var(--rand)}
  .rij:last-child{border-bottom:0}
  .rij b{font-weight:500}
  .rij p{margin:2px 0 0;color:var(--grijs);font-size:15px}
  .rij a{color:var(--vlak);font-size:14px;text-decoration:underline;text-underline-offset:2px}
  /* Uitklapper. Het driehoekje van de browser gaat eruit, er komt een plus
     en een min voor terug die met de tekst meeschaalt. De hele regel is
     aanklikbaar en met 14 pixels lucht boven en onder haalt hij ruim de 40
     pixels die een vinger nodig heeft. */
  /* De lucht verhuist van de rij naar de summary, want het aanraakvlak is de
     summary zelf. Blijft de opvulling op de rij staan, dan is het vlak dat
     je kunt aantikken 27 pixels hoog en dat is te weinig voor een vinger.
     Alleen op details.rij, want op de pakketpagina's is .rij een gewone div
     die zijn opvulling houdt. */
  details.rij{padding:0}
  details.rij>summary{padding:16px 20px}
  details.rij>.rij-uit{padding:0 20px 16px}
  .rij>summary{font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .rij>summary::-webkit-details-marker{display:none}
  .rij>summary::after{content:"+";color:var(--vlak);font-size:20px;line-height:1;flex:none}
  .rij[open]>summary::after{content:"\2212"}
  .rij>summary:focus-visible{outline:2px solid var(--vlak);outline-offset:2px;border-radius:6px}
  .rij-uit{margin-top:6px}
  .merken{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0;list-style:none}
  .merken li{border:1px solid var(--rand);border-radius:999px;padding:4px 12px;font-size:14px;color:var(--grijs)}

  /* ---- stappen ---- */
  .stappen{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;margin:12px 0 0;padding:0;list-style:none;max-width:680px;overflow:hidden;counter-reset:stap}
  .stappen li{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rand);counter-increment:stap}
  .stappen li:last-child{border-bottom:0}
  .stappen li::before{
    content:counter(stap);flex:0 0 20px;height:20px;margin-top:3px;
    background:var(--vlak);color:#fff;border-radius:999px;
    font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;
  }

  /* ---- vertrouwen ---- */
  .twee{display:grid;gap:32px;margin-top:24px}
  @media(min-width:820px){.twee{grid-template-columns:1fr 1fr;gap:40px}}
  .paneel{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:20px}
  .paneel p{margin:0}
  .paneel p + p{border-top:1px solid var(--rand);margin-top:16px;padding-top:16px;color:var(--grijs)}

  /* ---- prijzen ---- */
  .prijzen{display:grid;gap:16px;margin-top:28px}
  @media(min-width:700px){.prijzen{grid-template-columns:1fr 1fr}}
  .prijs{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:24px;display:flex;flex-direction:column}
  .prijs.uit{border:1.5px solid var(--vlak)}
  .prijs-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .prijs-naam{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600}
  .vlag{background:rgba(35,115,86,.12);color:var(--vlak);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .bedrag{font-family:Fraunces,Georgia,serif;font-size:2.25rem;line-height:1;font-weight:600;margin:8px 0 0;font-variant-numeric:tabular-nums}
  .bedrag em{font-family:Inter,sans-serif;font-style:normal;font-size:13px;font-weight:400;color:var(--grijs);margin-left:6px}
  .voorwie{color:var(--grijs);font-size:14px;margin:8px 0 0}
  .proef{color:var(--vlak);font-size:14px;font-weight:500;margin:12px 0 0}
  .jaar{border-top:1px solid var(--rand);margin-top:16px;padding-top:12px}
  .jaar b{font-weight:500;font-size:14px}
  .jaar p{color:var(--grijs);font-size:14px;margin:4px 0 0}
  .prijs h3{font-family:Inter,sans-serif;font-size:14px;font-weight:500;margin:20px 0 8px}
  .vinkjes{list-style:none;margin:0;padding:0}
  .vinkjes li{display:flex;gap:10px;color:var(--grijs);font-size:14px;line-height:1.45;margin-bottom:6px}
  .vinkjes li::before{content:"\2713";color:var(--vlak);flex:0 0 auto}
  .som{max-width:62ch;margin-top:32px}

  /* Elk vlak even breed als de kolom.

     Toegevoegd 14-09-2026. De vlakken op deze pagina hadden ieder hun
     eigen plafond: .beeld op 780, .lijst en .stappen op 680, .mail op
     640. De rasters, de prijskaarten en de vergelijking liepen wel door
     tot 1208. Op een breed scherm zag je daardoor een pagina met een
     rafelrand aan de rechterkant, waarbij elke sectie op een andere plek
     ophield.

     Ze lopen nu allemaal tot dezelfde rand. Wat leesbaar moet blijven is
     de tekst binnenin, en die houdt zijn eigen regellengte; zie de regels
     hieronder. Een vlak dat breed is met tekst die smal blijft leest
     rustig, een pagina met acht verschillende rechterranden niet. */
  .beeld,.mail,.lijst,.stappen{max-width:none}
  .rij-uit p,.rij-uit li,.stappen li p{max-width:64ch}


  /* ---- afsluiting en voet ---- */
  .afsluiting{max-width:1024px;margin:0 auto;padding:0 24px}
  .slot{background:var(--vlak);color:#fff;border-radius:16px;padding:40px 24px;text-align:center;margin-top:56px}
  .slot h2{color:#fff}
  .slot p{max-width:42ch;margin:12px auto 0;opacity:.9;font-size:15px}
  .slot .knoppen{justify-content:center;margin-top:28px}
  footer{border-top:1px solid var(--rand);margin-top:72px;padding:40px 0 0;color:var(--grijs);font-size:14px}
  .voetraster{display:grid;gap:32px}
  @media(min-width:700px){.voetraster{grid-template-columns:1.4fr 1fr 1fr}}
  footer h3{font-family:Inter,sans-serif;font-size:14px;font-weight:500;color:var(--inkt);margin:0 0 10px}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{margin-bottom:6px}
  footer a{color:var(--grijs)}
  footer a:hover{color:var(--inkt)}
  .slotregel{border-top:1px solid var(--rand);margin-top:40px;padding:24px 0 32px}

  /* ---- startbalk ---- */
  /* Blijft onderin staan zodra de hero voorbij is, en gaat weg zodra het
     afsluitpaneel in beeld komt. Daar staan dezelfde twee knoppen al, en
     twee keer dezelfde knop op een scherm is een keer te veel. */
  .startbalk{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    transform:translateY(100%);opacity:0;pointer-events:none;
    transition:transform .3s,opacity .3s;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .startbalk.aan{transform:none;opacity:1;pointer-events:auto}
  .startbalk-vlak{
    border-top:1px solid var(--rand);padding-top:12px;
    background:rgba(250,247,241,.9);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .startbalk-kolom{max-width:1024px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .startbalk-zin{color:var(--grijs);font-size:14px;margin:0;display:none}
  @media(min-width:640px){.startbalk-zin{display:block}}
  .startbalk-knoppen{display:flex;align-items:center;gap:12px;width:100%}
  /* De knoppen krimpen niet mee; de zin ernaast mag over twee regels.
     Tot 15-09-2026 kromp de rij wel, en schoof hij tussen 640 en 900
     pixels tot 100 pixels voorbij zijn eigen rand. */
  @media(min-width:640px){.startbalk-knoppen{width:auto;flex-shrink:0}}
  .startbalk-tekstknop{color:var(--grijs);font-size:14px;text-decoration:none;padding:12px 8px;flex:0 0 auto}
  /* De prijslink verdwijnt op een telefoon, net als de zin ernaast.
     Deze knoppen krimpen niet (flex:0 0 auto), dus een derde erbij
     duwt de hoofdknop weg op 356 pixels. Op een klein scherm is de
     hoofdknop belangrijker dan de sprong naar het prijsblok. Tot 900
     pixels past hij ook naast de zin niet, dus pas daarboven. */
  .startbalk-prijs{display:none}
  @media(min-width:900px){.startbalk-prijs{display:inline-block}}
  .startbalk-knoppen .knop-vol{flex:1;text-align:center}
  @media(min-width:640px){.startbalk-knoppen .knop-vol{flex:0 0 auto}}

  /* In beeld schuiven zodra je erlangs scrolt, hetzelfde als op
     regioinsight.nl. Alleen als javascript aan staat, en niet voor wie
     in zijn toestel heeft gezet dat beweging hem hindert. */
  /* Alleen omhoog, niet schalen.

     Hier stond scale(.99) bij. Schalen verkleint een blok vanuit zijn
     midden, dus de linkerrand schuift naar binnen: bij een blok van 976
     pixels is dat vijf pixels. Elk blok dat nog niet verschenen was stond
     daardoor op 237 in plaats van 232, en tijdens het scrollen zag je de
     hele pagina zijwaarts op zijn plek schuiven. Gemeten met alles
     verschenen staan 33 van de 34 blokken op exact 232; de uitlijning
     klopte dus, de animatie duwde hem scheef.

     Een procent kleiner voegde ook weinig toe. De beweging omhoog doet
     het werk. */
  .js .reveal{
    opacity:0;transform:translateY(16px);
    transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
  }
  .js .reveal.in{opacity:1;transform:none}
  /* Meteen zichtbaar, zonder overgang. Voor wat bij het laden al in beeld
     staat en voor wat je in een keer voorbij springt. Zie gedrag.js. */
  .js .reveal.direct,.js .reveal.direct[data-na]{transition:none;transition-delay:0s}
  .js .reveal[data-na="1"]{transition-delay:.06s}
  .js .reveal[data-na="2"]{transition-delay:.12s}
  @media(prefers-reduced-motion:reduce){
    .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
    .knop:hover{transform:none}
    .startbalk{transition:none}
    /* Alleen het eerste scherm, stilstaand, niet gescrold. */
    .rondleiding-laag{animation:none!important;opacity:0}
    .rondleiding-rol{animation:none!important;transform:none!important}
    .rondleiding-laag:first-child{opacity:1}
  }


/* De cookiemelding. Zelfde gedrag als op regioinsight.nl: Google
   Analytics laadt pas na Accepteren, en die keuze wordt onthouden.
   Zonder toestemming gaat er geen enkel verzoek naar Google. */
.koekjes{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:300;
  max-width:900px;margin:0 auto;
  background:var(--vlak);color:#fff;border-radius:14px;padding:20px 22px;
  display:none;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:0 24px 50px -18px rgba(20,52,43,.6);
}
.koekjes.aan{display:flex}
.koekjes-tekst{flex:1;min-width:240px}
.koekjes-tekst strong{font-family:Fraunces,Georgia,serif;font-size:16px;display:block;margin-bottom:4px}
.koekjes-tekst p{font-size:13px;color:rgba(255,255,255,.9);line-height:1.5;margin:0}
.koekjes-tekst a{color:#fff;text-decoration:underline}
.koekjes-knoppen{display:flex;gap:10px;flex-shrink:0}
.koekjes-knop{
  border-radius:999px;padding:11px 18px;font-size:14px;font-weight:500;
  cursor:pointer;font-family:inherit;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;
}
.koekjes-knop.vol{background:#fff;color:var(--vlak);border-color:#fff}
/* De melding staat onderin, net als de startbalk. Die twee mogen niet
   over elkaar heen vallen, dus zolang de melding er is schuift de balk op.
   Dat gaat met een klasse en niet met een broer-selector: de balk staat
   eerder in het document dan de melding, en zo'n selector kijkt alleen
   vooruit. */
.startbalk.opgeschoven{bottom:120px}


/* Het bovenkopje op een pakketpagina: "Sturo en Moneybird". Zegt waar je
   bent voordat de kop begint, en herhaalt de merknaam waar de pagina op
   gevonden moet worden. */
.kruimel{
  color:var(--vlak);font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;margin:20px 0 0;
}
.kruimel + h1{margin-top:12px}

/* Badge op een pakketpagina: het eigen icoon van het boekhoudpakket,
   klein en met tekst. Geen samenwerking, alleen "werkt met". De regel
   eronder zegt dat met opzet expliciet, los van het naschrift verderop
   op de pagina. */
.koppel-badge{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;padding:8px 14px 8px 8px;
  background:var(--kaart);border:1px solid var(--rand);border-radius:999px;
}
.koppel-badge img{display:block;width:26px;height:26px;border-radius:50%}
.koppel-badge span{font-size:14px;color:var(--inkt)}
.koppel-badge strong{font-weight:600}
.koppel-niet{color:var(--grijs);font-size:13px;margin-top:8px}

  /* ---------------------------------------------------------------
     De app vooraan: tekst links, het scherm rechts dat meeloopt.

     Toegevoegd 14-09-2026. Tot dan stond de app alleen in de hero, als
     een toestel van 224px dat vanzelf door vier schermen liep. Wie niet
     toevallig op het goede moment keek zag het verkeerde scherm bij de
     verkeerde tekst.

     Hier bepaalt de bezoeker het tempo. Links vier stappen, rechts een
     toestel dat blijft plakken en per stap van scherm wisselt. De
     koppeling loopt via data-scherm, zie gedrag.js.

     Drie dingen die de opzet dragen:

     1. Zonder JavaScript staat het eerste scherm gewoon aan. De klasse
        js komt in de head te staan, dus html.js is er al voordat er iets
        getekend wordt en er knippert niets.
     2. Op smalle schermen vervalt het plakkende toestel. Een scherm van
        9 op 19,5 naast tekst werkt daar niet, dus daar draagt elke stap
        zijn eigen beeld. Dat beeld staat ook in de html voor het geval
        JavaScript uitblijft.
     3. De stappen hebben op breed een hoge minimumhoogte. Zonder die
        ruimte wisselt het scherm sneller dan je kunt lezen.
     --------------------------------------------------------------- */
  .meelopen{padding-top:8px}
  .meelopen-raster{display:grid;gap:32px;margin-top:36px}
  .stap{padding:24px 0}
  .stap+.stap{border-top:1px solid var(--rand)}
  .stap-nr{font-family:var(--titel,inherit);color:var(--groen);font-size:13px;letter-spacing:.14em;margin:0 0 6px}
  /* Groter dan een gewone h3. Op breed staat deze tekst naast een toestel
     van een paar honderd pixels hoog, en drie regels in een normale maat
     verdwijnen daarnaast. */
  .stap h3{font-size:clamp(1.15rem,2.6vw,1.6rem);margin:0 0 12px;line-height:1.2}
  .stap p{color:var(--grijs);margin:0;max-width:46ch;font-size:clamp(1rem,2.2vw,1.0625rem)}
  /* Wat er op dat scherm te zien is, in drie regels. Dit is er niet om de
     kolom te vullen: het staat er omdat de tekst ernaast anders te licht
     woog tegen een toestel dat van boven tot onder vol staat. Drie regels
     die echt over dat scherm gaan doen dat werk, en ze vertellen de lezer
     meer dan een groter plaatje zou doen. */
  .stap-lijst{list-style:none;margin:14px 0 0;padding:0;max-width:44ch}
  .stap-lijst li{position:relative;padding-left:20px;margin-bottom:7px;color:var(--grijs);font-size:15px;line-height:1.5}
  .stap-lijst li::before{
    content:"";position:absolute;left:0;top:.55em;
    width:7px;height:7px;border-radius:999px;background:var(--groen);
  }
  /* Het beeld per stap: alleen op smal, want daar staat het plakkende
     toestel niet. Dezelfde randen als het toestel, zodat het herkenbaar
     hetzelfde ding is. De hoogte knipt de lange schermafdruk af op de
     bovenkant; dat is het stuk dat bij de tekst hoort. */
  .stap-beeld{
    display:block;width:100%;max-width:300px;height:auto;
    margin-top:18px;border-radius:14px;border:1px solid var(--rand);background:#fff;
    box-shadow:0 18px 36px -22px rgba(20,52,43,.28);
  }

  /* Op smal draagt elke stap zijn eigen beeld, dus het plakkende toestel
     hoort daar niet te staan. Zonder deze regel kwam het onderaan de
     sectie nog een keer, met hetzelfde scherm dat er vier stappen eerder
     al stond. */
  .meelopen-beeld{display:none}
  /* Wisselen zonder overvloeier, en dat is met opzet.

     Eerst liep de ene laag in de andere over in 0,45 seconde. Op een
     kleurvlak werkt dat, op twee schermafdrukken vol tekst niet: je zag
     een halve seconde lang "Openstaand" met "Augustus 2026" er dwars
     doorheen en 16.330 euro over 619.604 euro. Een dubbelbeeld, en dat
     leest als een storing.

     Nu is het een harde wissel, zoals een app doet als je op een tabblad
     tikt. Er zijn nooit twee lagen tegelijk deels zichtbaar. visibility
     erbij zodat een laag die uit staat ook niet meer te raken is. */
  /* Het scherm als kaart, zonder getekende telefoon eromheen.

     Er stond een rand met een verloopje, een eilandje bovenin en een
     veegstreepje onderin. Dat trucje is versleten en het oogt goedkoop,
     en het kostte ook nog eens breedte: de bron is maar 480 pixels en
     binnen die rand bleef er 224 over.

     Nu een kaart met een zachte schaduw en een haarlijn, en schermen van
     660 bij 1100 die op 14-09-2026 opnieuw zijn vastgelegd op dubbele
     resolutie. De verhouding is 9 op 15 en niet 9 op 19,5: zonder rand
     hoeft dit geen heel toestel voor te stellen, het is een stuk van het
     scherm. De demo-melding bovenin is eraf gesneden, vandaar de
     bronregel onder de sectie. */
  .appvenster{
    position:relative;overflow:hidden;background:#fff;
    aspect-ratio:9/15;border-radius:16px;border:1px solid var(--rand);
    box-shadow:0 26px 50px -26px rgba(20,52,43,.30),0 2px 6px rgba(20,52,43,.06);
  }
  .meelopen-laag{position:absolute;inset:0;opacity:0;visibility:hidden}
  /* Geldt voor elk beeld in een kaart, dus ook voor het stille beeld in
     de hero. Stond eerst alleen op .meelopen-laag img, en daardoor werd
     de hero-kaart gevuld met een plaatje op ware grootte: je zag een
     uitvergrote hoek in plaats van het scherm. */
  .appvenster img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
  /* Zonder js blijft de eerste laag staan. Met js neemt de waarnemer het
     over en begint alles dicht. */
  .meelopen-laag:first-child{opacity:1;visibility:visible}
  html.js .meelopen-laag:first-child{opacity:0;visibility:hidden}
  html.js .meelopen-laag.actief{opacity:1;visibility:visible}

  /* De tweede voorwaarde is er niet voor de sier. Het toestel is ruim 530
     pixels hoog en onderin staat de startbalk. Op een venster van 700 hoog
     viel de onderkant van het toestel achter die balk, en op minder nog
     verder. Past het niet, dan valt de opzet terug op die voor smal:
     elke stap met zijn eigen beeld eronder. */
  @media(min-width:1024px) and (min-height:700px){
    /* Tekst en toestel naast elkaar, en niet ieder tegen een buitenrand.

       Het raster stond op 1fr naast 240px. De tekstkolom werd daarmee zo
       breed als de pagina toeliet, terwijl de tekst zelf op 46 tekens
       stopt. Gemeten op 1440: de tekst eindigde op 725 en het toestel
       begon op 968, dus er zat 243 pixels niets tussen. Twee dingen aan
       weerskanten van het scherm die niets met elkaar te maken lijken te
       hebben. Op een telefoon staan ze onder elkaar en speelt dat niet,
       en daar werkte het dan ook wel.

       Nu krijgt de tekstkolom de breedte van de tekst en staat het
       toestel er direct naast. Wat overblijft is ruimte aan de
       buitenrand, en dat leest als rust in plaats van als een gat. */
    .meelopen-raster{grid-template-columns:minmax(0,30rem) auto;gap:72px;align-items:start;justify-content:start}
    /* De tekststappen dragen de scrollruimte. Van 62 naar 54 naar 42vh.
       Bij 54 stond er drie regels tekst in een vak van ruim 480 pixels
       naast een toestel dat van boven tot onder vol staat: vier vijfde van
       de linkerkolom was leeg en het geheel las als een grote telefoon met
       een onderschrift. 42vh is ongeveer de hoogte van het toestel zelf,
       dus de twee kolommen wegen nu even zwaar. */
    /* min() erbij: 50vh is prima op een gewoon venster, maar op een heel
       hoog venster werd elke stap 900 pixels en stond de tekst honderden
       pixels onder de kaart waar hij bij hoort. */
    .stap{min-height:min(50vh,460px);display:flex;flex-direction:column;justify-content:center;padding:0}
    .stap-beeld{display:none}
    .meelopen-beeld{display:block;position:sticky;top:calc(50vh - 270px)}
    /* Groter dan in de hero: hier is het toestel het onderwerp en niet
       de illustratie ernaast. */
    /* De kaart wordt zo groot als er hoogte is, met 330 als plafond.

       Een vaste breedte werkte niet op twee kanten tegelijk: groot genoeg
       voor een ruim scherm viel op een laag venster achter de startbalk.
       De verhouding 9 op 15 maakt de breedte 0,6 keer de hoogte, dus die
       volgt hieruit vanzelf. De 200 die eraf gaat is de startbalk plus
       lucht boven en onder.

       Boven de 330 gaat hij niet: de bron is 660 breed, en een scherm met
       dubbele pixels vraagt daar dan meer van dan erin zit. */
    .appvenster{width:clamp(240px,calc((100vh - 200px) * 0.6),330px)}
  }

  /* De app in de hero. Dezelfde kaart als in de rondleiding, hier stil en
     op het samenvattingsscherm.

     Kleiner dan die in de rondleiding: daar is de kaart het onderwerp, hier
     staat hij naast een kop die de aandacht hoort te krijgen. Op smal valt
     hij weg, want daar zou hij de knoppen onder de vouw duwen en die zijn
     het belangrijkste wat er op een telefoon boven water moet blijven. */
  .hero-app{display:none}
  @media(min-width:1024px){
    .hero-app{display:block;justify-self:end}
    .hero-app .appvenster{width:clamp(240px,26vw,300px)}
  }

  /* ---------------------------------------------------------------
     Vier blokken om en om, voor /nieuw2/.

     Bij elke tekst het stuk van de app waar die tekst over gaat. Geen
     plakkend beeld en geen wisseling op scrollhoogte: dat kon alleen
     goed gaan op precies het juiste tempo, en het kostte 1.800 pixels
     hoogte voor vier korte teksten.

     De tekst staat altijd links en het beeld altijd rechts.

     Eerst stond het om en om, uit gewoonte: het is een bekend patroon op
     productpagina's. Het was hier fout. Bij de blokken met het beeld links
     begon de kop niet op 232 maar op 788, terwijl elk ander blok op de
     pagina op 232 begint. Twee van de vier stapten dus uit de lijn waar de
     rest van de pagina op staat, en dat is precies wat een pagina
     onrustig maakt.

     Het ritme hoeft ook niet uit de plaatsing te komen. De vier beelden
     verschillen genoeg van vorm en inhoud om dat zelf te doen: een blok
     tekst, een staafverdeling, een lijst en een grafiek.

     Op smal staat alles onder elkaar, tekst eerst.
     --------------------------------------------------------------- */
  .duos .onder{max-width:56ch}
  .duo{margin-top:64px}
  .duo-nr{font-family:var(--titel,inherit);color:var(--groen);font-size:13px;letter-spacing:.14em;margin:0 0 8px}
  .duo h3{font-size:clamp(1.2rem,2.8vw,1.65rem);line-height:1.2;margin:0 0 12px}
  .duo-tekst>p{color:var(--grijs);margin:0;max-width:44ch;font-size:clamp(1rem,2.2vw,1.0625rem)}
  .duo-lijst{list-style:none;margin:18px 0 0;padding:0;max-width:44ch}
  .duo-lijst li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--grijs);font-size:15px;line-height:1.5}
  .duo-lijst li::before{
    content:"";position:absolute;left:0;top:.55em;
    width:7px;height:7px;border-radius:999px;background:var(--groen);
  }
  /* Geen kader om het beeld, want het beeld is zelf de kaart.

     Eerst stond hier een rand met een schaduw om een uitsnede die de
     achtergrond van de app en het labeltje meenam. Dat gaf vier lagen over
     elkaar: crème van de pagina, mijn kader, crème van de app, en pas
     daarbinnen de witte kaart met de inhoud. Rommelig, en de labels
     plakten tegen de rand.

     De beelden zijn nu exact op de witte kaart gesneden. Dus alleen een
     afronding en een zachte schaduw, en het staat op de crème van de
     pagina alsof het er ligt. Twee lagen. */
  .duo-beeld{margin:22px 0 0}
  .duo-beeld img{
    display:block;width:100%;height:auto;border-radius:14px;background:#fff;
    box-shadow:0 22px 44px -24px rgba(20,52,43,.26),0 1px 3px rgba(20,52,43,.06);
  }

  /* 1024 en niet lager: Chrome op Android zet een telefoon in
     desktopweergave op ongeveer 980 pixels. Zie werkafspraak 13. */
  @media(min-width:1024px){
    .duo{
      display:grid;grid-template-columns:minmax(0,1fr) 420px;
      gap:72px;align-items:center;margin-top:96px;
    }
    .duo-beeld{margin:0}
  }