/* /vergelijk/ en de vergelijkingen eronder (fase 7.0). Bovenop tokens.css,
   herbouw.css en pagina.css. Waarden uit tokens.css, regels uit
   merk/STYLEGUIDE.md, de vorm uit ux-onderzoek/poort-vergelijk.md: de kaart
   van Notion /customers (hele kaart klikbaar, schaduw bij hover), de rustige
   tabel en het kies-blok van Plausible, de vragenrij van Linear. */

/* ---------- hero ---------- */

.zv-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.2)}
.zv-hero__in{align-items:center}
@media (min-width:861px){.zv-hero__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.zv-hero__tekst{display:grid;gap:var(--ruimte-blok-l);justify-items:start;min-width:0}
body.zh .zv-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);max-width:22ch;text-wrap:balance}
.zv-hero .zh-vlekken{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.zv-hero--index{padding-bottom:var(--ruimte-blok-l)}
.zv-hero--index .zv-hero__tekst{gap:var(--ruimte-blok-m)}
body.zh .zv-hero--index .zv-hero__titel{max-width:22ch}
.zv-terug{text-decoration:none;min-height:var(--ruimte-tikdoel);display:inline-flex;align-items:center}

/* Het scherm draagt een pil die zegt dat het de demo is (brief Moneybird, veld 7).
   De opnames zijn altijd de app in licht, dus de pil is in beide thema's donker
   (de balk-kleuren, die niet wisselen) en staat linksonder, weg van het logo. */
.zv-venster,.zv-duo__scherm{position:relative;margin:0}
/* Het schuiven zelf is gedeeld: .zh-duo in pagina.css. */
.zv-venster__pil{
  position:absolute;left:var(--ruimte-blok-s);bottom:var(--ruimte-blok-s);z-index:1;
  padding:.45em 1em;border-radius:var(--radius-pil);
  background:var(--kleur-balk);color:var(--kleur-op-balk);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);line-height:var(--type-regel-ui);
  box-shadow:var(--schaduw-glas);
}

/* ---------- index: de kaarten ---------- */

.zv-lijst{padding-block:var(--ruimte-blok-l) var(--ruimte-sectie)}
/* De twee groepen naast elkaar, zodat de vier pakketten op één rij staan: eerst
   het logo, dan pas de naam (Salesforce, de rij productkaarten op /nl/). */
.zv-groepen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-goot)}
/* Elke groep vult de hoogte van de rij, zodat alle vier de kaarten even hoog zijn. */
.zv-groep{display:flex;flex-direction:column}
/* Met body.zh ervoor, anders zet herbouw.css de marge van de kop op nul. */
body.zh .zv-groep__kop{margin-bottom:var(--ruimte-blok-m)}
.zv-kaarten{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-goot);margin:0;padding:0;list-style:none}
.zv-kaart{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ruimte-blok-s);
  padding:clamp(var(--ruimte-blok-m),2vw,var(--ruimte-blok-l));border-radius:var(--radius-kaart);
  background:var(--kleur-glas-paneel);border:1px solid var(--kleur-glas-paneel-rand);
  transition:box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),border-color var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* De kaart is ook een .rv, en die regel in pagina.css wint: hier staan ze samen. */
html.js .zv-kaart.rv{
  transition:opacity var(--motion-duur-lade) var(--motion-curve-uit),transform var(--motion-duur-lade) var(--motion-curve-uit),
    box-shadow var(--motion-duur-kaart) var(--motion-curve-uit),border-color var(--motion-duur-kaart) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit);
}
/* Het logo van het andere pakket, een plus (ernaast) of een pijl (overstappen), en de Z. */
.zv-teken{display:flex;align-items:center;gap:var(--ruimte-blok-s)}
.zv-teken__ander{display:flex;transition:translate var(--motion-duur-kaart) var(--motion-curve-uit)}
.zv-logo,.zv-teken__zm{
  display:grid;place-items:center;width:var(--ruimte-merktegel);height:var(--ruimte-merktegel);border-radius:var(--radius-tegel);
  border:1px solid var(--kleur-rand);box-sizing:border-box;
}
.zv-logo{object-fit:cover;background:var(--kleur-vlak)}
/* Twee pakketten op één kaart overlappen een tegelradius, met een ring in de kaartkleur
   ertussen. De ring leent de focusbreedte bewust: even dik als de focusring. */
.zv-logo + .zv-logo{margin-left:calc(var(--radius-tegel) * -1);box-shadow:0 0 0 var(--ruimte-focus-breedte) var(--kleur-vlak)}
/* Moneybird en Excel leveren een los merkteken, de rest een volle tegel. */
.zv-logo--moneybird,.zv-logo--excel{object-fit:contain;padding:calc(var(--ruimte-blok-s) / 2)}
.zv-teken__zm{background:var(--kleur-balk);transition:translate var(--motion-duur-kaart) var(--motion-curve-uit)}
.zv-teken__tussen{color:var(--kleur-tekst-3);font-weight:var(--type-gewicht-kop)}
/* De pil uit de stijlgids: glas-zacht, groepslabel op nadruk. */
.zv-kaart__soort{
  padding:.45em 1em;border-radius:var(--radius-pil);background:var(--kleur-glas-zacht);
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-nadruk);color:var(--kleur-tekst-2);line-height:var(--type-regel-ui);
}
/* Een kop-3 op inleidingsmaat (stijlgids, hoofdstuk 2). */
body.zh .zv-kaart__naam{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);margin:0}
.zv-kaart__naam a{color:inherit;text-decoration:none}
/* De hele kaart is de link, de naam blijft het ene klikdoel voor schermlezers. */
.zv-kaart__naam a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.zv-kaart__naam a:focus-visible{outline:none}
.zv-kaart:has(a:focus-visible){outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zv-kaart__taak{font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);color:var(--kleur-tekst-2);margin:0}
/* De kaartvoet: een lijn en de tekstlink, onderaan, zodat de vier op één lijn eindigen. */
.zv-kaart__lees{
  display:inline-flex;align-items:center;gap:.4em;align-self:stretch;margin-top:auto;padding-top:var(--ruimte-blok-s);
  border-top:1px solid var(--kleur-rand-zacht);color:var(--kleur-link);font-weight:var(--type-gewicht-label);font-size:var(--type-maat-klein);
}

/* ---------- de zin over de boekhouding ---------- */

.zv-boek{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem var(--ruimte-goot);
  margin-top:calc(var(--ruimte-blok-l) * 2);padding-top:var(--ruimte-blok-l);border-top:1px solid var(--kleur-rand);
  color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst);
}
.zv-boek span{max-width:62ch}
.zv-boek-band .zv-boek{margin-top:0;padding-block:var(--ruimte-blok-l);border-top:0}
.zv-boek-band{border-block:1px solid var(--kleur-rand)}

/* ---------- het verschil: twee schermen die uit elkaar schuiven ---------- */

.zv-verschil__tekst{display:grid;gap:var(--ruimte-blok-m);justify-items:start;margin-bottom:calc(var(--ruimte-blok-l) * 2)}
.zv-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-goot)}

/* ---------- de tabel ---------- */

/* Rustig zoals bij Plausible: geen kader, alleen lijnen tussen de rijen. */
body.zh .zv-tabel h2{max-width:26ch}
.zv-tabel__vak{margin-top:calc(var(--ruimte-blok-l) * 1.5);overflow-x:auto}
/* Met tekst op 200% scrolt de tabel in zijn vak, niet de pagina (WCAG 1.4.4 en 1.4.10). */
.zv-tabel th,.zv-tabel td{hyphens:auto}
.zv-tabel table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.zv-tabel caption{caption-side:top;text-align:left;padding-bottom:var(--ruimte-blok-m)}
.zv-tabel th,.zv-tabel td{padding:var(--ruimte-blok-s) var(--ruimte-blok-l) var(--ruimte-blok-s) 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--kleur-rand);line-height:var(--type-regel-tekst)}
.zv-tabel thead th,.zv-tabel thead td{border-bottom-color:var(--kleur-tekst-3)}
.zv-tabel thead th{
  font-size:var(--type-maat-groepslabel);font-weight:var(--type-gewicht-label);letter-spacing:var(--type-spatie-groepslabel);
  text-transform:uppercase;color:var(--kleur-tekst-2);
}
.zv-tabel tbody th{width:26%;font-weight:var(--type-gewicht-label);color:var(--kleur-tekst)}
.zv-tabel td{width:37%;color:var(--kleur-tekst-2)}
.zv-tabel td.zv-tabel__zm{color:var(--kleur-tekst)}
.zv-tabel thead th.zv-tabel__zm{color:var(--kleur-tekst)}

/* ---------- wanneer de ander beter past, op het lichte vlak ---------- */

/* Twee kolommen zonder kaart, de kop op een lijn, zoals "Choose X if" bij Plausible. */
.zv-kies__twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-goot) clamp(2rem,6vw,6rem);margin-top:calc(var(--ruimte-blok-l) * 1.5)}
.zv-kies__kant{padding-top:var(--ruimte-blok-m);border-top:2px solid var(--kleur-tekst-3)}
.zv-kies__kant--zm{border-top-color:var(--kleur-tekst)}
body.zh .zv-kies__kant h3{font-size:var(--type-maat-kaartkop);margin:0 0 var(--ruimte-blok-s)}
.zv-kies__kant ul{margin:0;padding:0;list-style:none}
.zv-kies__kant li{
  position:relative;padding:.9rem 0 .9rem 1.6rem;border-top:1px solid var(--kleur-rand-zacht);
  line-height:var(--type-regel-tekst);color:var(--kleur-tekst);
}
.zv-kies__kant li::before{
  content:"";position:absolute;left:0;top:calc(.9rem + .55em);width:9px;height:9px;border-radius:50%;
  background:var(--kleur-tekst-3);
}
.zv-kies__kant--zm li::before{background:var(--kleur-tekst)}

/* ---------- overstappen: een CSV die binnenkomt ---------- */

.zv-csv{display:grid;justify-items:center;gap:var(--ruimte-blok-s)}
.zv-csv__blad{
  display:grid;width:100%;padding:var(--ruimte-blok-m);border-radius:var(--radius-paneel);
  background:var(--kleur-glas-paneel);border:1px solid var(--kleur-glas-paneel-rand);box-shadow:var(--schaduw-glas);
  font-variant-numeric:tabular-nums;
}
.zv-csv__naam{margin-bottom:var(--ruimte-blok-s);font-weight:var(--type-gewicht-label);color:var(--kleur-tekst)}
.zv-csv__rij{
  display:grid;grid-template-columns:4.5rem 3.5rem minmax(0,1fr) minmax(0,1fr);gap:.75rem;
  padding-block:.6rem;border-top:1px solid var(--kleur-rand-zacht);color:var(--kleur-tekst-2);
}
.zv-csv__rij i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zv-csv__blad--klanten .zv-csv__rij{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.6fr)}
.zv-csv__blad--klanten .zv-csv__rij i:first-child{text-overflow:clip;white-space:normal}
.zv-csv__rij--kop{color:var(--kleur-tekst-3);font-weight:var(--type-gewicht-label)}
.zv-csv__pijl{font-size:1.5rem;color:var(--kleur-tekst-3)}
.zv-csv__klaar{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius-pil);
  border:1px solid var(--kleur-gelukt);color:var(--kleur-tekst);font-weight:var(--type-gewicht-label);
}
.zv-csv__klaar::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kleur-gelukt)}
/* Binnenkomen: de regels een voor een, daarna de melding. */
html.js .zv-csv.rv{opacity:1;transform:none}
html.js .zv-csv .zv-csv__rij,html.js .zv-csv .zv-csv__pijl,html.js .zv-csv .zv-csv__klaar{
  opacity:0;transform:translateY(8px);
  transition:opacity var(--motion-duur-kaart) var(--motion-curve-uit),transform var(--motion-duur-kaart) var(--motion-curve-uit);
}
html.js .zv-csv.in .zv-csv__rij,html.js .zv-csv.in .zv-csv__pijl,html.js .zv-csv.in .zv-csv__klaar{opacity:1;transform:none}
html.js .zv-csv.in .zv-csv__rij:nth-child(3){transition-delay:120ms}
html.js .zv-csv.in .zv-csv__rij:nth-child(4){transition-delay:240ms}
html.js .zv-csv.in .zv-csv__rij:nth-child(5){transition-delay:360ms}
html.js .zv-csv.in .zv-csv__pijl{transition-delay:560ms}
html.js .zv-csv.in .zv-csv__klaar{transition-delay:720ms}

/* ---------- wat het kost ---------- */

.zv-prijs{border-top:1px solid var(--kleur-rand)}
.zv-prijs__bedrag{display:grid;margin:0;color:var(--kleur-tekst-2);font-size:var(--type-maat-inleiding)}
.zv-prijs__bedrag span{
  font-size:clamp(6rem,16vw,11rem);font-weight:var(--type-gewicht-kop);line-height:.9;color:var(--kleur-tekst);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}

/* ---------- de vragen, zoals op /prijzen/ ---------- */

.zv-vragen{interpolate-size:allow-keywords}
.zv-vragen__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.zv-vragen__kant{display:grid;gap:var(--ruimte-blok-m);justify-items:start;position:sticky;top:calc(var(--ruimte-knop) + var(--ruimte-blok-l) * 2)}
.zv-groep-vragen + .zv-groep-vragen{margin-top:calc(var(--ruimte-blok-l) * 1.5)}
.zv-groep-vragen .zh-label{padding-bottom:var(--ruimte-blok-s);border-bottom:1px solid var(--kleur-rand)}
.zv-vraag{border-bottom:1px solid var(--kleur-rand)}
.zv-vraag summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:calc(var(--ruimte-tikdoel) + 16px);
  padding-block:.6rem;cursor:pointer;list-style:none;
  font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
}
.zv-vraag summary::-webkit-details-marker{display:none}
.zv-vraag summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst-2), var(--kleur-tekst-2)) center / 2px 14px no-repeat;
  transition:background-size var(--motion-duur-menu) var(--motion-curve-uit);
}
.zv-vraag[open] summary::after{
  background:
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 14px 2px no-repeat,
    linear-gradient(var(--kleur-tekst), var(--kleur-tekst)) center / 2px 0 no-repeat;
}
.zv-vraag__antwoord p{max-width:var(--ruimte-meet);margin:0;padding-bottom:var(--ruimte-blok-m);color:var(--kleur-tekst-2);line-height:var(--type-regel-tekst)}
.zv-vraag__antwoord a{color:var(--kleur-link);text-decoration:underline;text-underline-offset:3px}
@supports selector(::details-content){
  .zv-vraag::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--motion-duur-lade) var(--motion-curve-uit),content-visibility var(--motion-duur-lade) allow-discrete;
  }
  .zv-vraag[open]::details-content{block-size:auto}
}

/* ---------- de laatste stap ---------- */

.zv-slot:not(.zv-slot--licht){padding-bottom:calc(var(--ruimte-sectie) * 1.6)}
.zv-slot:not(.zv-slot--licht) .zh-wrap{display:grid;justify-items:center;text-align:center;gap:var(--ruimte-blok-l)}
body.zh .zv-slot:not(.zv-slot--licht) h2{font-size:var(--type-maat-titel);max-width:16ch}
.zv-slot:not(.zv-slot--licht) .zh-knoppen{justify-content:center}

/* ---------- hover, alleen met een muis ---------- */

@media (hover:hover) and (pointer:fine){
  .zv-kaart:hover{box-shadow:var(--schaduw-op);border-color:transparent;translate:0 calc(var(--motion-verplaatsing-kaart) * -1)}
  .zv-kaart:hover .zv-kaart__lees .zh-link__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
  /* De twee tegels schuiven naar elkaar toe: het pakket en Zakenmaat samen. */
  .zv-kaart:hover .zv-teken__ander{translate:var(--motion-verplaatsing-kaart) 0}
  .zv-kaart:hover .zv-teken__zm{translate:calc(var(--motion-verplaatsing-kaart) * -1) 0}
  .zv-terug:hover{color:var(--kleur-link)}
  .zv-vraag summary:hover{color:var(--kleur-link)}
  .zv-vraag__antwoord a:hover{color:var(--kleur-tekst);text-decoration-thickness:2px}
}

/* ---------- smaller ---------- */

@media (max-width:860px){
  .zv-duo,.zv-kies__twee,.zv-vragen__in{grid-template-columns:1fr}
  .zv-vragen__kant{position:static}
  .zv-overstap .zh-twee > .zv-csv{order:2}
}
@media (max-width:1100px){
  .zv-groepen{grid-template-columns:1fr;gap:var(--ruimte-blok-l)}
}
@media (max-width:560px){
  .zv-kaarten{grid-template-columns:1fr}
}
/* De tabel stapelt: per rij de taak als kop, daaronder beide kanten met hun naam. */
@media (max-width:700px){
  .zv-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .zv-tabel table,.zv-tabel tbody,.zv-tabel tr,.zv-tabel th,.zv-tabel td{display:block;width:auto}
  .zv-tabel tr{padding:var(--ruimte-blok-m) 0;border-bottom:1px solid var(--kleur-rand-zacht)}
  .zv-tabel tbody tr:last-child{border-bottom:0}
  .zv-tabel th,.zv-tabel td{padding:0;border:0}
  .zv-tabel tbody th{width:auto;margin-bottom:.5rem}
  .zv-tabel caption{display:block}
  .zv-tabel td{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;padding-block:.35rem}
  .zv-tabel td::before{content:attr(data-kop);color:var(--kleur-tekst-2);font-weight:var(--type-gewicht-label)}
}
@media (max-width:600px){
  .zv-csv__rij{grid-template-columns:3.5rem 2.5rem minmax(0,1fr)}
  .zv-csv__rij i:nth-child(4){display:none}
  .zv-csv__blad--klanten .zv-csv__rij{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr)}
}

/* ---------- minder beweging: alles stil, alles zichtbaar ---------- */

@media (prefers-reduced-motion:reduce){
  .zv-kaart,.zv-teken__ander,.zv-teken__zm,.zv-vraag summary::after{transition:none}
  html.js .zv-kaart.rv{transition:none}
  .zv-vraag::details-content{transition:none}
  html.js .zv-csv .zv-csv__rij,html.js .zv-csv .zv-csv__pijl,html.js .zv-csv .zv-csv__klaar{opacity:1;transform:none;transition:none}
}