/* ---------------------------------------------------------------------------
   Opmaak voor de bedankpagina's.

   Deze twee pagina's laadden hun opmaak van cdn.tailwindcss.com. Dat is een
   extern script dat de weergave blokkeert, en Tailwind waarschuwt zelf dat die
   CDN niet voor productie bedoeld is. Voor de pagina die een klant direct na
   betaling ziet, is een afhankelijkheid van een vreemde server ongewenst.

   Hieronder staan exact de klassen die deze twee pagina's gebruiken, met de
   standaardwaarden van Tailwind. Het uiterlijk blijft daardoor gelijk; alleen
   de herkomst verandert. Het donkere ontwerp van deze pagina's is bewust
   ongemoeid gelaten.
   --------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

/* Weergave en positie */
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.inline-block{display:inline-block}
.sticky{position:sticky}
.top-0{top:0}
.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.shrink-0{flex-shrink:0}
.min-w-0{min-width:0}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* Afmetingen */
.w-16{width:4rem}
.h-16{height:4rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}

/* Ruimte tussen elementen */
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-10{gap:2.5rem}
.space-y-3>*+*{margin-top:.75rem}

/* Marges */
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-7{margin-top:1.75rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}

/* Binnenruimte */
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-7{padding:1.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}

/* Randen */
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-white\/10{border-color:rgb(255 255 255 / .1)}
.border-white\/15{border-color:rgb(255 255 255 / .15)}
.border-white\/20{border-color:rgb(255 255 255 / .2)}
.border-cyan-300\/30{border-color:rgb(103 232 249 / .3)}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

/* Achtergronden */
.bg-\[\#061426\]\/95{background-color:rgb(6 20 38 / .95)}
.bg-slate-950\/50{background-color:rgb(2 6 23 / .5)}
.bg-slate-950\/60{background-color:rgb(2 6 23 / .6)}
.bg-white\/\[\.04\]{background-color:rgb(255 255 255 / .04)}
.bg-cyan-300{background-color:#67e8f9}
.bg-cyan-300\/\[\.06\]{background-color:rgb(103 232 249 / .06)}
.bg-emerald-400\/10{background-color:rgb(52 211 153 / .1)}
.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}

/* Tekstkleuren */
.text-white{color:#fff}
.text-slate-300{color:#cbd5e1}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.text-slate-950{color:#020617}
.text-cyan-100{color:#cffafe}
.text-cyan-300{color:#67e8f9}
.text-emerald-300{color:#6ee7b7}
.text-amber-300{color:#fcd34d}

/* Tekstgroottes */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}

/* Tekstopmaak */
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}
.text-left{text-align:left}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.underline{text-decoration-line:underline}
.leading-6{line-height:1.5rem}
.leading-8{line-height:2rem}
.tracking-\[\.14em\]{letter-spacing:.14em}
.tracking-\[\.18em\]{letter-spacing:.18em}

/* Vanaf tabletbreedte */
@media(min-width:768px){
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:grid-cols-\[\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}
  .md\:p-8{padding:2rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
}