/* ==================================================================== site

   De openbare kant. Eigen gezicht, zelfde palet als de app.

   Het motief is de montagestrook: een rij kaders waarvan er een paar afvallen.
   Dat is letterlijk wat het product doet, en het is het enige beeld op deze
   pagina dat je nergens anders tegenkomt. Vandaar dat het terugkomt in de
   selectie, in de beat en in de platformvlakken.

   Kleur: licht, warm papier met messing als enige accent. Geen zwarte vlakken:
   die maakten het hard en filmisch terwijl dit een gereedschap is dat een
   makelaar op dinsdagochtend openslaat. Hiërarchie komt nu uit vlakhoogte,
   randen en één accentkleur, niet uit contrastblokken. */

/* De koppenletter van de verkoopkant: Fraunces, een zachte serif met optisch
   formaat. De app zelf blijft volledig Inter - dit is het verschil tussen de
   etalage en de werkbank. Zelf gehost, zelfde redenen als Inter: geen verzoek
   naar een Amerikaanse server om een letter, geen CDN dat net traag is.
   Fraunces is SIL OFL 1.1: zelf hosten mag. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.serif { font-family: "Fraunces", Georgia, "Times New Roman", serif;
         font-optical-sizing: auto; }

/* Alle publieke koppen in de serif, óók op de conversie- en inlogpagina's
   (gesprek, login, aanmelden, afspraak); daar viel de merkstem terug op Inter. */
h1 { font-family: "Fraunces", Georgia, "Times New Roman", serif;
     font-optical-sizing: auto; letter-spacing: -.02em; }

::selection { background: var(--brass-soft); }

/* Alleen verbergen als javascript het weer kan tonen. Stond dit op `.reveal`
   zonder `.js` ervoor, dan was de hele verkooppagina blanco zodra site.js niet
   laadde: een geblokkeerd script of een storing bij de statische bestanden en
   je site is leeg, zonder dat er iets stuk lijkt. */
.js .reveal { opacity: 0; transform: translateY(18px);
          transition: opacity .6s cubic-bezier(.2,.7,.3,1),
                      transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------- kop */

.held { position: relative; overflow: hidden;
        background:
          radial-gradient(ellipse 62% 78% at 18% 18%,
            color-mix(in srgb, var(--brass) 14%, transparent), transparent 66%),
          linear-gradient(180deg, var(--surface), var(--bg) 72%);
        border-bottom: 1px solid var(--line); }
/* Korrel over de kop. Een gladde gradient leest als een template; een heel
   lichte filmkorrel geeft het vlak textuur zonder dat je hem bewust ziet. */
.held::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.32 0 0 0 0 0.26 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E"); }
.held-in { position: relative; max-width: 1160px; margin: 0 auto;
           padding: 96px 24px 52px; display: grid;
           grid-template-columns: minmax(0, 1.1fr) minmax(0, .78fr);
           gap: 64px; align-items: center; }
@media (max-width: 940px) {
  .held-in { grid-template-columns: 1fr; gap: 44px; padding: 60px 22px 36px; }
}

.etiket { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
          color: var(--brass); font-weight: 650; margin: 0 0 18px; }

/* De kop in Fraunces: dit ene lettertype doet meer voor het karakter van de
   pagina dan elke verdere versiering. Serifs vragen minder negatieve tracking
   dan Inter, anders plakken de schreven aan elkaar. */
.held h1 { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
           font-size: clamp(44px, 6.2vw, 82px); line-height: 1.02;
           letter-spacing: -.022em; font-weight: 560; margin: 0 0 22px;
           text-wrap: balance; }
.held h1 em { font-style: italic; color: var(--brass); letter-spacing: -.012em; }
.held .lede { max-width: 44ch; margin-bottom: 30px; }

.heldknoppen { display: flex; gap: 12px; flex-wrap: wrap; }

.toestel { position: relative; width: 100%; max-width: 306px; margin: 0 auto;
           padding: 9px; border-radius: 30px; background: var(--surface);
           border: 1px solid var(--line-2);
           box-shadow: 0 30px 70px -28px rgba(11,12,14,.42),
                       0 2px 6px rgba(11,12,14,.06); }
.toestel video { width: 100%; aspect-ratio: 9/16; display: block;
                 border-radius: 22px; background: #000; cursor: pointer; }

/* Eigen pauzeknop over de video. Zacht zichtbaar terwijl hij loopt zodat je
   weet dat je kunt pauzeren, vol in beeld zodra hij stilstaat of je erover
   hangt. Geen native controls-balk, dus geen verwarrende tik-toestand. */
.toestelknop {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(10, 11, 13, .55); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: .35; transition: opacity .18s ease, transform .12s ease;
}
.toestel:hover .toestelknop, .toestelknop:focus-visible { opacity: 1; }
.toestelknop:active { transform: scale(.94); }
/* Staat hij stil, dan hoort de knop op te vallen: dat is het startsein. */
.toestelknop:not(.speelt) { opacity: 1; background: rgba(10, 11, 13, .72); }
.toestelknop .ic-play { display: none; }
.toestelknop:not(.speelt) .ic-play { display: block; }
.toestelknop.speelt .ic-pause { display: block; }
.toestelknop:not(.speelt) .ic-pause { display: none; }
@media (hover: none) { .toestelknop { opacity: 1; } }
/* Twee lege kaders schuin achter het toestel: het filmstrook-motief van de
   rest van de pagina, en het haalt het toestel uit het "screenshot in een
   telefoonrand"-cliché. Puur decor, dus aria-hidden in de html. */
.heldbeeld { position: relative; }
.heldbeeld .echo { position: absolute; top: 9%; aspect-ratio: 9/16; width: 44%;
                   border-radius: 16px; border: 1px solid var(--line);
                   background: color-mix(in srgb, var(--surface) 45%, transparent); }
.heldbeeld .echo.links { left: 4%; transform: rotate(-5deg); }
.heldbeeld .echo.rechts { right: 4%; transform: rotate(5deg); }
.heldbeeld .toestel { z-index: 1; }
.beeldbijschrift { position: relative; z-index: 1; text-align: center;
                   margin-top: 18px; font-size: 13.5px; }
.beeldbijschrift b { display: block; font-weight: 560; }
.beeldbijschrift span { color: var(--fg-3); }

/* De feitenregel: geen statistiekenbalk maar een regel feiten met hairlines,
   de cijfers in de koppenletter. */
.cijferbalk { position: relative; max-width: 1160px; margin: 0 auto;
              padding: 30px 24px 58px; display: grid;
              grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 24px;
              border-top: 1px solid var(--line); }
.cijfer { padding-left: 18px; border-left: 1px solid var(--line-2); }
.cijfer b { display: block; font-family: "Fraunces", Georgia, serif;
            font-optical-sizing: auto; font-size: 34px; font-weight: 540;
            letter-spacing: -.02em; line-height: 1.1;
            font-variant-numeric: lining-nums; }
.cijfer span { font-size: 12.5px; color: var(--fg-3); }

/* ---------------------------------------------------------------- blokken */

section.wrap { padding-top: 88px; padding-bottom: 88px; }
.kopblok { max-width: 62ch; margin-bottom: 42px; }
section h2 { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
             font-size: clamp(30px, 3.6vw, 44px); font-weight: 540;
             letter-spacing: -.018em; line-height: 1.08; margin-bottom: 16px;
             text-wrap: balance; }

.band { background: var(--surface); border-block: 1px solid var(--line);
        padding: 84px 0; }
.band .wrap { padding-top: 0; padding-bottom: 0; }

.donker { padding: 88px 0; border-block: 1px solid var(--brass-line);
          background: linear-gradient(180deg,
            color-mix(in srgb, var(--brass) 8%, var(--surface)),
            color-mix(in srgb, var(--brass) 4%, var(--surface))); }
.donker .wrap { padding-top: 0; padding-bottom: 0; }

/* ------------------------------------------------------------- argumenten

   Geen vier gelijke kaartjes - dat is de opmaak van elke gegenereerde
   landingspagina. Een grootboek: hairline erboven, een serif-nummer, en de
   tekst gewoon op het papier. Leest als een tijdschrift, niet als een raster
   van tegels. */

.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0 56px; }
@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } }
.ledger .post { display: grid; grid-template-columns: 52px minmax(0, 1fr);
                gap: 18px; padding: 26px 0 28px;
                border-top: 1px solid var(--line-2); }
.ledger .nr { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto;
              font-size: 30px; font-weight: 480; color: var(--brass);
              line-height: 1; padding-top: 2px;
              font-variant-numeric: lining-nums tabular-nums; }
.ledger h3 { font-size: 16.5px; letter-spacing: -.015em; line-height: 1.3;
             margin: 0 0 8px; text-wrap: balance; }
.ledger p { color: var(--fg-2); font-size: 14.5px; line-height: 1.62; margin: 0;
            max-width: 46ch; }

/* --------------------------------------------------------------- drie stappen

   Zo werkt het, in drie stappen naast elkaar. De nummers in de koppenletter,
   één doorlopende hairline erboven: een proces, geen kaartenbak. */

.stappenrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 44px; border-top: 1px solid var(--line-2); }
@media (max-width: 760px) { .stappenrij { grid-template-columns: 1fr; gap: 0; } }
.stappenrij .stap { padding-top: 24px; position: relative; }
@media (max-width: 760px) {
  .stappenrij .stap { padding: 22px 0 26px; border-top: 1px solid var(--line-2); }
  .stappenrij .stap:first-child { border-top: none; }
}
.stappenrij .nr { display: block; font-family: "Fraunces", Georgia, serif;
                  font-optical-sizing: auto; font-size: 44px; font-weight: 470;
                  color: var(--brass); line-height: 1; margin-bottom: 14px;
                  font-variant-numeric: lining-nums; }
.stappenrij h3 { font-size: 17px; letter-spacing: -.015em; margin: 0 0 8px; }
.stappenrij p { color: var(--fg-2); font-size: 14.5px; line-height: 1.62;
                margin: 0; max-width: 40ch; }
.stappenrij .stapvoet { margin-top: 12px; font-size: 13px; color: var(--fg-3); }

/* ----------------------------------------------------------- montagestrook */

.strookdemo { display: grid; gap: 34px; }
.strookrij { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
@media (max-width: 720px) { .strookrij { grid-template-columns: repeat(5, 1fr); } }
.kader { aspect-ratio: 9/16; border-radius: 6px; position: relative;
         overflow: hidden;
         background: linear-gradient(155deg, var(--surface-3), var(--surface-2));
         border: 1px solid var(--line); }
.kader img { position: absolute; inset: 0; width: 100%; height: 100%;
             object-fit: cover; display: block; }
.kader.weg { border-style: dashed; opacity: 1; }
.kader.weg img { filter: grayscale(1); opacity: .35; }
.kruis { position: absolute; inset: 0; z-index: 1; }
.kruis::before, .kruis::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 2px;
  background: var(--fg-2); border-radius: 2px;
}
.kruis::before { transform: translate(-50%, -50%) rotate(45deg); }
.kruis::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.strookuitleg { display: grid; gap: 36px;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.strookuitleg h3 { font-size: 16px; margin-bottom: 6px; }
.strookuitleg p { color: var(--fg-2); font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------- tweeluik */

.tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
            gap: 60px; align-items: center; }
@media (max-width: 900px) { .tweeluik { grid-template-columns: 1fr; gap: 38px; } }

.streeplijst { list-style: none; padding: 0; margin: 26px 0 0; }
.streeplijst li { padding: 14px 0 15px 30px; position: relative; font-size: 14.5px;
                  border-top: 1px solid var(--brass-line); }
/* Een vinkje, zoals bij de prijskaarten: leest als "hoort erbij" in plaats van
   het kale streepje dat er eerst stond. */
.streeplijst li::before { content: ""; position: absolute; left: 3px; top: 20px;
                          width: 10px; height: 6px;
                          border-left: 2px solid var(--brass);
                          border-bottom: 2px solid var(--brass);
                          transform: rotate(-45deg); }
.streeplijst b { display: block; font-weight: 570; letter-spacing: -.012em;
                 margin-bottom: 3px; }
.streeplijst li > span { display: block; color: var(--fg-2); line-height: 1.6;
                         max-width: 46ch; }

.kaartrij { display: grid; gap: 14px; }
.kaartrij h3 { font-size: 15.5px; margin-bottom: 4px; }
.kaartrij .hint { margin: 0; }

/* ------------------------------------------------------------- platformen */

/* Drie compacte telefoontjes, geen drie schermvullende vlakken: het is een
   diagram naast de tekst, niet het onderwerp van de sectie. */
.grid.drieluik { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
                 max-width: 780px; }
.kolom .vlak { position: relative; aspect-ratio: 9/16; border-radius: var(--r);
               overflow: hidden; margin-bottom: 12px; display: grid; place-items: center;
               background: linear-gradient(165deg, var(--surface-3), var(--surface-2));
               border: 1px solid var(--line); }
.kolom .vlak b { position: relative; font-size: 12.5px; font-weight: 560;
                 color: var(--fg-2); text-align: center; padding: 0 8px; }
.kolom .zone { position: absolute; left: 0; right: 0;
               background: repeating-linear-gradient(-45deg,
                 color-mix(in srgb, var(--bad) 14%, transparent) 0 6px,
                 transparent 6px 12px); }
.kolom .zone.boven { top: 0; height: 13%; }
.kolom .zone.boven.tt { height: 7%; }
.kolom .zone.onder { bottom: 0; height: 25%; }
.kolom .hint { margin: 0; }

/* ----------------------------------------------------------------- prijzen */

.grid.prijzen { grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
                gap: 20px; align-items: start; }
/* Vier pakketten: smaller raster zodat ze op een breed scherm naast elkaar
   staan, op een tablet twee-bij-twee, en op een telefoon onder elkaar. */
.grid.prijzen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
                     align-items: stretch; }
@media (max-width: 980px) {
  .grid.prijzen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .grid.prijzen.vier { grid-template-columns: 1fr; }
}
/* Bij vier kaarten is de bedrag-regel iets compacter, anders wordt "Gratis"
   naast "€149" te fors. */
.prijzen.vier .bedrag { font-size: 40px; }
/* Elke kaart even hoog, en de knop onderaan uitgelijnd ongeacht hoeveel
   opsommingen er staan. De lijst duwt de knop naar beneden. */
.prijzen.vier .prijskaart { display: flex; flex-direction: column; height: 100%; }
.prijzen.vier .prijskaart ul { flex: 1 0 auto; }
.prijzen.vier .prijskaart .btn { margin-top: auto; }
.prijskaart { position: relative; }
.prijskaart.uitgelicht { border-color: var(--brass-line); box-shadow: var(--sh-2); }
.prijskaart .vlag { position: absolute; top: -11px; left: 24px; background: var(--brass);
                    color: #16110A; font-size: 11px; font-weight: 700; letter-spacing: .06em;
                    text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.prijskaart h3 { font-size: 12.5px; color: var(--fg-3); font-weight: 620;
                 letter-spacing: .1em; text-transform: uppercase; }
.prijskaart .bedrag { font-family: "Fraunces", Georgia, serif;
                      font-optical-sizing: auto; font-size: 48px;
                      font-weight: 560; letter-spacing: -.02em;
                      font-variant-numeric: lining-nums; margin: 8px 0 20px; }
.prijskaart .bedrag span { font-size: 14.5px; font-weight: 440; color: var(--fg-3);
                           letter-spacing: 0; margin-left: 8px; }
.prijskaart ul { list-style: none; padding: 0; margin: 0 0 24px; }
.prijskaart li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line);
                 font-size: 14.5px; color: var(--fg-2); position: relative; }
.prijskaart li:last-child { border-bottom: none; }
.prijskaart li::before { content: ""; position: absolute; left: 4px; top: 16px;
                         width: 9px; height: 5px; border-left: 2px solid var(--brass);
                         border-bottom: 2px solid var(--brass);
                         transform: rotate(-45deg); }

/* ------------------------------------------------------------------ vragen */

.vraag { border-bottom: 1px solid var(--line); }
.vraag summary { cursor: pointer; padding: 17px 0; font-weight: 545; font-size: 16.5px;
                 list-style: none; display: flex; justify-content: space-between;
                 gap: 16px; align-items: center; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: ""; width: 9px; height: 9px; flex-shrink: 0;
                        border-right: 2px solid var(--fg-3);
                        border-bottom: 2px solid var(--fg-3);
                        transform: rotate(45deg) translateY(-2px);
                        transition: transform .18s ease; }
.vraag[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.vraag p { color: var(--fg-2); margin: 0 0 18px; max-width: 68ch; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .vraag summary::after { transition: none; } }

/* -------------------------------------------------------------------- slot */

.slot { padding: 96px 0; border-top: 1px solid var(--brass-line);
        background: radial-gradient(ellipse 70% 120% at 50% 0%,
          color-mix(in srgb, var(--brass) 13%, transparent), transparent 70%),
          var(--surface); }
.slotblok { text-align: center; }
.slotblok .lede { margin: 0 auto 30px; }

/* Het aanvraagformulier */
.gesprekblad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
               gap: 52px; align-items: start; }
@media (max-width: 860px) { .gesprekblad { grid-template-columns: 1fr; gap: 32px; } }
.gesprekblad .streeplijst li { border-top-color: var(--line); }

/* --------------------------------------------------------- kop en voettekst */

.sitenav a { font-size: 14px; }

.sitefoot { border-top: 1px solid var(--line); background: var(--surface);
            margin-top: 0; }
.sitefoot-in { max-width: 1160px; margin: 0 auto; padding: 56px 24px 40px;
               display: grid; gap: 40px;
               grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .sitefoot-in { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 44px 22px 32px; }
  .sitefoot-merk { grid-column: 1 / -1; }
}
.sitefoot-merk p { margin: 16px 0 0; color: var(--fg-3); font-size: 13.5px;
                   max-width: 40ch; line-height: 1.6; }
.sitefoot nav { display: flex; flex-direction: column; gap: 9px; }
.sitefoot h6 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .12em;
               text-transform: uppercase; color: var(--fg-3); font-weight: 640; }
.sitefoot nav a { font-size: 13.5px; color: var(--fg-2); }

/* Op een telefoon zijn deze links 20 tot 30 pixels hoog, en dat mis je met je
   duim. Alleen de navigatie en de voettekst krijgen een tikvlak; links midden
   in een lopende zin moeten juist niet uit elkaar getrokken worden. */
@media (max-width: 720px) {
  .sitenav a, .sitefoot nav a, .sitefoot-onder a, .nav a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
}
.sitefoot nav a:hover { color: var(--fg); text-decoration: underline;
                        text-decoration-color: var(--line-2);
                        text-underline-offset: 3px; }
.sitefoot-onder { max-width: 1160px; margin: 0 auto; padding: 18px 24px 30px;
                  border-top: 1px solid var(--line); display: flex;
                  align-items: center; justify-content: space-between;
                  gap: 10px 24px; flex-wrap: wrap;
                  font-size: 12.5px; color: var(--fg-3); }
.sitefoot-copy { font-variant-numeric: tabular-nums; }
/* Specifieker dan `.sitefoot nav { flex-direction: column }` (die de kolommen
   stapelt): de juridische links horen juist naast elkaar op één regel. */
.sitefoot-onder .sitefoot-legal { display: flex; flex-direction: row; gap: 20px;
                                  flex-wrap: wrap; }

/* Juridische pagina's: rustige, smalle leestekst. */
.legal { max-width: 760px; padding-top: 8px; padding-bottom: 40px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1;
            letter-spacing: -.02em; margin: 12px 0 14px; }
.legal h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -.01em; }
.legal p { margin: 0 0 14px; color: var(--fg-2); max-width: 68ch; }
.legal ul { margin: 0 0 14px; padding-left: 20px; color: var(--fg-2); max-width: 68ch; }
.legal li { margin-bottom: 7px; }
.legal b { color: var(--fg); font-weight: 600; }
.legal .legalfoot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
                    font-size: 14px; color: var(--fg-3); }

/* Toestemmingsregel onder een leadformulier. */
.akkoord { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
           font-size: 13.5px; line-height: 1.45; color: var(--fg-2); font-weight: 400;
           cursor: pointer; }
.akkoord input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brass);
                 cursor: pointer; }

.heldnoot { margin: 16px 0 0; font-size: 13.5px; color: var(--fg-3); }
.heldnoot a { color: var(--brass); }

/* ============================================== self-serve proefreel */
/* Zijmarge expliciet: dit staat op hetzelfde element als .wrap en overschreef
   diens padding, waardoor de tekst en de velden op een telefoon tegen de
   schermrand stonden. */
.probeerhero { max-width: 640px; margin: 0 auto;
               padding: clamp(36px,7vw,80px) clamp(16px,5vw,24px) 60px;
               text-align: center; }
.probeerhero h1 { font-size: clamp(30px,5vw,50px); line-height: 1.05;
                  letter-spacing: -.03em; margin: 14px 0 16px; }
.probeerhero .lede { max-width: 52ch; margin: 0 auto; }
.probeerform { display: flex; gap: 10px; max-width: 520px; margin: 26px auto 0; }
.probeerform input { flex: 1; min-width: 0; }
.probeerform.kolom { flex-direction: column; max-width: 400px; }
.probeerform.kolom .btn { width: 100%; }
.proefbezig { position: fixed; inset: 0; z-index: 200; display: flex;
              flex-direction: column; align-items: center; justify-content: center;
              gap: 6px; text-align: center; padding: 24px;
              background: color-mix(in srgb, var(--bg) 92%, transparent);
              backdrop-filter: blur(4px); }
.proefbezig-kop { font-size: 20px; font-weight: 600; color: var(--fg); margin: 10px 0 0; }
.proefbezig .hint { max-width: 40ch; }
.proefspin { width: 40px; height: 40px; border-radius: 50%;
             border: 3px solid var(--line-2); border-top-color: var(--brass);
             animation: proefspin .8s linear infinite; }
@keyframes proefspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proefspin { animation: none; } }
.probeerhint { margin-top: 12px; }
.probeerlijst { max-width: 430px; margin: 30px auto 0; text-align: left; }
@media (max-width: 520px) {
  .probeerform { flex-direction: column; }
  .probeerform .btn { width: 100%; }
  /* De harde regelbreuk in de kop is voor het brede scherm; op een telefoon
     gaf hij een losse regel "beeld". Laat de browser daar zelf balanceren. */
  .probeerhero h1 br { display: none; }
}
.probeerhero h1, .probeerblok h1 { text-wrap: balance; }

.probeerresultaat { max-width: 620px; margin: 0 auto;
                    padding: clamp(30px,6vw,64px) clamp(16px,5vw,24px) 60px;
                    text-align: center; }
.probeerblok h1 { font-size: clamp(28px,4.5vw,44px); line-height: 1.06;
                  letter-spacing: -.025em; margin: 12px 0 14px; }
.probeerblok .lede { max-width: 48ch; margin: 0 auto; }
.pbalk { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden;
         max-width: 380px; margin: 26px auto 12px; }
.pbalk span { display: block; height: 100%; width: 5%; border-radius: 999px;
              background: var(--brass); transition: width .5s ease; }
.probeertoestel { max-width: 300px; margin: 8px auto 24px; border-radius: 22px;
                  overflow: hidden; background: #000; border: 1px solid var(--line-2);
                  box-shadow: 0 24px 60px -28px rgba(11,12,14,.42); }
.probeertoestel video { width: 100%; aspect-ratio: 9/16; display: block;
                        object-fit: cover; background: #000; }
.pclaim { max-width: 420px; margin: 0 auto; text-align: left; }
.pclaim h2 { font-size: 20px; letter-spacing: -.01em; }

.prijskaart .bedrag s { color: var(--fg-3); font-weight: 480; font-size: 26px;
                        margin-right: 8px; text-decoration-thickness: 2px; }

/* ======================================================== boekvenster

   Rechtsonder: dat is waar het oog aan het einde van elke sectie landt en waar
   een vaste actieknop verwacht wordt.

   Op een telefoon is het geen venster maar een blad dat van onderen opkomt en
   het scherm vult. Een zwevend kaartje van 380px op een scherm van 390px is
   een venster met een rand eromheen, en dat leest als een fout. */

.boekknop {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 560;
  background: var(--btn); color: var(--btn-fg); border: none;
  box-shadow: 0 6px 24px -6px rgba(11,12,14,.42), 0 2px 6px rgba(11,12,14,.16);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease;
}
.boekknop:hover { transform: translateY(-2px);
                  box-shadow: 0 12px 30px -8px rgba(11,12,14,.5); }
.boekknop svg { flex-shrink: 0; }

/* Moet vóór de regel hieronder staan en met dezelfde kracht: het `hidden`-
   attribuut komt uit de stijl van de browser zelf, en die verliest van elke
   eigen regel die `display` zet. Zonder dit blijft het paneel staan terwijl
   het volgens de HTML dicht is, en op een telefoon ligt het dan precies over
   de knop waarmee je het zou openen. */
.boeker[hidden] { display: none; }

.boeker {
  position: fixed; left: 20px; bottom: 78px; z-index: 61;
  width: min(392px, calc(100vw - 40px));
  max-height: min(640px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--sh-3);
  animation: boekop .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes boekop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .boeker { animation: none; } }

.boekerkop { display: flex; gap: 14px; align-items: flex-start;
             padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.boekerkop h2 { font-size: 17px; letter-spacing: -.02em; margin: 0 0 3px; }
.boekerkop .hint { margin: 0; }
.boekersluit { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px;
               border: none; background: transparent; cursor: pointer;
               font-size: 22px; line-height: 1; color: var(--fg-3);
               border-radius: var(--r-sm); }
.boekersluit:hover { background: var(--surface-2); color: var(--fg); }

.boekerlijf { padding: 16px 18px 20px; overflow-y: auto; }

/* Dagen als een strook die je opzij schuift: twintig dagen passen niet in een
   raster van 380px, en een maandkalender is voor één keuze te veel scherm. */
/* De dagen als lijst, niet als strook die je opzij schuift.
   Een horizontale rij verstopt de helft van de week achter de rand; zo staan de
   datums er gewoon en klap je er eentje open. */
.boekdagen { display: flex; flex-direction: column; gap: 6px;
             max-height: 310px; overflow-y: auto; scrollbar-width: thin;
             padding-right: 2px; }

/* flex-shrink: 0 is hier niet optioneel. In een kolom met een maximumhoogte
   krimpen de items standaard mee, dus vijftien dagen werden vijftien streepjes
   van twintig pixels en de datum werd door `overflow: hidden` weggeknipt. */
.boekdagrij { flex-shrink: 0;
              border: 1px solid var(--line-2); border-radius: var(--r);
              background: var(--surface); overflow: hidden; }
.boekdagrij.open { border-color: var(--brass-line); background: var(--brass-soft); }

.boekdag { width: 100%; display: flex; align-items: center; gap: 12px;
           padding: 13px 15px; cursor: pointer; font: inherit; text-align: left;
           border: none; background: transparent; color: var(--fg); }
.boekdag:hover { background: color-mix(in srgb, var(--brass) 8%, transparent); }
.boekdag .dagnaam { flex: 1 1 auto; font-size: 15px; font-weight: 560;
                    letter-spacing: -.012em; }
.boekdag .dagnaam::first-letter { text-transform: uppercase; }
.boekdag .dagtelling { font-size: 12.5px; color: var(--fg-3); }
/* Een pijl van randen en geen teken: de latin-snede van Inter bevat geen
   enkel chevron, dus daar stond een leeg vierkantje. */
.boekdag::after { content: ""; flex-shrink: 0; width: 7px; height: 7px;
                  border-right: 2px solid var(--fg-3);
                  border-bottom: 2px solid var(--fg-3);
                  transform: rotate(-45deg); margin-right: 2px;
                  transition: transform .16s ease; }
.boekdagrij.open .boekdag::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .boekdag::after { transition: none; } }

/* Altijd drie kolommen: er zijn zes tijden, dus dat is netjes 3×2 op elk
   scherm. Met auto-fill en minmax sprong het aantal kolommen mee met de
   breedte, en dan werd het op de ene telefoon 3×2 en op de andere 4+2 met
   gaten. De lijn erboven scheidt de tijden van de dagknop, zodat ze niet
   tegen "6 tijden" aan plakken. */
.boektijdraster { display: grid; gap: 9px; padding: 13px 15px 15px;
                  margin-top: 2px; border-top: 1px solid var(--brass-line);
                  grid-template-columns: repeat(3, 1fr); }
.boektijd { padding: 12px 6px; cursor: pointer; font: inherit; font-size: 14.5px;
            font-variant-numeric: tabular-nums; min-height: 44px;
            border: 1px solid var(--line-2); border-radius: var(--r-sm);
            background: var(--surface); color: var(--fg);
            transition: border-color .12s ease, background .12s ease; }
.boektijd:hover { border-color: var(--brass);
                  background: color-mix(in srgb, var(--brass) 6%, var(--surface)); }
.boektijd:active { transform: translateY(1px); }

.boekoverslaan { display: block; margin-top: 18px; padding: 0; border: none;
                 background: none; cursor: pointer; font: inherit;
                 font-size: 13px; color: var(--fg-3); text-decoration: underline;
                 text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.boekoverslaan:hover { color: var(--fg); }

.boekvelden { display: grid; gap: 10px 12px; grid-template-columns: 1fr 1fr; }
.boekvelden .breed { grid-column: 1 / -1; }
.boekvelden label { margin-bottom: 4px; font-size: 12.5px; }
.boekvelden input { padding: 9px 12px; font-size: 14px; }

.boekgekozen { margin: 0 0 14px; padding: 10px 13px; border-radius: var(--r);
               background: var(--brass-soft); border: 1px solid var(--brass-line);
               font-size: 13.5px; font-weight: 520; }
.boekfout { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r);
            background: var(--bad-bg); color: var(--bad); font-size: 13.5px; }
.boekknoppen { display: flex; gap: 9px; margin-top: 18px; }
.boekknoppen .btn { flex: 1 1 auto; }

.boekklaar { text-align: center; padding: 14px 0 6px; }
.boekvink { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
            display: grid; place-items: center;
            background: var(--ok-bg); color: var(--ok); }
.boekklaar h3 { font-size: 17px; margin-bottom: 8px; }
.boekklaar .hint { max-width: 34ch; margin: 0 auto 18px; }

/* De eigen afspraaklink. Als tekstlink en niet als invoerveld met de kale url
   erin: dat veld is het adminonderdeel voor uitnodigingslinks (.invitebox) en
   leest op een klantbevestiging als een debugscherm. */
.boeklinkregel { display: flex; flex-wrap: wrap; justify-content: center;
                 align-items: center; gap: 6px 14px; margin: 0 0 18px; }

@media (max-width: 640px) {
  .boekknop { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 14px; }
  .boeker {
    left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 92dvh; border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
    animation: boekblad .22s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes boekblad {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  .boekerlijf { padding: 16px 16px 24px; }
  /* Het blad vult het scherm; de knop eronder is dan alleen nog in de weg. */
  body.boeker-open { overflow: hidden; }
  body.boeker-open .boekknop { display: none; }
}

/* ------------------------------------------------------------ telefoon

   De maten hierboven zijn voor een scherm waar je achter zit. Op een
   telefoon moet de witruimte mee omlaag, anders scrol je door lege vlakken
   heen op zoek naar de volgende regel tekst. */

@media (max-width: 720px) {
  .held-in { padding: 46px 18px 30px; gap: 32px; }
  .held h1 { font-size: clamp(34px, 10.5vw, 46px); letter-spacing: -.035em; }
  .held .lede { margin-bottom: 26px; }
  .heldknoppen { gap: 10px; }
  .heldknoppen .btn { flex: 1 1 100%; }
  .toestel { max-width: 264px; padding: 7px; border-radius: 26px; }
  .toestel video { border-radius: 20px; }

  .cijferbalk { grid-template-columns: 1fr 1fr; gap: 20px 16px;
                padding: 26px 18px 42px; }
  .cijfer b { font-size: 23px; }

  section.wrap { padding-top: 56px; padding-bottom: 56px; }
  .band, .donker { padding: 56px 0; }
  .slot { padding: 62px 0; }
  .kopblok { margin-bottom: 28px; }
  section h2 { font-size: clamp(24px, 6.4vw, 30px); }

  .strookdemo { gap: 26px; }
  .strookuitleg { gap: 24px; }
  /* Drie kleintjes naast elkaar, niet twee grote met een wees eronder. */
  .grid.drieluik { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .kolom .vlak b { font-size: 11px; }
  .kolom .hint { font-size: 11.5px; }

  .prijskaart .bedrag { font-size: 38px; }
  .prijskaart .bedrag s { font-size: 22px; }
  .prijskaart .btn { width: 100%; }
  .vraag summary { font-size: 15.5px; padding: 15px 0; }

  .sitefoot-in { grid-template-columns: 1fr 1fr; }
  .sitefoot-onder { justify-content: center; text-align: center; gap: 10px 20px;
                    padding-bottom: 26px; }
}

@media (max-width: 420px) {
  .sitefoot-in { grid-template-columns: 1fr; gap: 26px; }
}

/* Dagen op de afspraakpagina: zelfde uitklapper als in het boekvenster, maar
   dan zonder javascript, met <details>. */
.verzetlijst { display: flex; flex-direction: column; gap: 6px; }
.verzetdag { border: 1px solid var(--line-2); border-radius: var(--r);
             background: var(--surface); padding: 0 15px; }
.verzetdag[open] { border-color: var(--brass-line); background: var(--brass-soft); }
.verzetdag > summary { cursor: pointer; list-style: none; display: flex;
                       align-items: center; gap: 12px; padding: 13px 0;
                       font-size: 15px; font-weight: 560; }
.verzetdag > summary::-webkit-details-marker { display: none; }
.verzetdag > summary .hint { margin-left: auto; font-weight: 400; }
.verzetdag > summary::first-letter { text-transform: uppercase; }

/* ---- SEO-landingspagina's (marketing/) ------------------------------ */
/* De sectie-afstand bepalen we hier zelf; de 44/96 van .wrap zou dubbel
   stapelen en gaf te veel lucht boven en onder. */
.mkt .wrap { padding-top: 0; padding-bottom: 0; }

.mkt-hero { padding-top: 52px; }
.mkt-hero .lede { margin-top: 14px; }
.mkt-hero .heldknoppen { margin-top: 26px; }
.kruimels { font-size: 13px; color: var(--fg-3); margin-bottom: 20px;
            display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.kruimels a { color: var(--fg-2); }
.kruimels a:hover { color: var(--brass); }
.kruimels .sep { color: var(--line-2); }
.kruimels [aria-current="page"] { color: var(--fg); }

/* Belangrijk: op .wrap-elementen alleen top/bottom zetten. De shorthand-vorm
   (padding: x 0 y) zou de horizontale 24px van .wrap wegvagen en de blokken
   24px naar links schuiven t.o.v. de hero. */
/* Twee klassen diep (.mkt X) zodat deze de reset .mkt .wrap overstemmen; met
   één klasse wint de reset op specificiteit en verdwijnt de verticale marge. */
.mkt .mkt-body { padding-top: 6px; padding-bottom: 2px; }
.mkt .mkt-sectie { padding-top: 26px; padding-bottom: 26px; border-top: 1px solid var(--line); }
.mkt .mkt-sectie:first-child { border-top: none; padding-top: 24px; }
/* Losstaand contentblok direct onder de hero (geen scheidingslijn). */
.mkt .mkt-blok { padding-top: 30px; padding-bottom: 8px; }
.mkt-sectie h2 { font-size: clamp(21px, 3vw, 27px); margin-bottom: 14px; }
.mkt-sectie p { color: var(--fg-2); max-width: 66ch; margin: 0 0 12px; }
.mkt-sectie p:last-child { margin-bottom: 0; }
.mkt-sectie .streeplijst { margin-top: 16px; }

.mkt .mkt-verwant { padding-top: 34px; padding-bottom: 46px; }
.mkt-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mkt-links a { display: inline-block; padding: 9px 15px; border: 1px solid var(--line);
               border-radius: 999px; font-size: 14px; color: var(--fg);
               background: var(--surface); transition: border-color .14s ease, background .14s ease; }
.mkt-links a:hover { border-color: var(--brass-line); background: var(--brass-soft); }

/* FAQ-band en slot: eigen, strakkere maat dan op de homepage. */
.mkt .band { padding: 44px 0; }
.mkt .slot { padding: 58px 0; }

.kennisgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.kenniskaart { display: block; padding: 24px; border: 1px solid var(--line);
               border-radius: 14px; background: var(--surface);
               transition: border-color .14s ease, transform .14s ease; }
.kenniskaart:hover { border-color: var(--brass-line); transform: translateY(-2px); }
.kenniskaart h2 { font-size: 19px; margin: 8px 0; line-height: 1.25; }
.kenniskaart p { color: var(--fg-2); font-size: 14px; margin: 0 0 14px; }
.kennismeer { color: var(--brass); font-size: 14px; font-weight: 550; }

.voorbeeldblok { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.voorbeeldnaast .beeldbijschrift { position: static; margin-bottom: 14px; }
.voorbeeldnaast .streeplijst { margin-top: 4px; }
@media (max-width: 680px) { .voorbeeldblok { grid-template-columns: 1fr; } }

/* Gesprek-pagina */
.mkt .gesprekvel { padding-top: 24px; padding-bottom: 12px; }
.gesprekblad { margin: 0; align-items: start; }
.gesprekstappen { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.gesprekstappen ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.gesprekstappen li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.gesprekstappen li p { margin: 3px 0 0; font-size: 14.5px; color: var(--fg-2); }
.gesprekstappen li > span { display: inline-flex; align-items: center; justify-content: center;
                            width: 28px; height: 28px; border-radius: 50%; background: var(--brass-soft);
                            color: var(--brass); font-weight: 700; font-size: 13px; }
.gesprekkaart > .veld, .gesprekkaart > .veldrij { margin-top: 14px; }
.gesprekkaart .veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .gesprekkaart .veldrij { grid-template-columns: 1fr; } }

/* Proefaccount op de probeer-resultaatpagina: eerdere reels + nog een maken. */
.proefaccount { max-width: 640px; margin: 44px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.proefeerder { margin-bottom: 28px; }
.proefeerder .etiket { text-align: center; }
.proefgalerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 14px; }
.proefreelkaart { margin: 0; }
.proefreelkaart .probeertoestel.klein { max-width: 100%; margin: 0; padding: 5px; border-radius: 16px; }
.proefreelkaart .probeertoestel.klein video { border-radius: 12px; }
.proefreelkaart figcaption { margin-top: 8px; text-align: center; }
.proefnog { max-width: 520px; margin: 0 auto; text-align: center; }
.proefnog h2 { font-size: clamp(20px, 3vw, 24px); }