/* Boost Center-landingspagina: het component "Boost App" (hero, rondleiding, inline voorbeeldkaarten), gebouwd door assets/js/landing-app.js.
   De opmaak van het scherm zelf staat als inline stijlen in het script (1-op-1 uit het ontwerp). Hier alleen de container en het canvas:
   - container .lp-app: volle breedte van zijn omgeving, altijd de verhouding 2:1 (buitenhoogte = 640 x schaal), achtergrond #f6f5f5, overflow hidden.
     Tot het script het scherm heeft gebouwd (en zonder script) toont de container alvast de vaste vlakken van de app: de donkere zijbalk
     (220 van 1280 px) en de witte kopbalk (60 van 640 px). Het canvas dekt dat daarna volledig af;
   - canvas .lp-app__canvas: 1280x640 px, absoluut, transform-origin 0 0; het script zet transform: scale(breedte / 1280) en de animatie draait in het script. */

.lp-app[data-lp-app] { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #f6f5f5 linear-gradient(90deg, #201e1d 17.1875%, rgba(32,30,29,0) 17.1875%); -webkit-user-select: none; user-select: none; }
.lp-app[data-lp-app]::after { content: ''; position: absolute; top: 0; right: 0; width: 82.8125%; height: 9.375%; background: #fff; }
@supports not (aspect-ratio: 2 / 1) {
  .lp-app[data-lp-app]::before { content: ''; display: block; padding-top: 50%; }
}

.lp-app__canvas { position: absolute; z-index: 1; top: 0; left: 0; width: 1280px; height: 640px; transform-origin: 0 0; display: flex; background: #f6f5f5; color: #201e1d; font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-size-adjust: none; text-align: left; letter-spacing: normal; word-spacing: normal; }

/* Toetsenbordfocus op de zijbalk van de klikbare hero (de muis ziet er niets van). */
.lp-app__canvas [data-lp-nav]:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }