/* Elke afbeelding heeft nu breedte en hoogte in de HTML staan, zodat de pagina
   niet verspringt tijdens het laden. Zonder height auto zou een geschaalde
   afbeelding daardoor uitgerekt worden. */
img {
  height: auto;
}

@font-face {
  font-family: Poetsenone;
  src: url('../fonts/PoetsenOne-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

.body-test {
  height: 10000px;
}

.section-hero {
  background-color: #f9fdff;
  background-image: url('../images/header-hero.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 830px;
}

.navbar {
  background-color: #0000;
  padding-top: 30px;
}

.container-full {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
}

.brand-logo {
  background-image: url('../images/logo.svg');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 70px;
}

.navlink {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.navlink.w--current {
  color: #9249ae;
}

.navmenu {
  padding-top: 5px;
  padding-bottom: 5px;
}

.hero-wrapper {
  padding-top: 60px;
}

.hero-box {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.hero-content-box {
  z-index: 10;
  width: 47%;
  padding-top: 50px;
  position: relative;
}

.hero-img-box {
  width: 50%;
  position: relative;
}

.hero-lottie-1 {
  z-index: 9;
  position: relative;
}

.hero-lottie-2 {
  z-index: 1;
  width: 150%;
  position: absolute;
  inset: -40% auto auto -50%;
}

.heading-h1 {
  color: #1e194ecc;
  margin-top: 0;
  margin-bottom: 30px;
  font-family: Poetsenone, sans-serif;
  font-size: 54px;
  line-height: 1;
}

.hero-subtext {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 19px;
  line-height: 1.5;
}

.app-store-box {
  align-items: center;
  margin-top: 50px;
  display: flex;
}

.app-store-textbox {
  flex: 1;
  padding-left: 20px;
}

.app-store-text {
  color: #6c7387b3;
  font-family: Lato, sans-serif;
  font-size: 16px;
}

.section-why {
  padding-top: 50px;
  padding-bottom: 80px;
}

.why-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.why-img-box {
  width: 35%;
  position: relative;
  top: -20px;
}

.why-content-box {
  width: 42%;
}

.why-content-box .heading-h2 {
  margin-top: 0;
}

.heading-h2 {
  color: #1e194ecc;
  margin-top: 40px;
  margin-bottom: 50px;
  font-family: Poetsenone, sans-serif;
  font-size: 44px;
  line-height: 1;
}

.heading-h2.fs-40 {
  font-size: 40px;
}

/* Links in de lopende tekst van artikelen. Zonder deze regel erven ze de
   tekstkleur en zijn ze niet als link te herkennen. */
.paragraph a {
  color: #9249ae;
  text-decoration: underline;
}

.paragraph {
  color: #292d37;
  text-align: left;
  max-width: none;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  position: static;
  overflow: visible;
}

/* .center en .center-align deden exact hetzelfde; samengevoegd zodat ze niet
   opnieuw uit elkaar kunnen lopen. */
.paragraph.center, .paragraph.center-align {
  text-align: center;
}

.paragraph.left-align {
  text-align: left;
}

.why-list-wrapper {
  margin-top: 50px;
}

.why-list-item {
  color: #292d37;
  margin-bottom: 22px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 56px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  position: relative;
}

/* Zelfde afgeronde vlakjes als de kaartjes in de hero. */
.why-list-item:before {
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  content: "\2713";
}

.why-list-item.icon-1:before {
  color: #118c7c;
  background-color: #d8f4ef;
}

.why-list-item.icon-2:before {
  color: #9249ae;
  background-color: #f3ecf9;
}

.why-lottie-1 {
  z-index: 1;
  position: relative;
}

.why-lottie-2 {
  z-index: 2;
  height: 70%;
  position: absolute;
  inset: auto 0% 50px auto;
}

.section-solutions {
  background-color: #f7fafd99;
  padding-top: 100px;
  padding-bottom: 100px;
}

.title-box {
  clear: none;
  text-align: center;
  object-fit: fill;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  left: auto;
  right: auto;
}

.title-box.full {
  width: 100%;
  max-width: 100%;
}

.break {
  display: block;
}

.solution-box {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  display: grid;
}

.solution-item {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  width: auto;
  padding: 34px 30px;
  transition: all .25s;
}

.solution-item:hover {
  border-color: #e0d3ea;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px #1e194e14;
}

/* Genummerde vlakjes, zelfde patroon als "Zo werkt het" op de landingspagina's. */
.solution-item-num {
  color: #9249ae;
  background-color: #f3ecf9;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.solution-item-title {
  color: #292d37;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.solution-item-content {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
}

.soluton-item-img {
  width: 60%;
  display: block;
}

.soluton-item-img._50 {
  width: 50%;
}

/* Eén bedrag op de homepage in plaats van de hele tabel, die staat op de
   prijzenpagina. De chips eronder vangen de vervolgvragen op. */
.prijs-groot {
  color: #1e194e;
  margin: 26px 0 18px;
  font-family: Poetsenone, sans-serif;
  font-size: 52px;
  line-height: 1;
}

/* Alleen de toelichting na het bedrag, niet het bedrag zelf (.hx-price). */
.prijs-groot span:not(.hx-price) {
  color: #6c7280;
  font-family: Lato, sans-serif;
  font-size: 17px;
  font-weight: 300;
  display: block;
  margin-top: 12px;
}

.section-prices .hx-chips {
  justify-content: center;
  max-width: 760px;
  margin: 30px auto 0;
}

.section-prices {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pricing-box {
  justify-content: space-between;
  margin-top: 80px;
  display: flex;
}

.pricing-item {
  border: 1px solid #bec5d866;
  border-radius: 20px;
  width: 30%;
  transition: all .3s;
  overflow: hidden;
}

.pricing-item:hover {
  border-color: #bec5d800;
  box-shadow: 11px 11px 41px #bddff638;
}

.pricing-item.shadow {
  border-style: none;
  box-shadow: 11px 11px 41px #bddff638;
}

.pricing-title-box {
  padding: 34px 30px 0;
  position: relative;
}

.pricing-price {
  color: #1e194e;
  margin-top: 6px;
  font-family: Poetsenone, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}

.pricing-label-blue {
  color: #5963c2;
  background-color: #caddfd;
}

.pricing-label-green {
  color: #118c7c;
  background-color: #d8f4ef;
}

.pricing-label-purple {
  color: #9249ae;
  background-color: #f3ecf9;
}

.pricing-title-box.gradient-1 {
  background-image: linear-gradient(#e7a7ff38, #7e0ca738);
}

.pricing-title-box.gradient-2 {
  background-image: linear-gradient(#bbfeea70, #45ddc370);
}

.pricing-content-box {
  padding: 22px 30px 34px;
}

.pricing-button-box {
  text-align: center;
  padding: 20px 40px 40px;
  display: none;
}

.pricing-item-title {
  color: #1e194e;
  margin-bottom: 0;
  font-family: Poetsenone, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}

.pricing-title-subtext {
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 5px 14px;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  display: inline-block;
}

.button-border {
  color: #a8adb9;
  background-color: #fff;
  border: 1px solid #bec5d8;
  border-radius: 12px;
  padding: 15px 40px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 400;
  transition: all .2s;
}

.button-border:hover {
  color: #292d37;
  border-color: #292d37;
}

/* Afvinklijst met alles wat in het abonnement zit, twee kolommen zodat een
   koper er in één blik langs kan. */
.inbegrepen-lijst {
  column-gap: 60px;
  columns: 2;
  margin-top: 34px;
}

.inbegrepen-lijst .pricing-benefit-text {
  break-inside: avoid;
  font-size: 15px;
}

/* Prijzenpagina: de lijst in drie groepen, elk met een kop, naar het pakket
   waarin andere aanbieders die onderdelen stoppen. */
.inbegrepen-groep {
  margin-top: 44px;
}

.hx-head + .inbegrepen-groep {
  margin-top: 34px;
}

.inbegrepen-groep .inbegrepen-lijst {
  margin-top: 0;
}

.inbegrepen-noot {
  margin-top: 26px;
}

/* Prijskaarten direct onder een sectiekop (bezoekers-aanmelden) in plaats van
   onder de titel van de prijzenpagina, en de noot eronder als laatste blok. */
.hx-head + .pricing-box {
  margin-top: 0;
}

.pricing-box + .inbegrepen-noot {
  margin-top: 40px;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .inbegrepen-lijst {
    columns: 1;
  }
}

.pricing-benefit-text:before {
  color: #9249ae;
  font-weight: 700;
  content: "\2713";
  position: absolute;
  top: 11px;
  left: 0;
}

.pricing-benefit-text {
  color: #5b6172;
  border-top: 1px solid #eef2f7;
  margin-bottom: 0;
  padding: 11px 0 11px 26px;
  font-family: Lato, sans-serif;
  position: relative;
  font-size: 14px;
  font-weight: 300;
}

.pricing-benefit-text.last {
  margin-bottom: 0;
}

.button-dark {
  color: #fff;
  background-color: #363176;
  border: 1px solid #363176;
  border-radius: 12px;
  padding: 15px 40px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 400;
  transition: all .2s;
}

.button-dark:hover {
  background-color: #18135b;
}

.pricing-title-box-inner {
  z-index: 2;
  position: relative;
}

.pricing-gradient-1 {
  z-index: 1;
  opacity: .22;
  background-image: linear-gradient(#e7a7ff, #7e0ca7);
  position: absolute;
  inset: 0%;
}

.pricing-gradient-2 {
  z-index: 1;
  opacity: .44;
  background-image: linear-gradient(#bbfeea, #45ddc3);
  position: absolute;
  inset: 0%;
}

.pricing-gradient-3 {
  z-index: 1;
  opacity: .51;
  background-image: linear-gradient(#ffedd8, #ffc787 100%, #ffc685);
  position: absolute;
  inset: 0%;
}

.month {
  color: #6c7280;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
}

.section-reviews {
  padding-top: 100px;
  padding-bottom: 100px;
  display: block;
}

.review-box {
  margin-top: 80px;
}

.r-slider {
  background-color: #0000;
  height: auto;
}

.r-slider-left-arrow {
  background-image: url('../images/arrow-2.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border: 1px solid #e7e6e6;
  border-radius: 70px;
  width: 50px;
  height: 50px;
  transition: all .2s;
  inset: 33% 0% auto auto;
}

.r-slider-left-arrow:hover {
  background-color: #f7fafd;
}

.r-slider-right-arrow {
  background-image: url('../images/arrow-1.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border: 1px solid #e7e6e6;
  border-radius: 70px;
  width: 50px;
  height: 50px;
  transition: all .2s;
  inset: auto 0% 33% auto;
}

.r-slider-right-arrow:hover {
  background-color: #f7fafd;
}

.slider-arrow-icon, .r-slide-nav {
  display: none;
}

.r-slider-mask {
  width: 95%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.r-slide {
  width: 31%;
  margin-right: 27px;
}

.review-item {
  border: 1px solid #e7e6e6;
  border-radius: 20px;
  margin-top: 20px;
  padding: 30px;
  transition: all .3s;
}

.review-item:hover {
  box-shadow: 11px 11px 41px #bddff638;
}

.review-item.mobile {
  display: none;
}

.review-author-box {
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.author-img-box {
  width: 60px;
  height: 60px;
}

.author-name-box {
  flex: 1;
  padding-left: 30px;
}

.author-name {
  color: #292d37;
  margin-bottom: 5px;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.author-designation {
  color: #a3a8b5;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

/* Het contactblok is gecentreerd, maar hx-actions is een flexrij en trekt zich
   niets aan van text-align. Zonder deze regel plakken de knoppen links. */
.section-form .hx-actions {
  justify-content: center;
}

.section-form {
  background-color: #fafcfd;
  padding-top: 100px;
  padding-bottom: 100px;
}

.form-inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.form-box {
  width: 40%;
}

.form-img-box {
  width: 50%;
}

.input {
  border: 1px solid #e7e6e6;
  border-radius: 10px;
  min-height: 50px;
  margin-bottom: 0;
}

.form-row {
  margin-bottom: 20px;
}

.form-row.margin-top {
  margin-top: 40px;
  margin-bottom: 0;
}

.button-green {
  color: #fff;
  background-color: #3fcab2;
  border: 1px solid #3fcab2;
  border-radius: 12px;
  padding: 15px 60px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 400;
  transition: all .2s;
}

.button-green:hover {
  background-color: #29ab95;
  border-color: #29ab95;
}

/* Linkblok in de voettekst. Staat op elke pagina en zorgt ervoor dat elke
   pagina van de site vanuit de tekst bereikbaar is, niet alleen via het menu. */
.footer-sitemap {
  flex-wrap: wrap;
  gap: 40px 80px;
  margin-bottom: 60px;
  padding-bottom: 50px;
  display: flex;
  border-bottom: 1px solid #ffffff2e;
}

.footer-sitemap-title {
  color: #ffffffa6;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: Lato, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.footer-sitemap-link {
  color: #fff;
  margin-bottom: 12px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  display: block;
}

.footer-sitemap-link:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .footer-sitemap {
    gap: 30px 40px;
    margin-bottom: 40px;
    padding-bottom: 34px;
  }
}

/* Verwijzingen naar de app in de winkels, onder het logo in de voettekst. */
.footer-apps {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  display: flex;
}

.footer-app {
  color: #fff;
  border: 1px solid #ffffff59;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
}

.footer-app svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  flex: none;
}

.footer-app:hover {
  border-color: #fff;
}

.section-footer {
  background-color: #9250aa;
  padding-top: 80px;
  padding-bottom: 60px;
}

.footer-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footer-rightside {
  justify-content: space-between;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.footer-link-wrapper {
  width: 100%;
  display: flex;
}

.footer-social-box {
  opacity: .76;
  width: 21%;
}

.footer-link-box {
  opacity: 1;
  width: 100%;
}

.footer-link {
  opacity: 1;
  color: #fff;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  display: block;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-link.last {
  margin-bottom: 0;
}

.footer-social-row {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.social-link {
  background-color: #0000;
  width: 30px;
  height: 30px;
}

.social-link.linkedin {
  background-image: url('../images/linkedin.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  display: block;
}

.social-link.fb {
  -webkit-text-fill-color: inherit;
  background-image: url('../images/phone.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  background-clip: border-box;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

.social-link.insta {
  background-image: url('../images/instagram.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.footer-appstore {
  margin-top: 40px;
}

.image {
  margin-left: 10px;
}

.image-2 {
  opacity: 0;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.text-block {
  color: #fff;
  padding-top: 10px;
}

.success-message {
  background-color: #0000;
  background-image: linear-gradient(#ffedd8, #ffedd8);
  border-radius: 8px;
  line-height: 80px;
}

.text-block-2 {
  font-family: Lato, sans-serif;
  font-weight: 300;
}

.error-message {
  border-radius: 8px;
  font-family: Lato, sans-serif;
  font-weight: 300;
}

.text-block-3 {
  text-align: center;
  height: auto;
  line-height: 30px;
}

.section-video {
  background-color: #f7fafd99;
  padding-top: 150px;
  padding-bottom: 150px;
}

.youtube {
  max-height: none;
}

.text-bold, .bold-text {
  color: #1e194ecc;
}

.section-features {
  padding-top: 60px;
  padding-bottom: 40px;
}

.features-title-box {
  text-align: center;
  margin-bottom: 60px;
}

.features-box {
  flex-wrap: wrap;
  place-content: flex-start space-between;
  display: flex;
}

.features-item {
  width: 47%;
  margin-bottom: 50px;
}

.features-item-icon-box {
  height: 85px;
  margin-bottom: 30px;
}

.features-item-title {
  color: #292d37;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.features-item-content {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
}

.section-mobile {
  padding-top: 40px;
  padding-bottom: 50px;
  overflow: hidden;
}

.mobile-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mobile-leftbox {
  width: 42%;
}

.mobile-rightbox {
  text-align: right;
  width: 55%;
}

.lp-navbar {
  background-color: #0000;
  padding-top: 30px;
}

.lp-navmenu {
  padding-top: 5px;
  padding-bottom: 5px;
}

.lp-navlink {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.lp-navlink.w--current {
  color: #9249ae;
}

.dd-lang {
  border: 1px solid #ddedff;
  border-radius: 12px;
  margin-top: 14px;
}

.dd-lang-toggle {
  color: #292d37;
  align-items: center;
  padding: 6px 25px 6px 6px;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
}

.dd-lang-list {
  background-color: #fff;
  border: 1px solid #ddedff;
  border-radius: 12px;
}

.dd-land-icon {
  color: #323232;
  margin-right: 10px;
  font-size: 10px;
}

.dd-lang-flag {
  width: 20px;
  height: 15px;
  margin-right: 10px;
}

.dd-lang-flag.hidden {
  display: none;
  overflow: visible;
}

.dd-land-row {
  text-align: left;
  align-items: center;
  padding: 5px;
  display: flex;
}

.dd-lang-link {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.section-lp-hero {
  background-image: url('../images/lp-hero-desktop.jpg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 768px;
  padding-top: 100px;
}

.lp-hero-box {
  z-index: 10;
  width: 57%;
  position: relative;
}

.section-co2 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.co2-box-1 {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 100px;
  display: flex;
}

.co2-content-box {
  width: 45%;
}

.co2-img-box {
  width: 35%;
}

.co2-img {
  width: 100%;
}

.co2-box-2 {
  justify-content: space-between;
  display: flex;
}

.co2-box-item {
  background-color: #f7fafd;
  border: 1px solid #ddedff;
  border-radius: 20px;
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  width: 22%;
  padding: 30px;
  display: flex;
}

.co2-box-item.first-col {
  background-color: #eaf4ff;
  border-color: #ddedff;
  width: 30%;
  display: block;
}

.co2-item-title {
  color: #1e194e;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
}

.co2-item-point-text {
  color: #292d37;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.co2-item-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.section-textblock {
  padding-top: 100px;
  padding-bottom: 100px;
}

.textblock-wrapper {
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.section-onze {
  padding-top: 60px;
  padding-bottom: 100px;
}

.onze-title-box {
  text-align: center;
  margin-bottom: 60px;
}

.onze-box {
  justify-content: space-between;
  display: flex;
}

.onze-item-inner {
  z-index: 2;
  text-align: center;
  background-color: #f7fafd;
  border: 1px solid #ddedff;
  border-radius: 20px;
  min-height: 510px;
  padding: 60px 40px;
  position: relative;
}

.onze-item-img-box {
  justify-content: center;
  align-items: center;
  height: 120px;
  margin-bottom: 40px;
  display: flex;
}

.onze-item-title {
  color: #292d37;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.onze-item {
  width: 32%;
  position: relative;
}

.onze-item-bottom {
  background-color: #eaf4ff;
  border-radius: 0 0 20px 20px;
  width: 70%;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}

.section-box {
  padding-top: 60px;
  padding-bottom: 100px;
}

.box-wrapper {
  justify-content: space-between;
  display: flex;
}

.box-item-inner {
  z-index: 2;
  background-color: #fff;
  border: 1px solid #ddedff;
  border-radius: 20px;
  min-height: 560px;
  padding: 60px 40px;
  position: relative;
}

.box-item {
  width: 49%;
}

.box-bottom-shadow {
  z-index: 1;
  filter: blur(40px);
  background-color: #ddedff;
  border-radius: 50px;
  width: 75%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -20px;
}

.bold-text-2 {
  text-align: left;
}

.footer-text {
  opacity: 1;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  display: block;
}

.footer-text:hover {
  text-decoration: underline;
}

.footer-text.last {
  margin-bottom: 0;
}

.flooter-text {
  color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 15px;
}

/* Staat op de plek van het oude adres onder het footerlogo. */
.footer-mail {
  color: #fff;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  text-decoration: none;
  transition: opacity .2s;
  display: inline-flex;
}

.footer-mail svg {
  fill: currentColor;
  flex: none;
  width: 18px;
  height: 18px;
  opacity: .75;
}

.footer-mail:hover {
  color: #fff;
  opacity: .75;
}

/* Op desktop staan de winkelknoppen naast de mail. Even hoog als een .footer-app
   (8px padding plus 1px rand), zodat de mail op dezelfde middenlijn staat. */
@media screen and (min-width: 992px) {
  .footer-wrapper {
    column-gap: 24px;
  }

  .footer-logo-box {
    align-items: flex-start;
    column-gap: 4px;
    display: flex;
  }

  .footer-logo-box img {
    flex: none;
  }

  .footer-mail {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

.footer-link-box-small {
  width: auto;
}

.button {
  text-align: left;
  background-color: #9256a6;
  border-radius: 4px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 30px;
  font-family: Lato, sans-serif;
}

@media screen and (min-width: 1280px) {
  .navlink {
    font-weight: 700;
  }

  .navlink.w--current {
    color: #9249ae;
    font-weight: 700;
  }

  .lp-navlink {
    font-weight: 700;
  }

  .lp-navlink.w--current {
    color: #9249ae;
    font-weight: 700;
  }
}

@media screen and (min-width: 1440px) {
  .navlink {
    font-weight: 700;
  }

  .navlink.w--current {
    color: #9249ae;
  }

  .heading-h2 {
    margin-top: 40px;
  }

  .paragraph.left-align {
    margin-top: 20px;
  }

  .lp-navlink {
    font-weight: 700;
  }

  .lp-navlink.w--current {
    color: #9249ae;
  }
}

@media screen and (min-width: 1920px) {
  .brand-logo {
    margin-bottom: 10px;
    padding-bottom: 0;
  }

  .navlink.w--current {
    color: #9249ae;
  }

  .heading-h2 {
    margin-top: 40px;
  }

  .footer-social-row {
    display: none;
  }

  .social-link.linkedin {
    object-fit: fill;
    background-image: url('../images/linkedin.svg');
    background-repeat: no-repeat;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
  }

  .lp-navlink.w--current {
    color: #9249ae;
  }
}

@media screen and (max-width: 991px) {
  .section-hero {
    background-position: 50% 100%;
    min-height: auto;
  }

  .navlink {
    font-size: 18px;
  }

  .navmenu {
    background-color: #fff;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 12px 12px 41px #bddff638;
  }

  .menu-btn {
    background-image: url('../images/menu.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    width: 60px;
    height: 60px;
  }

  .menu-btn.w--open {
    background-color: #0000;
    background-image: url('../images/close.svg');
  }

  .hero-box {
    flex-wrap: wrap;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content-box {
    width: 100%;
  }

  .hero-img-box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .section-why {
    padding-bottom: 100px;
  }

  .why-wrapper {
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .why-img-box {
    width: 100%;
  }

  .why-content-box {
    text-align: center;
    width: 100%;
    padding-top: 0;
  }

  .paragraph {
    text-align: left;
  }

  .paragraph.center {
    text-align: center;
  }

  .why-list-item {
    text-align: left;
  }

  .solution-wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .break {
    display: inline-block;
  }

  /* .solution-box is een grid, geen flexbox. De oude flex-wrap deed hier dus
     niets en de drie kolommen bleven op mobiel naast elkaar staan. */
  .solution-box {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .solution-item {
    width: 100%;
  }

  .solution-item-img-box {
    justify-content: center;
    align-items: center;
    height: auto;
  }

  .prices-wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-box {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .pricing-item {
    width: 100%;
    margin-bottom: 50px;
  }

  .reviews-wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .r-slider-left-arrow {
    margin-left: -70px;
    inset: auto auto -50px 50%;
  }

  .r-slider-right-arrow {
    margin-right: -70px;
    inset: auto 50% -50px auto;
  }

  .r-slider-mask {
    width: 100%;
  }

  .r-slide {
    width: 100%;
    margin-right: 0;
  }

  .review-item.mobile {
    margin-top: 20px;
    display: block;
  }

  .form-inner {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .form-box {
    text-align: center;
    width: 100%;
  }

  .form-img-box {
    width: 100%;
  }

  .form-wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-wrapper {
    flex-wrap: wrap;
    align-content: flex-start;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-logo-box {
    width: 100%;
    margin-bottom: 50px;
  }

  .footer-rightside {
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
  }

  .footer-link-wrapper {
    width: 100%;
    margin-bottom: 50px;
  }

  .footer-social-box {
    justify-content: space-between;
    width: 100%;
    display: flex;
  }

  .footer-appstore {
    margin-top: 0;
  }

  .menu-icon {
    opacity: 0;
  }

  .features-item {
    width: 45%;
  }

  .mobile-wrapper {
    flex-wrap: wrap;
  }

  .mobile-leftbox {
    width: 100%;
    margin-bottom: 60px;
  }

  .mobile-rightbox {
    width: 100%;
  }

  .lp-navmenu {
    text-align: left;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    box-shadow: 12px 12px 41px #bddff638;
  }

  .lp-menu-btn {
    background-image: url('../images/menu.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    width: 60px;
    height: 60px;
  }

  .lp-menu-btn.w--open {
    background-color: #0000;
    background-image: url('../images/close.svg');
  }

  .lp-navlink {
    padding-left: 0;
    padding-right: 0;
    font-size: 18px;
  }

  .section-lp-hero {
    background-color: #f9fdff;
  }

  .lp-hero-box {
    width: 100%;
  }

  .section-co2 {
    padding-bottom: 40px;
  }

  .co2-box-1 {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .co2-content-box {
    width: 100%;
    margin-bottom: 60px;
  }

  .co2-img-box {
    width: 100%;
  }

  .co2-box-2 {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .co2-box-item {
    width: 100%;
    margin-bottom: 20px;
  }

  .co2-box-item.first-col {
    text-align: center;
    width: 100%;
  }

  .section-textblock {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .textblock-wrapper {
    width: 100%;
  }

  .section-onze {
    padding-bottom: 40px;
  }

  .onze-box {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .onze-item {
    width: 100%;
    margin-bottom: 20px;
  }

  .onze-item-bottom {
    height: 20px;
  }

  .section-box {
    padding-bottom: 20px;
  }

  .box-wrapper {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .box-item-inner {
    border-width: 0;
    min-height: auto;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .box-item {
    width: 100%;
  }

  .box-bottom-shadow {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hero-box {
    width: 100%;
  }

  .app-store-box {
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 30px;
  }

  .app-store-textbox {
    flex: 0 auto;
    width: 100%;
    margin-top: 20px;
    padding-left: 0;
  }

  .why-wrapper, .solution-wrapper, .prices-wrapper, .reviews-wrapper, .form-wrapper, .footer-wrapper {
    width: 100%;
  }

  .footer-social-row {
    width: 30%;
  }

  .features-item {
    width: 100%;
  }

  .section-lp-hero {
    background-image: url('../images/lp-hero-mobile.jpg');
    background-position: 50% 100%;
    background-size: cover;
    padding-top: 40px;
  }
}

@media screen and (max-width: 479px) {
  .section-hero {
    background-position: 50% 100%;
  }

  .navbar {
    display: block;
  }

  .container-full {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: block;
    overflow: visible;
  }

  .navmenu {
    display: none;
  }

  .hero-wrapper {
    padding-top: 20px;
  }

  .hero-content-box {
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .hero-img-box {
    width: 100%;
    margin-bottom: 50px;
  }

  .hero-lottie-1 {
    z-index: 90;
    text-align: center;
    display: flex;
  }

  .hero-lottie-2 {
    display: flex;
  }

  .heading-h1 {
    font-size: 40px;
    line-height: 1.2;
  }

  .hero-subtext {
    font-size: 18px;
  }

  .app-store-text {
    font-size: 14px;
  }

  .section-why {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .heading-h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .paragraph {
    text-align: left;
  }

  .section-solutions {
    padding-top: 80px;
    padding-bottom: 20px;
  }

  .soluton-item-img {
    flex: 0 auto;
    order: 0;
    align-self: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .soluton-item-img._50 {
    flex: 0 auto;
    margin-left: 0;
    margin-right: 0;
  }

  .section-prices {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .pricing-item {
    margin-bottom: 40px;
  }

  .section-reviews {
    padding-top: 80px;
    padding-bottom: 120px;
  }

  .review-box {
    margin-top: 60px;
  }

  .section-form {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .footer-rightside {
    display: block;
  }

  .footer-social-box {
    display: none;
  }

  .section-video {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .features-item-icon {
    text-align: left;
  }

  .lp-hero-box {
    padding-top: 10px;
    padding-bottom: 30px;
  }
}


@font-face {
  font-family: 'Poetsenone';
  src: url('../fonts/PoetsenOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Team faces in contact section */
.team-box {
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  display: flex;
}

.team-member {
  text-align: center;
}

.team-avatar {
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
  box-shadow: 0 0 0 2px #9249ae, 11px 11px 41px #bddff638;
}

.team-name {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 5px;
}

.team-role {
  color: #a3a8b5;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

@media screen and (max-width: 479px) {
  .team-box {
    gap: 30px;
    margin-bottom: 40px;
  }
}

/* Page max width */
html {
  background-color: #eef2f6;
}

body {
  background-color: #fff;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 40px #1e194e14;
}

/* Kenniscentrum */
.section-kc-hero {
  background-color: #f9fdff;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 70px;
}

.kc-hero-sub {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-kc {
  padding-top: 60px;
  padding-bottom: 40px;
}

.section-kc.last {
  padding-bottom: 100px;
}

/* Losse link onder een blok met kaarten, gecentreerd. */
.kc-more {
  text-align: center;
  margin-top: 20px;
}

.kc-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
  display: flex;
}

.kc-card {
  background-color: #fff;
  border: 1px solid #e7e6e6;
  border-radius: 20px;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: 360px;
  min-width: 280px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  overflow: hidden;
}

.kc-card:hover {
  box-shadow: 11px 11px 41px #bddff638;
}

.kc-card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

.kc-card-body {
  flex-direction: column;
  flex: 1;
  padding: 25px 30px 30px;
  display: flex;
}

.kc-card-label {
  color: #9249ae;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.kc-card-title {
  color: #292d37;
  margin-bottom: 10px;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.kc-card-text {
  color: #292d37;
  flex: 1;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

.kc-card-cta {
  color: #9249ae;
  margin-top: 15px;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* Artikelpagina */
.section-article {
  padding-top: 40px;
  padding-bottom: 100px;
}

.article-wrapper {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.article-label {
  color: #9249ae;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 15px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.article-title {
  color: #1e194ecc;
  margin-top: 0;
  margin-bottom: 15px;
  font-family: Poetsenone, sans-serif;
  font-size: 44px;
  line-height: 1.15;
}

.article-date {
  color: #a3a8b5;
  margin-bottom: 30px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.article-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  width: 100%;
  margin-bottom: 40px;
  display: block;
}

.article-h3 {
  color: #292d37;
  margin-top: 40px;
  margin-bottom: 15px;
  font-family: Lato, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.article-list {
  color: #292d37;
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 25px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.article-quote {
  color: #292d37;
  border-left: 3px solid #9249ae;
  margin: 30px 0;
  padding-left: 25px;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

.article-next-label {
  color: #a3a8b5;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 70px;
  margin-bottom: 15px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.article-next {
  background-color: #fff;
  border: 1px solid #e7e6e6;
  border-radius: 20px;
  align-items: stretch;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  overflow: hidden;
}

.article-next:hover {
  box-shadow: 11px 11px 41px #bddff638;
}

.article-next-img {
  object-fit: cover;
  width: 240px;
  flex-shrink: 0;
}

.article-next-body {
  flex-direction: column;
  justify-content: center;
  padding: 25px 30px;
  display: flex;
}

@media screen and (max-width: 767px) {
  .article-title {
    font-size: 34px;
  }

  .article-next {
    flex-direction: column;
  }

  .article-next-img {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

/* Reserveringstypes in "Wat je ermee kunt" */
.reserve-box {
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 80px;
  display: flex;
}

/* Elke kaart is een link naar de bijbehorende pagina, vandaar de kleur- en
   onderstrepingsreset en de hover uit .hx-pcard. */
.reserve-item {
  color: inherit;
  background-color: #f7fafd;
  border: 1px solid #ddedff;
  border-radius: 20px;
  flex: 1 1 0;
  min-width: 190px;
  text-align: center;
  padding: 30px 18px;
  text-decoration: none;
  transition: all .25s;
  flex-direction: column;
  display: flex;
}

.reserve-item:hover {
  border-color: #b9d7fb;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px #1e194e14;
}

/* De kaarten zijn links, maar dat zag je niet. Een klein pijltje onderin maakt
   dat duidelijk zonder dat er acht keer "lees meer" onder komt te staan. */
.reserve-item:after {
  content: "\2192";
  color: #5963c2;
  opacity: .45;
  margin-top: auto;
  padding-top: 14px;
  font-size: 18px;
  line-height: 1;
  transition: opacity .25s, transform .25s;
  display: block;
  transform: translateX(0);
}

.reserve-item:hover:after {
  opacity: 1;
  transform: translateX(4px);
}

/* Afgeronde vlakjes met een icoon, zelfde idee als de kaartjes in de hero. */
.reserve-item-icon {
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: flex;
}

.reserve-item-icon svg, .features-item-icon-box svg {
  fill: currentColor;
  width: 26px;
  height: 26px;
  display: block;
}

.reserve-item-title {
  color: #292d37;
  justify-content: center;
  align-items: flex-start;
  min-height: 48px;
  margin-bottom: 10px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  display: flex;
}

.reserve-item-text {
  color: #292d37;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

@media screen and (max-width: 991px) {
  .reserve-item {
    flex-basis: 30%;
  }
}

@media screen and (max-width: 767px) {
  .reserve-item {
    flex-basis: 45%;
  }
}

@media screen and (max-width: 479px) {
  .reserve-item {
    flex-basis: 100%;
    min-width: 100%;
  }

  .reserve-item-title {
    min-height: 0;
  }
}

/* Klantlogo's onder de reviews */
.clients-title {
  color: #292d37;
  text-align: center;
  margin-top: 70px;
  margin-bottom: 35px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
}

.clients-box {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px 70px;
  display: flex;
}

/* De hoogte staat vast, dus de breedte moet meebewegen. Zonder width auto
   zou het breedte-attribuut in de HTML het logo platdrukken. */
.client-logo {
  width: auto;
  height: 34px;
}

@media screen and (max-width: 479px) {
  .clients-box {
    gap: 25px 40px;
  }

  .client-logo {
    height: 26px;
  }
}

/* Grotere feature-tegels (rij van 3) */
.features-box.large {
  margin-top: 20px;
}

.features-box.large .features-item-icon-box {
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  font-family: Lato, sans-serif;
  font-size: 24px;
  font-weight: 700;
  display: flex;
}

/* Reviews: op desktop staan alle slides naast elkaar, pijlen alleen op mobiel tonen */
@media screen and (min-width: 992px) {
  .r-slider-left-arrow, .r-slider-right-arrow {
    display: none;
  }
}

/* Hero (2026) */
.hx-hero {
  background-color: #fff;
  min-height: 0;
  padding-top: 30px;
  padding-bottom: 56px;
}

.hx-grid {
  grid-column-gap: 56px;
  grid-row-gap: 50px;
  grid-template-columns: minmax(0, 520px) 1fr;
  align-items: center;
  display: grid;
}

.hx-copy, .hx-visual {
  min-width: 0;
}

.hx-title, .hx-sub, .hx-eyebrow {
  overflow-wrap: break-word;
}

.hx-eyebrow {
  color: #7e0ca7;
  background-color: #f3ecf9;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 6px 14px;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
}

.hx-dot {
  background-color: #9249ae;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.hx-title {
  color: #1e194e;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Poetsenone, sans-serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
}

.hx-accent {
  color: #9249ae;
}

.hx-sub {
  color: #292d37;
  max-width: 520px;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: Lato, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.hx-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.hx-actions .button, .hx-actions .button-border, .hx-solution .button-border, .kc-more .button-border {
  margin: 20px 0 0;
}

.hx-actions .button-border, .hx-solution .button-border, .kc-more .button-border {
  color: #292d37;
  border-color: #9256a6;
  border-radius: 4px;
  padding: 9px 29px;
  font-size: inherit;
  line-height: inherit;
}






.hx-chips {
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.hx-chips li {
  color: #4b5162;
  background-color: #fff;
  border: 1px solid #e6ecf0;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: Lato, sans-serif;
  font-size: 14px;
}

.hx-chips li:before {
  color: #9249ae;
  margin-right: 8px;
  font-weight: 700;
  content: "\2713";
}

/* Geen scheidingslijn: die gebruiken we nergens anders op de site. */
.hx-proof {
  margin-top: 34px;
  padding-top: 0;
  padding-bottom: 10px;
}

.hx-proof-label {
  color: #a3a8b5;
  margin-bottom: 0;
  font-family: Lato, sans-serif;
  font-size: 14px;
}

.hx-proof-logos {
  flex-wrap: wrap;
  align-items: center;
  gap: 34px;
  margin-top: 16px;
  display: flex;
}

/* brightness(0) maakt elk logo één egale tint, ongeacht de merkkleur. Alleen
   grijstinten laat een licht logo (de gouden bogen) bijna verdwijnen naast een
   donker logo. De alpha blijft behouden, dus de vorm blijft intact. */
.hx-proof-logos img {
  filter: grayscale(1) brightness(0);
  opacity: .42;
  width: auto;
  max-height: 26px;
}

/* Een gestapeld logo verliest zijn tekst op 26px. Iets meer hoogte, waarmee de
   optische grootte juist gelijk wordt aan die van de liggende logo's ernaast. */
.hx-proof-logos img.hx-proof-logo-tall {
  max-height: 34px;
}

.hx-visual {
  position: relative;
}

.hx-visual-img {
  object-fit: cover;
  object-position: 52% 62%;
  border-radius: 20px;
  width: 100%;
  height: 560px;
  display: block;
}

.hx-card {
  background-color: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
  position: absolute;
  box-shadow: 0 12px 30px #1e194e1f;
}

.hx-card-1 {
  top: 34px;
  left: -26px;
}

.hx-card-2 {
  top: -20px;
  right: 34px;
}

.hx-card-3 {
  bottom: 38px;
  right: -22px;
}

.hx-card-4 {
  bottom: 130px;
  left: -34px;
}

/* Vijfde kaartje (bezoeker ingecheckt, homepage): rechts halverwege, tussen hx-card-2 en hx-card-3. */
.hx-card-5 {
  top: 220px;
  right: -22px;
}

/* Tussen 992 en 1279px is de marge van de pagina maar 20px; 22px uitsteken gaf daar 2px horizontale scroll. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .hx-card-3, .hx-card-5 {
    right: -16px;
  }
}

/* Lunch is een optie op een reservering, geen soort plek; vandaar het merkpaars. */
.hx-icon-lunch {
  color: #9249ae;
  background-color: #f3ecf9;
}

.hx-card-icon {
  border-radius: 11px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-family: Lato, sans-serif;
  font-size: 19px;
  font-weight: 700;
  display: flex;
}

.hx-icon-brand {
  color: #9249ae;
  background-color: #f3ecf9;
}

/* Werkplek en parkeren: de tinten die de app per soort plek gebruikt
   (lib/themes/colors.dart, badgeDesk en badgeCar). */
.hx-icon-desk {
  color: #118c7c;
  background-color: #d8f4ef;
}

.hx-icon-car {
  color: #5963c2;
  background-color: #caddfd;
}

.hx-icon-meeting {
  color: #f7b35c;
  background-color: #ffe8bb;
}

/* Hetzelfde geel als vergaderen, voor een icoon dat niet over vergaderen gaat
   (de trendtegel op bezettingsgraad-kantoor, de lunchtegel op bezoekers-aanmelden). */
.hx-icon-yellow {
  color: #f7b35c;
  background-color: #ffe8bb;
}

/* Hetzelfde blauw als parkeren en hetzelfde groen als werkplekken, voor iconen die
   daar niet over gaan (de receptietegels op bezoekers-aanmelden). */
.hx-icon-blue {
  color: #5963c2;
  background-color: #caddfd;
}

/* Hetzelfde paars als bezoek, voor een icoon dat niet over bezoek gaat. */
.hx-icon-purple {
  color: #9451ad;
  background-color: #eadff5;
}

.hx-icon-teal {
  color: #118c7c;
  background-color: #d8f4ef;
}

/* Het roze vlak was voller dan de vier andere tinten; dit is bicyclePinkLite
   (#fad1f5) met wat wit erdoor, zodat het even licht oogt als de rest. */
.hx-icon-bicycle {
  color: #d96ccb;
  background-color: #fce3f9;
}

.hx-icon-visitor {
  color: #9451ad;
  background-color: #eadff5;
}

.hx-card-icon svg {
  fill: currentColor;
  width: 21px;
  height: 21px;
  display: block;
}

.hx-icon-charge {
  color: #d08320;
  background-color: #ffedd8;
}

.hx-card-text strong {
  color: #1e194e;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  display: block;
}

.hx-card-text span {
  color: #6c7280;
  margin-top: 2px;
  font-family: Lato, sans-serif;
  font-size: 12.5px;
  display: block;
}

@media screen and (max-width: 991px) {
  .hx-grid {
    grid-row-gap: 50px;
    grid-template-columns: 1fr;
  }

  .hx-title {
    font-size: 46px;
  }

  .hx-sub {
    max-width: none;
  }

  .hx-visual-img {
    height: 420px;
  }

  .hx-card-1 {
    left: 0;
  }

  .hx-card-3 {
    right: 0;
  }

  .hx-card-5 {
    right: 0;
  }
}

@media screen and (max-width: 767px) {
  .hx-hero {
    padding-bottom: 60px;
  }

  .hx-title {
    font-size: 38px;
  }

  .hx-sub {
    font-size: 17px;
  }

  .hx-visual-img {
    height: 320px;
  }

  .hx-card-2, .hx-card-4, .hx-card-5 {
    display: none;
  }

  .hx-card {
    padding: 11px 14px;
  }

  .hx-card-1 {
    top: 10px;
    left: 10px;
  }

  .hx-card-3 {
    bottom: 10px;
    right: 10px;
  }

  .hx-proof-logos {
    gap: 24px;
  }
}

@media screen and (max-width: 479px) {
  .hx-title {
    font-size: 32px;
  }

  .hx-eyebrow {
    font-size: 14px;
  }

  .hx-visual-img {
    height: 260px;
  }

  .hx-card-text span {
    display: none;
  }

  .hx-proof-logos img {
    max-height: 20px;
  }
}

/* Probleemsectie (2026) */
/* Chips onder een sectiekop, uitgelijnd met de tekst erboven. */
.hx-problem .hx-chips {
  margin-top: 30px;
}

.hx-problem {
  background-color: #fbfcfe;
  border-top: 1px solid #eef2f7;
  padding-top: 100px;
  padding-bottom: 100px;
}

.hx-head {
  max-width: 760px;
  margin-bottom: 60px;
}

.hx-h2 {
  color: #1e194e;
  margin-top: 0;
  margin-bottom: 22px;
  font-family: Poetsenone, sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.12;
}

.hx-lead {
  color: #292d37;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
}

/* Twee lead-alinea's onder elkaar, zelfde idee als bij .hx-pcard-text. */
.hx-lead + .hx-lead {
  margin-top: 16px;
}

.hx-cards {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.hx-pcard {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  padding: 34px 30px;
  transition: all .25s;
}

.hx-pcard:hover {
  border-color: #e0d3ea;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px #1e194e14;
}

.hx-pcard-num {
  color: #9249ae;
  background-color: #f3ecf9;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.hx-pcard-title {
  color: #1e194e;
  margin: 0 0 12px;
  font-family: Lato, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

/* Twee alinea's onder elkaar in een kaart hebben ruimte nodig, anders plakken
   ze aan elkaar. */
.hx-pcard-text + .hx-pcard-text {
  margin-top: 14px;
}

.hx-pcard-text {
  color: #5b6172;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
}

.hx-solution {
  background-color: #9256a6;
  border-radius: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  margin-top: 40px;
  padding: 38px 40px;
  display: flex;
}

.hx-solution-text {
  color: #fff;
  flex: 1 1 480px;
  min-width: 0;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 19px;
  line-height: 1.6;
}

.hx-solution .button-border {
  flex: none;
}

@media screen and (max-width: 991px) {
  .hx-problem {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .hx-h2 {
    font-size: 36px;
  }

  .hx-cards {
    grid-template-columns: 1fr;
  }

  .hx-head {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 767px) {
  .hx-h2 {
    font-size: 30px;
  }

  .hx-lead, .hx-solution-text {
    font-size: 17px;
  }

  .hx-pcard {
    padding: 28px 24px;
  }

  .hx-solution {
    padding: 30px 24px;
  }
}

/* Kaartvarianten */
.hx-subhead {
  color: #1e194e;
  margin-bottom: 30px;
  font-family: Lato, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

/* Niet gebonden aan .section-box: twee kaarten horen ook in een hx-problem
   sectie de volle breedte te delen, anders vullen ze 2 van 3 kolommen. */
.hx-cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.hx-pcard-title-lg {
  font-family: Poetsenone, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
}

.hx-cards-2 .hx-pcard-title-lg {
  margin-bottom: 18px;
}

@media screen and (max-width: 991px) {
  .hx-cards-2 {
    grid-template-columns: 1fr;
  }

  .hx-pcard-title-lg {
    font-size: 24px;
  }
}

/* Header (2026) */
.navbar, .lp-navbar {
  padding-top: 16px;
  padding-bottom: 16px;
}

.hx-navbar {
  align-items: center;
  gap: 26px;
  display: flex;
}

.hx-navbar:before, .hx-navbar:after {
  display: none;
}

.hx-brand {
  background-image: none;
  flex: none;
  align-items: center;
  gap: 11px;
  width: auto;
  height: auto;
  display: flex;
}

.hx-brand-mark, .hx-brand-word {
  flex: none;
}

.hx-navbar .navlink, .hx-navbar .lp-navlink {
  white-space: nowrap;
  padding: 8px 0;
}

.hx-brand-mark {
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: block;
}

.hx-brand-word {
  color: #772996;
  white-space: nowrap;
  font-family: Poetsenone, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  display: block;
  position: relative;
  top: -2px;
}

.hx-navbar .navmenu, .hx-navbar .lp-navmenu {
  align-items: center;
  gap: 26px;
  display: flex;
}

.hx-nav-cta {
  flex: none;
  margin: 0 0 0 auto;
}

/* Sitemenu naast Contact. De balk toont alleen Werkplekken, Parkeren,
   Bezoekers en Contact; de rest van de site zit achter deze knop.
   Het paneel hangt aan de rechterrand van de container, niet aan de knop,
   zodat het bij elke breedte binnen de pagina blijft. */
.hx-navbar {
  position: relative;
}

.hx-menu-toggle {
  cursor: pointer;
  background-color: #0000;
  border: 0;
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  margin-left: -12px;
  padding: 0;
  transition: background-color .2s;
  display: flex;
}

.hx-menu-toggle:hover, .hx-menu-open .hx-menu-toggle {
  background-color: #eef0f5;
}

/* Drie streepjes uit één element: de balk zelf plus twee schaduwen. */
.hx-menu-bars, .hx-menu-bars:before, .hx-menu-bars:after {
  background-color: #1e194e;
  border-radius: 2px;
  width: 18px;
  height: 2px;
  display: block;
}

.hx-menu-bars {
  position: relative;
}

.hx-menu-bars:before, .hx-menu-bars:after {
  content: "";
  position: absolute;
  left: 0;
}

.hx-menu-bars:before {
  top: -6px;
}

.hx-menu-bars:after {
  top: 6px;
}

.hx-menu-panel {
  z-index: 60;
  background-color: #fff;
  border-radius: 16px;
  grid-column-gap: 40px;
  grid-template-columns: auto auto auto;
  padding: 24px 28px;
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  box-shadow: 0 12px 30px #1e194e1f;
}

.hx-menu-open .hx-menu-panel {
  display: grid;
}

.hx-menu-title {
  color: #6c7280;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: Lato, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.hx-menu-link {
  color: #292d37;
  white-space: nowrap;
  padding: 6px 0;
  font-family: Lato, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s;
  display: block;
}

.hx-menu-link:hover, .hx-menu-link.is-current {
  color: #9249ae;
}

.hx-menu-link.is-current {
  font-weight: 700;
}

.hx-green .hx-menu-link:hover, .hx-green .hx-menu-link.is-current {
  color: #118c7c;
}

.hx-blue .hx-menu-link:hover, .hx-blue .hx-menu-link.is-current {
  color: #5963c2;
}

/* Onder 991px klapt de hele balk in het Webflow-menu; daar staan alle links
   al in, dus de knop en het paneel zijn daar overbodig. */
.hx-navlink-more {
  display: none;
}

@media screen and (max-width: 991px) {
  .hx-menu-toggle, .hx-menu-panel, .hx-menu-open .hx-menu-panel {
    display: none;
  }

  .hx-navlink-more {
    display: block;
  }
}

.hx-navbar .menu-btn, .hx-navbar .lp-menu-btn {
  margin-left: auto;
}

@media screen and (max-width: 991px) {
  .hx-navbar .navmenu, .hx-navbar .lp-navmenu {
    display: block;
  }

  .hx-nav-cta {
    display: none;
  }

  .hx-brand-mark {
    border-radius: 9px;
    width: 34px;
    height: 34px;
  }

  .hx-brand-word {
    font-size: 19px;
  }
}

/* Klantquote (2026) */
.hx-quote-section {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}

.hx-quote {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  grid-column-gap: 40px;
  grid-row-gap: 24px;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 40px 44px;
  display: grid;
}

.hx-quote-aside {
  min-width: 0;
}

.hx-quote-logo {
  width: auto;
  max-width: 160px;
  max-height: 60px;
  margin-bottom: 16px;
  display: block;
}

.hx-quote-name {
  color: #1e194e;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.hx-quote-role {
  color: #6c7280;
  margin-top: 2px;
  font-family: Lato, sans-serif;
  font-size: 14px;
}

.hx-quote-text {
  color: #1e194e;
  border-left: 3px solid #e9eef5;
  min-width: 0;
  margin: 0;
  padding: 2px 0 2px 26px;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .hx-quote {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .hx-quote-text {
    font-size: 17px;
  }
}

/* Crosslink tussen de twee landingspagina's */
.hx-bridge-section {
  background-color: #fff;
  padding-top: 40px;
  padding-bottom: 60px;
}

.hx-bridge {
  text-align: center;
  background-color: #f6f0fa;
  border-radius: 20px;
  padding: 48px 44px;
}

.hx-bridge-h {
  color: #1e194e;
  margin: 0 0 16px;
  font-family: Poetsenone, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.hx-bridge-p {
  color: #292d37;
  max-width: 740px;
  margin: 0 auto;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.hx-bridge .button-border {
  color: #292d37;
  border-color: #9256a6;
  border-radius: 4px;
  margin-top: 26px;
  padding: 9px 29px;
  font-size: inherit;
  line-height: inherit;
}

/* Op de paarse pagina's is de brug een vol paars vlak met witte tekst, in de
   kleur van de knoppen. Groene en blauwe pagina's houden hun lichte tint, want
   wit op het groen haalt het contrast voor gewone tekst niet. */
body:not(.hx-green):not(.hx-blue) .hx-bridge {
  background-color: #9256a6;
}

body:not(.hx-green):not(.hx-blue) .hx-bridge-h,
body:not(.hx-green):not(.hx-blue) .hx-bridge-p {
  color: #fff;
}

body:not(.hx-green):not(.hx-blue) .hx-bridge .button-border {
  color: #9256a6;
  background-color: #fff;
  border-color: #fff;
}

body:not(.hx-green):not(.hx-blue) .hx-bridge .button-border:hover {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

@media screen and (max-width: 767px) {
  .hx-bridge {
    padding: 34px 24px;
  }

  .hx-bridge-h {
    font-size: 24px;
  }

  .hx-bridge-p {
    font-size: 16px;
  }
}

/* Groene variant (CO2-pagina)
   Tokens uit de app: lib/themes/colors.dart
   greenLitest #d8f4ef, greenLiter #bee9e3, greenLite #a2e0d7, green #16b19c, greenDark #118c7c */
.hx-green .hx-eyebrow {
  color: #118c7c;
  background-color: #d8f4ef;
}

.hx-green .hx-dot {
  background-color: #16b19c;
}

.hx-green .hx-accent {
  color: #118c7c;
}

.hx-green .hx-chips li:before {
  color: #16b19c;
}

.hx-green .hx-pcard-num, .hx-green .hx-icon-brand {
  color: #118c7c;
  background-color: #d8f4ef;
}

.hx-green .hx-pcard:hover {
  border-color: #a2e0d7;
}

.hx-green .hx-actions .button-border, .hx-green .hx-bridge .button-border, .hx-green .kc-more .button-border {
  border-color: #16b19c;
}

.hx-green .button {
  background-color: #16b19c;
}

.hx-green .navlink.w--current, .hx-green .lp-navlink.w--current {
  color: #118c7c;
}

.hx-green .hx-bridge {
  background-color: #d8f4ef;
}

/* Het uitlegvlak vol in de paginakleur met witte tekst. Op groen het donkere groen
   (greenDark), want wit op #16b19c is te weinig contrast. */
.hx-green .hx-solution {
  background-color: #118c7c;
}

.hx-green .hx-visual-img {
  object-position: 50% 100%;
  background-color: #fafcfd;
}

/* Blauwe variant (parkeerpagina)
   Tokens uit de app: lib/themes/colors.dart
   blueLiter2 #e0ebfe, blueLite2 #caddfd, blue2 #5963c2 (badgeCar) */
.hx-blue .hx-eyebrow {
  color: #5963c2;
  background-color: #e0ebfe;
}

.hx-blue .hx-dot {
  background-color: #5963c2;
}

.hx-blue .hx-accent {
  color: #5963c2;
}

.hx-blue .hx-chips li:before {
  color: #5963c2;
}

.hx-blue .hx-pcard-num, .hx-blue .hx-icon-brand {
  color: #5963c2;
  background-color: #e0ebfe;
}

.hx-blue .hx-pcard:hover {
  border-color: #caddfd;
}

.hx-blue .hx-actions .button-border, .hx-blue .hx-bridge .button-border, .hx-blue .kc-more .button-border {
  border-color: #5963c2;
}

.hx-blue .button {
  background-color: #5963c2;
}

.hx-blue .hx-solution {
  background-color: #5963c2;
}

.hx-blue .navlink.w--current, .hx-blue .lp-navlink.w--current {
  color: #5963c2;
}

.hx-blue .hx-bridge {
  background-color: #e0ebfe;
}

/* Het parkeerbord staat links in de illustratie; deze uitsnede houdt het bord
   en de auto binnen het kader dat de andere landingspagina's ook gebruiken. */
.hx-blue .hx-visual-img {
  object-position: 33% 50%;
}

/* Een kop boven een tweekaartsblok in section-box; hx-head staat verder
   alleen in hx-problem, waar de sectie zelf al ruimte eronder heeft. */
.section-box .hx-head {
  margin-bottom: 40px;
}

/* Losse alinea onder de kaarten, zonder knop ernaast. */
.hx-solution-text:only-child {
  flex-basis: 100%;
}

/* Werkplekpagina: dezelfde groene variant als de CO2-pagina, maar met een
   eigen uitsnede. .hx-green zet de hero op de onderrand voor de CO2-illustratie. */
.hx-desk .hx-visual-img {
  object-position: 40% 62%;
  background-color: #fff;
}

/* Kaart met een knop onderaan: de knop zakt naar de onderrand, zodat twee
   kaarten met ongelijke tekstlengte hun knop toch op dezelfde hoogte hebben. */
/* Kort overzicht binnen een kaart, bijvoorbeeld de drie trajecten bij
   begeleiding. Alleen de kern, de uitwerking staat op de eigen pagina. */
.hx-pcard-lijst {
  margin: 14px 0 28px;
  font-family: Lato, sans-serif;
  font-size: 16px;
  color: #6c7280;
}

.hx-pcard-lijst div {
  border-top: 1px solid #eef2f7;
  padding: 10px 0;
}

.hx-pcard-lijst div:last-child {
  border-bottom: 1px solid #eef2f7;
}

/* In een kaart met knop krijgt de tekst 24px marge; boven een lijst is dat
   samen met de marge van de lijst te ruim. */
.hx-pcard-cta .hx-pcard-text:has(+ .hx-pcard-lijst) {
  margin-bottom: 0;
}

/* Het label vooraan een regel, niet een bedrag erin (.hx-price). */
.hx-pcard-lijst span:not(.hx-price) {
  color: #292d37;
  min-width: 132px;
  font-weight: 700;
  display: inline-block;
}

.hx-pcard-cta {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

/* Knop onder de tekst in een brede kaart (klantverhaal-verwijzingen).
   De kleur volgt de paginavariant, net als bij .hx-actions en .hx-bridge. */
.hx-pcard .button-border {
  color: #292d37;
  border-color: #9256a6;
  border-radius: 4px;
  margin-top: 24px;
  padding: 9px 29px;
  font-size: 16px;
  line-height: inherit;
  display: inline-block;
}

/* Na .hx-pcard .button-border, zodat de auto-marge de vaste marge overschrijft.
   De auto-marge lijnt de knoppen van twee kaarten uit, maar valt weg zodra de
   tekst de kaart vult; de marge onder de tekst houdt de ruimte er dan alsnog. */
.hx-pcard-cta .hx-pcard-text {
  margin-bottom: 24px;
}

.hx-pcard-cta .button-border {
  margin-top: auto;
}

.hx-green .hx-pcard .button-border {
  border-color: #16b19c;
}

.hx-blue .hx-pcard .button-border {
  border-color: #5963c2;
}

/* Bezoekerspagina: de balie met het welkomstscherm staat rechts in de
   illustratie, deze uitsnede houdt de balie en het tourniquet in beeld. */
.hx-visitors .hx-visual-img {
  object-position: 75% 50%;
}

/* Fietspagina: de fiets en de stalling staan rechts, de campus links.
   Deze uitsnede houdt de telefoon met de reservering en de fiets samen. */
.hx-bikes .hx-visual-img {
  object-position: 72% 50%;
}

/* FAQ-pagina.
   De vragen staan in een <details>, dus open- en dichtklappen werkt zonder
   JavaScript en de antwoorden staan gewoon in de HTML voor Google. */
.hx-faq-hero {
  padding: 74px 0 10px;
}

/* Onder de logobalk volgt hier een nieuwe sectie, dus wel een normale
   ondermarge. Bij de vragenpagina plakt de lijst er direct onder. */
.hx-center-hero {
  padding: 74px 0 64px;
}

.hx-faq-hero .hx-eyebrow, .hx-faq-hero .hx-title, .hx-faq-hero .hx-sub,
.hx-center-hero .hx-eyebrow, .hx-center-hero .hx-title, .hx-center-hero .hx-sub {
  text-align: center;
}

/* inline-flex laat zich niet centreren met auto-marges, dus hier flex. */
.hx-faq-hero .hx-eyebrow, .hx-center-hero .hx-eyebrow {
  width: fit-content;
  margin: 0 auto 22px;
  display: flex;
}

.hx-faq-hero .hx-sub, .hx-center-hero .hx-sub {
  max-width: 720px;
  margin: 0 auto;
}

/* Alles in deze hero staat gecentreerd onder elkaar: knoppen, chips en de
   logobalk. Eén doel op de pagina, dus geen tweede kolom naast de tekst. */
.hx-center-hero .hx-actions, .hx-center-hero .hx-chips, .hx-center-hero .hx-proof-logos {
  justify-content: center;
}

.hx-center-hero .hx-chips {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.hx-center-hero .hx-proof {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hx-center-hero .hx-actions {
  margin-top: 12px;
}

.hx-center-hero .hx-chips {
  margin-top: 38px;
}


/* Calendly groeit zelf mee met zijn inhoud (data-resize), en zet die hoogte als
   inline stijl op het element. Wat hier staat is dus alleen de hoogte die we
   reserveren voordat de agenda geladen is, zodat de pagina niet verspringt. */
/* De logobalk sluit de abonnementen af, gecentreerd onder de kaarten. */
.section-prices .hx-proof {
  max-width: 720px;
  margin: 46px auto 0;
  text-align: center;
}

.section-prices .hx-proof-logos {
  justify-content: center;
}

.hx-calendly {
  max-width: 1000px;
  margin: 6px auto 0;
}

.hx-calendly .calendly-inline-widget {
  min-width: 320px;
  height: 700px;
}

.hx-faq-jump {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
  display: flex;
}

.hx-faq-jump a {
  color: #292d37;
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
  display: block;
}

.hx-faq-jump a:hover {
  color: #9249ae;
  border-color: #e0d3ea;
}

/* Links uitgelijnd met de sectiekop erboven, niet gecentreerd. */
.hx-faq-list {
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  display: flex;
}

.hx-faq {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  transition: border-color .25s, box-shadow .25s;
}

.hx-faq[open] {
  border-color: #e0d3ea;
  box-shadow: 0 16px 40px #1e194e14;
}

.hx-faq-q {
  color: #1e194e;
  cursor: pointer;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 26px;
  font-family: Lato, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  display: flex;
}

/* Safari zet er anders een eigen driehoekje voor. */
.hx-faq-q::-webkit-details-marker, .hx-faq-q::marker {
  display: none;
  content: "";
}

.hx-faq-q:hover {
  color: #9249ae;
}

/* Het pijltje is een gedraaid vierkantje met twee zijden, zodat er geen
   extra bestand of icoonfont voor nodig is. */
.hx-faq-chevron {
  border-bottom: 2px solid #9249ae;
  border-right: 2px solid #9249ae;
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  margin-left: auto;
  transition: transform .25s;
  transform: rotate(45deg);
}

.hx-faq[open] .hx-faq-chevron {
  margin-top: 10px;
  transform: rotate(225deg);
}

/* Donkerder dan de kaartteksten elders: dit zijn lange regels die je
   echt leest, dus dezelfde kleur als de gewone bodytekst. */
.hx-faq-a {
  color: #292d37;
  padding: 0 62px 24px 26px;
  font-family: Lato, sans-serif;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
}

.hx-faq-a p {
  margin: 0 0 14px;
}

.hx-faq-a p:last-child {
  margin-bottom: 0;
}

.hx-faq-a a {
  color: #9249ae;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .hx-calendly .calendly-inline-widget {
    height: 1000px;
  }

  .hx-faq-hero, .hx-center-hero {
    padding-top: 46px;
  }

  .hx-faq-q {
    gap: 14px;
    padding: 18px 20px;
    font-size: 17px;
  }

  .hx-faq-a {
    padding: 0 20px 20px;
  }
}

/* Dashboard-schermafdruk met losse toelichtingen (bezettingsgraad-kantoor).
   De toelichtingen zijn HTML in plaats van tekst in de afbeelding, zodat ze op
   een telefoon leesbaar blijven en meetellen als tekst op de pagina. Vanaf 1200
   (volle containerbreedte) liggen ze over de rechterrand van de schermafdruk,
   daaronder staan ze eronder. Schaduw en icoonvlak komen van .hx-card. */
.hx-dash {
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 34px 0 40px;
  display: grid;
}

.hx-dash-img {
  width: 100%;
  height: auto;
  display: block;
}

.hx-dash-notes {
  grid-template-columns: 1fr;
  gap: 20px;
  display: grid;
}

.hx-dash-note {
  background-color: #fff;
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 0 12px 30px #1e194e1f;
}

.hx-dash-note-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.hx-dash-note-title {
  color: #9249ae;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.hx-dash-note-text {
  color: #5b6172;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
}

@media screen and (min-width: 992px) {
  .hx-dash-notes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .hx-dash {
    grid-template-columns: 74% 6% 20%;
    align-items: start;
    gap: 0;
  }

  .hx-dash-img {
    grid-area: 1 / 1 / 2 / 3;
  }

  .hx-dash-notes {
    z-index: 1;
    grid-area: 1 / 2 / 2 / 4;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 250px;
  }
}

/* Geen los woord op de laatste regel. Chrome en Safari passen de regels aan,
   andere browsers breken gewoon af zoals voorheen. */
.hx-sub, .hx-lead, .hx-pcard-text, .hx-dash-note-text, .hx-bridge-p, .paragraph, .hx-quote-text, .pricing-benefit-text, .hx-faq-a p, .hx-solution-text {
  text-wrap: pretty;
}

/* Koppen verdelen hun woorden gelijk over de regels. */
.hx-title, .hx-h2, .heading-h2, .hx-pcard-title, .hx-dash-note-title, .hx-bridge-h, .pricing-item-title, .hx-faq-q {
  text-wrap: balance;
}

/* Een kop met lead die na een rij kaarten komt, zoals het slotblok van het
   dashboard op bezettingsgraad-kantoor. */
.hx-cards + .hx-head {
  margin-top: 60px;
  margin-bottom: 0;
}

/* Klantverhaal als paneel met de omslagfoto ernaast (bezettingsgraad-kantoor,
   werkplekken-reserveren), in hetzelfde vlak als .hx-showcase en .reserve-item.
   De foto is dezelfde als op de pagina van het klantverhaal. */
.hx-story {
  background-color: #f7fafd;
  border: 1px solid #ddedff;
  border-radius: 20px;
  padding: 56px 64px;
}

.hx-story .hx-grid {
  grid-template-columns: 1fr 1fr;
}

.hx-story .hx-lead {
  margin-bottom: 12px;
}

.hx-story-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .hx-story {
    padding: 40px 32px 32px;
  }

  .hx-story .hx-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .hx-story {
    padding: 32px 22px 22px;
  }
}

/* Een scherm uit de app met uitleg ernaast (bezoekers-aanmelden), samen in het
   vlak van .reserve-item (homepage). Het scherm neemt twee derde van de breedte,
   de kaartjes staan rechts en komen onder 992 eronder. De achtergrond van het
   plaatje is gelijk aan het vlak, zodat het er naadloos in valt. De kaartjes zijn
   dezelfde als bij het dashboard op bezettingsgraad-kantoor (.hx-dash-note). */
.hx-showcase {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  background-color: #f7fafd;
  border: 1px solid #ddedff;
  border-radius: 20px;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  padding: 32px;
  display: grid;
}

.hx-showcase-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Een uitsnede uit een scherm zonder eigen kader krijgt de vorm van een kaart. */
.hx-showcase-frame.is-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px #1e194e1f;
}

.hx-showcase-notes {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

/* Kaarten die na een showcase in dezelfde sectie volgen. */
.hx-showcase-after {
  margin-top: 26px;
}

@media screen and (max-width: 991px) {
  .hx-showcase {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

@media screen and (max-width: 767px) {
  .hx-showcase {
    padding: 16px;
  }
}

/* Tegeltjes met het logo van een koppeling onder een kaarttekst, zoals Slack bij
   de berichten op bezoekers-aanmelden. */
.hx-logo-tiles {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  display: flex;
}

.hx-logo-tile {
  color: #1e194e;
  background-color: #fbfcfe;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.hx-logo-tile img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Een icoon bovenaan een gewone kaart, op de plek van het nummer (.hx-pcard-num), in
   het formaat van de homepage (.reserve-item-icon). */
.hx-pcard > .hx-card-icon {
  border-radius: 13px;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
}

.hx-pcard > .hx-card-icon svg {
  width: 26px;
  height: 26px;
}

/* Een kop met lead gevolgd door alleen een knop. */
.hx-head.hx-head-actions {
  margin-bottom: 0;
}

/* Tegeltitels volgen de kleur van de pagina, zoals de labels en accenten. */
.hx-green .hx-dash-note-title {
  color: #118c7c;
}

.hx-blue .hx-dash-note-title {
  color: #5963c2;
}

/* Het brugblok vol in de paginakleur met witte tekst en een witte knop, zoals op
   de paarse pagina's. Op groen het donkere groen voor genoeg contrast. */
.hx-green .hx-bridge {
  background-color: #118c7c;
}

.hx-blue .hx-bridge {
  background-color: #5963c2;
}

.hx-green .hx-bridge-h, .hx-green .hx-bridge-p, .hx-blue .hx-bridge-h, .hx-blue .hx-bridge-p {
  color: #fff;
}

.hx-green .hx-bridge .button-border {
  color: #118c7c;
  background-color: #fff;
  border-color: #fff;
}

.hx-blue .hx-bridge .button-border {
  color: #5963c2;
  background-color: #fff;
  border-color: #fff;
}

.hx-green .hx-bridge .button-border:hover, .hx-blue .hx-bridge .button-border:hover {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

/* Een klantcitaat in het klantverhaalpaneel, onder de alinea. */
.hx-story-quote {
  margin: 24px 0 4px;
}

.hx-story-quote .hx-quote-text {
  font-size: 18px;
}

.hx-story-quote .hx-quote-role {
  text-align: left;
  margin-top: 10px;
  padding-left: 29px;
}

/* Een link in een lead, in de accentkleur van de pagina zoals in de FAQ. */
.hx-lead a {
  color: #9249ae;
  text-decoration: underline;
}

.hx-green .hx-lead a {
  color: #118c7c;
}

.hx-blue .hx-lead a {
  color: #5963c2;
}

/* Een losse kaart over de volle breedte: tekst niet breder dan een lead. */
.hx-showcase-after > .hx-pcard .hx-pcard-text {
  max-width: 760px;
}

/* Een knop in het volle uitlegvlak: wit met de paginakleur, zoals in het brugblok. */
.hx-solution .button-border {
  color: #9256a6;
  background-color: #fff;
  border-color: #fff;
}

.hx-green .hx-solution .button-border {
  color: #118c7c;
}

.hx-blue .hx-solution .button-border {
  color: #5963c2;
}

.hx-solution .button-border:hover {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

/* Icoonvlakken in tegels zijn even groot als die op de homepage (.reserve-item-icon). */
.hx-dash-note .hx-card-icon {
  border-radius: 13px;
  width: 48px;
  height: 48px;
}

.hx-dash-note .hx-card-icon svg {
  width: 26px;
  height: 26px;
}

/* Taalkeuze (backlog_plans/SITE_I18N_PLAN.md). Op desktop helemaal rechts in de balk, na de
   menuknop, als korte code met een wereldbol; het paneel toont de talen in hun eigen naam.
   De HTML en de links zet scripts/site_i18n.py per pagina en per taal. Onder 991px staat de
   keuze onderaan het Webflow-menu als rij codes, en in de footer altijd als tekstlinks. */
.hx-lang {
  order: 10;
  flex: none;
  margin-left: -14px;
  position: relative;
}

.hx-lang-toggle {
  cursor: pointer;
  color: #1e194e;
  background-color: #0000;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s;
  display: flex;
}

.hx-lang-toggle svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.hx-lang-toggle:hover, .hx-lang-open .hx-lang-toggle {
  background-color: #eef0f5;
}

.hx-lang-panel {
  z-index: 60;
  background-color: #fff;
  border-radius: 16px;
  min-width: 170px;
  padding: 10px 0;
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  box-shadow: 0 12px 30px #1e194e1f;
}

.hx-lang-open .hx-lang-panel {
  display: block;
}

.hx-lang-link {
  color: #292d37;
  white-space: nowrap;
  padding: 8px 22px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s;
  display: block;
}

.hx-lang-link:hover, .hx-lang-link.is-current, .hx-lang-code.is-current {
  color: #9249ae;
}

.hx-lang-link.is-current {
  font-weight: 700;
}

.hx-green .hx-lang-link:hover, .hx-green .hx-lang-link.is-current, .hx-green .hx-lang-code.is-current {
  color: #118c7c;
}

.hx-blue .hx-lang-link:hover, .hx-blue .hx-lang-link.is-current, .hx-blue .hx-lang-code.is-current {
  color: #5963c2;
}

.hx-lang-mobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .hx-lang, .hx-lang-panel, .hx-lang-open .hx-lang-panel {
    display: none;
  }

  .hx-lang-mobile {
    border-top: 1px solid #eef0f5;
    gap: 6px;
    margin-top: 8px;
    padding: 14px 0 6px;
    display: flex;
  }

  /* De eerste code lijnt met zijn tekst uit op de menulinks erboven. */
  .hx-lang-code:first-child {
    margin-left: -12px;
  }

  .hx-lang-code {
    color: #292d37;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }

  .hx-lang-code.is-current {
    background-color: #eef0f5;
  }
}

.footer-lang {
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
  margin-bottom: 24px;
  display: flex;
}

/* Onder 992px staan de winkelknoppen boven de rechterkolom. De ruimte eronder hoort bij de
   knoppen zelf, zodat Privacybeleid er ook vrij van staat op een pagina zonder taalrij
   (een nieuwe pagina die nog niet vertaald is). */
@media screen and (max-width: 991px) {
  .footer-apps {
    margin-bottom: 28px;
  }

  .footer-lang {
    margin-top: 0;
  }
}

.footer-lang-link {
  color: #fff;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
}

.footer-lang-link:hover {
  text-decoration: underline;
}

.footer-lang-link.is-current {
  font-weight: 700;
}

/* Valutakeuze EUR | USD bij de prijzen. De bedragen staan als <span class="hx-price" data-usd>
   in de tekst; js/appjeplekje.js wisselt ze en onthoudt de keuze voor alle pagina's. */
.hx-currency {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 999px;
  gap: 2px;
  margin-top: 18px;
  padding: 3px;
  display: inline-flex;
}

.hx-currency.is-center {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: max-content;
}

.hx-currency-btn {
  cursor: pointer;
  color: #5b6172;
  background-color: #0000;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .2s, color .2s;
}

.hx-currency-btn[aria-pressed="true"] {
  color: #fff;
  background-color: #9249ae;
}

.hx-green .hx-currency-btn[aria-pressed="true"] {
  background-color: #118c7c;
}

.hx-blue .hx-currency-btn[aria-pressed="true"] {
  background-color: #5963c2;
}

/* Werkplekcalculator (werkplekcalculator.html, js/werkplekcalculator.js). Invoer links,
   uitkomst rechts en sticky. Kaarten, randen en letters zoals .hx-pcard; paars voor keuzes,
   het groen van werkplekken (.hx-icon-desk) voor bureaus en het bedrag. */
.hx-calc-hero {
  padding-bottom: 48px;
}

.hx-calc-section {
  padding-bottom: 100px;
}

.hx-calc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: start;
  gap: 26px;
  display: grid;
}

.hx-calc-card {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  min-width: 0;
  margin: 0;
  padding: 34px 30px;
  font-family: Lato, sans-serif;
}

.hx-calc-card-title {
  color: #1e194e;
  margin: 0 0 24px;
  font-family: Lato, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

/* Kop van het formulier met rechts de valutaknop (EUR | USD) van de prijzenpagina. */
.hx-calc-card-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.hx-calc-card-head .hx-calc-card-title {
  margin-bottom: 0;
}

.hx-calc-card-head .hx-currency {
  margin-top: 0;
}

.hx-calc-fields {
  gap: 26px;
  display: grid;
}

.hx-calc-pair {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.hx-calc-money[hidden],
.hx-calc-note[hidden], .hx-calc-scale[hidden], .hx-calc-error[hidden] {
  display: none;
}

.hx-calc-field {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.hx-calc-label {
  color: #292d37;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.hx-calc-out {
  color: #9249ae;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hx-calc-input {
  background-color: #fff;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 16px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
}

.hx-calc-input:focus-within {
  border-color: #9249ae;
  box-shadow: 0 0 0 3px #f3ecf9;
}

.hx-calc-input input {
  color: #1e194e;
  font-variant-numeric: tabular-nums;
  background-color: #0000;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.hx-calc-input input::placeholder {
  color: #a3a8b5;
  font-size: 15px;
  font-weight: 400;
}

.hx-calc-input input::-webkit-outer-spin-button, .hx-calc-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hx-calc-input input[type="number"] {
  -moz-appearance: textfield;
}

.hx-calc-unit {
  color: #6c7280;
  white-space: nowrap;
  font-size: 14px;
}

.hx-calc-pre {
  color: #5b6172;
  font-size: 18px;
  font-weight: 700;
}

.hx-calc-field.is-error .hx-calc-input, .hx-calc-field.is-error .hx-calc-input:focus-within {
  border-color: #9249ae;
  box-shadow: 0 0 0 3px #f3ecf9;
}

.hx-calc-error {
  color: #7e0ca7;
  font-size: 14px;
}

/* Schuif voor de thuisdagen, in het paars van de site. --fill zet het script. */
.hx-calc-range {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none;
  width: 100%;
  height: 28px;
  margin: 0;
}

.hx-calc-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #9249ae 0 var(--fill, 40%), #e9eef5 var(--fill, 40%) 100%);
  border-radius: 3px;
  height: 6px;
}

.hx-calc-range::-moz-range-track {
  background-color: #e9eef5;
  border-radius: 3px;
  height: 6px;
}

.hx-calc-range::-moz-range-progress {
  background-color: #9249ae;
  border-radius: 3px;
  height: 6px;
}

.hx-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #9249ae;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-top: -8px;
}

.hx-calc-range::-moz-range-thumb {
  background-color: #fff;
  border: 2px solid #9249ae;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

.hx-calc-range:focus-visible {
  outline: 2px solid #9249ae;
  outline-offset: 4px;
}

.hx-calc-ticks {
  color: #a3a8b5;
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  margin-top: -6px;
  padding: 0 11px;
  font-size: 12px;
  display: flex;
}

.hx-calc-ticks span {
  justify-content: center;
  width: 0;
  display: flex;
}

/* Keuze voor de drukste dag: echte radioknoppen in tegels. */
.hx-calc-choices {
  gap: 8px;
  display: grid;
}

.hx-calc-choice {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 16px;
  font-weight: 400;
  transition: border-color .2s, background-color .2s, opacity .2s;
  display: grid;
  position: relative;
}

.hx-calc-choice:hover {
  border-color: #e0d3ea;
}

.hx-calc-choice input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.hx-calc-dot {
  border: 2px solid #dfe4ec;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}

.hx-calc-dot:after {
  content: "";
  background-color: #9249ae;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  transition: transform .15s;
  transform: scale(0);
}

.hx-calc-choice-text {
  color: #292d37;
  font-size: 16px;
}

.hx-calc-pct {
  color: #6c7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 14px;
}

.hx-calc-choice:has(input:checked) {
  background-color: #f6f0fa;
  border-color: #9249ae;
}

.hx-calc-choice:has(input:checked) .hx-calc-dot {
  border-color: #9249ae;
}

.hx-calc-choice:has(input:checked) .hx-calc-dot:after {
  transform: scale(1);
}

.hx-calc-choice:has(input:focus-visible) {
  outline: 2px solid #9249ae;
  outline-offset: 2px;
}

.hx-calc-choices.is-off .hx-calc-choice {
  opacity: .45;
  pointer-events: none;
}

/* Een veld binnen een veld (het eigen aantal onder de keuzetegels) staat er 16px onder:
   8px marge plus de 8px tussenruimte van het veld, ruimer dan label en invoer. */
.hx-calc-field > .hx-calc-field {
  margin-top: 8px;
}

/* Velden onder een groepslabel (Aannames): het groepslabel is vet, de labels eronder niet,
   zodat het kopje en de velden niet als twee losse labels onder elkaar staan. */
.hx-calc-field > .hx-calc-pair .hx-calc-label {
  color: #5b6172;
  font-weight: 400;
}

/* Vaste uitleg onder een invoer, zoals wat je meetelt in de kosten van een werkplek. */
.hx-calc-hint {
  color: #6c7280;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

/* Uitkomst */
.hx-calc-result {
  gap: 24px;
  display: grid;
  position: sticky;
  top: 24px;
}

.hx-calc-big {
  gap: 2px;
  display: grid;
}

.hx-calc-lead {
  color: #5b6172;
  font-size: 16px;
}

.hx-calc-desks {
  color: #1e194e;
  font-variant-numeric: tabular-nums;
  font-family: Poetsenone, sans-serif;
  font-size: 52px;
  line-height: 1.1;
}

.hx-calc-desks small {
  color: #5b6172;
  font-family: Lato, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.hx-calc-money {
  background-color: #d8f4ef;
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
}

.hx-calc-year {
  color: #118c7c;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
}

.hx-calc-month {
  color: #292d37;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.hx-calc-note {
  color: #292d37;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* Eén blokje per bureau: groen bezet, lichtgroen reserve, open kun je missen, paars tekort. */
.hx-calc-floor {
  gap: 10px;
  display: grid;
}

.hx-calc-grid {
  grid-template-columns: repeat(auto-fill, minmax(11px, 1fr));
  gap: 4px;
  display: grid;
}

.hx-calc-grid i {
  aspect-ratio: 1;
  border-radius: 3px;
  transition: background-color .25s, box-shadow .25s;
  box-shadow: inset 0 0 0 1px #c9d0db;
}

.hx-calc-grid i.is-occupied, .hx-calc-legend i.is-occupied {
  background-color: #16b19c;
  box-shadow: none;
}

.hx-calc-grid i.is-reserve, .hx-calc-legend i.is-reserve {
  background-color: #a2e0d7;
  box-shadow: none;
}

.hx-calc-grid i.is-short, .hx-calc-legend i.is-short {
  box-shadow: inset 0 0 0 1.5px #9249ae;
}

.hx-calc-legend {
  color: #5b6172;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 14px;
  display: flex;
}

.hx-calc-legend span {
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.hx-calc-legend b {
  color: #1e194e;
}

.hx-calc-legend i {
  border-radius: 2px;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.hx-calc-legend i.is-free {
  box-shadow: inset 0 0 0 1px #c9d0db;
}

.hx-calc-scale, .hx-calc-fine {
  color: #6c7280;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.hx-calc-facts {
  margin: 0;
  display: grid;
}

.hx-calc-facts div {
  border-top: 1px solid #eef2f7;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.hx-calc-facts div:last-child {
  border-bottom: 1px solid #eef2f7;
}

.hx-calc-facts dt {
  color: #5b6172;
  font-size: 15px;
  font-weight: 400;
}

.hx-calc-facts dd {
  color: #1e194e;
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.hx-calc-actions {
  gap: 12px;
  display: grid;
}

.hx-calc-actions .button {
  text-align: center;
  margin: 0;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 17px;
}

.hx-calc-share {
  color: #5b6172;
  cursor: pointer;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  justify-self: center;
  padding: 4px 0;
  font-family: Lato, sans-serif;
  font-size: 15px;
  text-decoration: underline;
}

.hx-calc-share:hover {
  color: #9249ae;
}

/* Rekenstappen onder de calculator, als rijen in één kaart. */
.hx-calc-steps {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  max-width: 920px;
  margin: 0;
  padding: 8px 30px;
  list-style: none;
}

.hx-calc-step {
  border-top: 1px solid #eef2f7;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-family: Lato, sans-serif;
  display: grid;
}

.hx-calc-step:first-child {
  border-top: 0;
}

.hx-calc-step .hx-pcard-num {
  margin-bottom: 0;
}

.hx-calc-step-title {
  color: #1e194e;
  font-size: 18px;
  font-weight: 700;
}

.hx-calc-step-sum {
  color: #5b6172;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-size: 15px;
}

.hx-calc-step-val {
  color: #1e194e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 700;
}

/* Het klantverhaal direct onder het blok over AppjePlekje; dat blok (section-box) heeft zelf
   al ruimte eronder. */
.hx-calc-proof {
  padding-top: 0;
}

/* Rekenstappen met de voorbeeldweek ernaast; onder 992px onder elkaar. */
.hx-calc-how {
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: start;
  gap: 26px;
  display: grid;
}

/* Voorbeeldweek naast de rekenstappen. */
.hx-calc-week {
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 18px;
  gap: 16px;
  min-width: 0;
  padding: 26px;
  font-family: Lato, sans-serif;
  display: grid;
}

.hx-calc-week-title {
  color: #1e194e;
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.hx-calc-bars {
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 12px;
  height: 150px;
  display: grid;
  position: relative;
}

.hx-calc-bar {
  justify-items: center;
  align-self: end;
  gap: 6px;
  display: grid;
}

.hx-calc-bar span {
  color: #6c7280;
  font-size: 13px;
}

.hx-calc-bar-col {
  background-color: #16b19c;
  border-radius: 6px 6px 3px 3px;
  width: 100%;
  max-width: 44px;
}

.hx-calc-bar-col.is-low {
  background-color: #a2e0d7;
}

.hx-calc-cap {
  border-top: 2px dashed #9249ae;
  position: absolute;
  left: 0;
  right: 0;
}

.hx-calc-cap span {
  color: #9249ae;
  background-color: #fff;
  padding-left: 6px;
  font-size: 13px;
  font-weight: 700;
  position: absolute;
  top: -22px;
  right: 0;
}

/* Twee secties met section-box onder elkaar: de vragen sluiten aan op het blok erboven. */
.hx-calc-faq {
  padding-top: 0;
}

/* Balk onderin op de telefoon, zolang de uitkomst niet in beeld is. */
.hx-calc-dock {
  z-index: 20;
  background-color: #fff;
  border-top: 1px solid #e9eef5;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: Lato, sans-serif;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -8px 24px #1e194e14;
}

.hx-calc-dock-t1 {
  color: #1e194e;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
}

.hx-calc-dock-t2 {
  color: #118c7c;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}

.hx-calc-dock .button-border {
  color: #292d37;
  border-color: #9256a6;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 15px;
}

@media screen and (max-width: 991px) {
  .hx-calc {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-calc-result {
    position: static;
  }

  .hx-calc-how {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .hx-calc-hero {
    padding-bottom: 36px;
  }

  .hx-calc-section {
    padding-bottom: 60px;
  }

  .hx-calc-card {
    padding: 26px 20px;
  }

  .hx-calc-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-calc-desks {
    font-size: 44px;
  }

  .hx-calc-steps {
    padding: 4px 20px;
  }

  .hx-calc-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: start;
  }

  .hx-calc-step-val {
    grid-column: 2;
  }

  .hx-calc-dock.is-shown {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-calc-input, .hx-calc-choice, .hx-calc-dot:after, .hx-calc-grid i {
    transition: none;
  }
}