/* ledger.css — het handtekeningbeeld van de business case: de stapel.

   Het argument van deze pagina is niet "goedkoper". Het is "vierentwintig rekeningen tegen één".
   Een prijs naast een prijs zegt dat getal twee keer en laat het AANTAL weg - precies de helft van
   de pijn. Dus staat er nu geen tweede prijsvakje meer maar een stapel: vierentwintig strookjes,
   elk met de leverancier en het bedrag dat er echt op staat, tegen één strookje dat er los naast
   ligt. Dezelfde soort papier, want dat is het punt: het is hetzelfde soort ding, er is er maar één.

   De strookjes komen uit de tabel eronder (#stack-body). Wie daar een tool uitvinkt, ziet zijn
   strookje van de stapel af glijden en de stapel dichtklappen. De rekenhulp en het beeld zijn
   daarmee hetzelfde ding in plaats van twee blokken die toevallig hetzelfde getal noemen.

   De letter op een strookje is IBM Plex Mono - de taal van een afschrift, niet van een landingspagina.
   Het is de enige plek op de site waar die letter voorkomt. */

.ledger{
  /* De stap is groter dan de tekstregel, anders snijdt het volgende strookje de letters van
     het vorige doormidden en wordt de stapel een grijze vlek. Elk strookje laat nu zijn hele
     regel zien: dit is te LEZEN, en de namen zijn het argument. */
  --slip-step:14px;
  --slip-h:20px;
  position:relative;
  height:calc(var(--slip-step) * (var(--slip-count,24) - 1) + var(--slip-h));
  margin:2px 0 18px;
}

.slip{
  position:absolute;left:0;right:0;bottom:0;height:var(--slip-h);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:0 12px 3px;border-radius:4px;
  background:linear-gradient(178deg,#f8f6ef,#efece2);
  color:#12180f;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 3px 7px -5px rgba(0,0,0,.55);
  font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:10.5px;line-height:11px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;
  transform:translate3d(var(--x,0),calc(var(--y,0) * -1),0) rotate(var(--r,0deg));
  transition:transform .5s var(--ease-out),opacity .35s linear;
  will-change:transform;
}
.slip b{font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
.slip i{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
/* de scheur langs de zichtbare (onder)rand: een strookje is afgescheurd, geen kaartje */
.slip::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px);
  opacity:.5;
}
/* uitgevinkt: het strookje glijdt de stapel af en de rest zakt in */
.slip.is-off{
  transform:translate3d(calc(var(--x,0) + 78%),calc(var(--y,0) * -1 - 10px),0) rotate(5deg);
  opacity:0;pointer-events:none;
}
/* het delen van de stapel bij binnenkomst */
.ledger.is-dealing .slip{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}

/* het vakje eromheen: geen tweede kaart meer, alleen de stapel en zijn totaal */
/* geen kader meer om de stapel: een stapel heeft geen doos nodig, en de amber staat al op het bedrag */
.hero-numbers .vs-them{background:none;border:0;box-shadow:none;padding:16px 8px 8px}
.hero-numbers .vs-them .vs-label{color:rgba(255,255,255,.7)}
.hero-numbers .vs-them .vs-price{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(30px,4.2vw,46px);font-weight:600;letter-spacing:-.02em;
}
/* De doorhaling mocht weg: de stapel zegt het al, en twee dingen die hetzelfde zeggen zijn er één
   te veel. */
.hero-numbers .vs-them .vs-price::after{display:none}

/* het ene strookje ernaast, op dezelfde grondlijn als de stapel */
/* het ene strookje staat op ooghoogte van de stapel, niet aan zijn voet */
.hero-numbers .versus{align-items:center}
.hero-numbers .vs-us{
  position:relative;padding:0;border:0;background:none;box-shadow:none;
}
.hero-numbers .vs-us .vs-label,
.hero-numbers .vs-us .vs-price,
.hero-numbers .vs-us .vs-sub{position:relative;z-index:1}
.hero-numbers .vs-us .one-slip{
  position:relative;display:block;padding:20px 18px 18px;border-radius:7px;
  background:linear-gradient(178deg,#f7f5ed,#eae7dc);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 26px 40px -22px rgba(0,0,0,.95),
    0 0 0 1px rgba(52,209,122,.35);
}
.hero-numbers .vs-us .one-slip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px);
  opacity:.5;border-radius:7px 7px 0 0;
}
.hero-numbers .vs-us .vs-label{color:#2c7a4d}
.hero-numbers .vs-us .vs-price{
  color:#0f7a41;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(38px,5.6vw,62px);font-weight:600;letter-spacing:-.03em;
}
.hero-numbers .vs-us .vs-sub{color:#5c6b5f;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.hero-numbers .vs-them .vs-sub{color:rgba(255,255,255,.45);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}

/* De stapel tegen het ene strookje zegt "tegenover" al. Het woordje vs blijft alleen staan waar
   de twee onder elkaar komen te staan en het verband anders wegvalt: op een telefoon. */
.hero-numbers .vs-mid{display:none}
@media(max-width:520px){.hero-numbers .vs-mid{display:block;align-self:center;color:rgba(255,255,255,.35);font-size:11px;letter-spacing:.28em}}

/* de teller van de stapel, klein en in de rand: zegt hoeveel er nog op ligt terwijl je uitvinkt */
.ledger-count{
  display:block;margin-top:3px;white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:rgba(255,255,255,.42);letter-spacing:.02em;
}

@media(max-width:900px){
  /* de zichtbare strook moet altijd hoger zijn dan regel + onderrand, anders snijdt het
     strookje erboven de letters weer af */
  .ledger{--slip-step:13px;--slip-h:19px}
  .slip{font-size:9.5px;line-height:10px;padding:0 9px 2px}
}
@media(max-width:520px){
  .hero-numbers .versus{align-items:stretch}
  .ledger{--slip-step:12px;--slip-h:18px}
}
@media (prefers-reduced-motion:reduce){
  .slip{transition:none}
  .ledger.is-dealing .slip{opacity:1;transform:translate3d(var(--x,0),calc(var(--y,0) * -1),0) rotate(var(--r,0deg))}
}