/* ==========================================================================
   Flow29 — tijdelijke launchpagina (assets/css/launch.css)
   Uitsluitend gekoppeld vanuit de tijdelijke index.html. Raakt style.css niet
   aan: bij terugschakelen (index.html vervangen door index-full.html) is dit
   bestand simpelweg ongebruikt en zonder gevolgen voor de rest van de site.
   Gebruikt enkel de bestaande tokens uit style.css (kleuren, --s*, radii).
   ========================================================================== */

/* De corridor-strook (.launch-bg) staat NA .launch-wrap in de normale
   paginastroom, met een vaste hoogte. Zo kan hij nooit over de tekst heen
   vallen, ongeacht teksthoeveelheid, schermhoogte of zoomniveau — eerdere
   opzet met absolute positionering + percentage-masker was daar te fragiel
   voor zodra de tekst langer werd dan één schermhoogte. */
.launch-main{min-height:calc(100vh - var(--hdr-h));
  display:flex;flex-direction:column}

.launch-wrap{flex:1 0 auto;display:flex;align-items:center;
  padding-block:var(--s9) var(--s7);width:100%}

.launch-bg{flex:none;height:var(--s9);width:100%}
.launch-bg svg{width:100%;height:100%;display:block}

.launch-content{max-width:62ch;margin:0 auto;text-align:center;
  animation:launch-fade .4s ease-out}

.launch-content .payoff{margin-bottom:var(--s3)}

.launch-content .hero-title{margin-bottom:var(--s6)}

.launch-content .lead{margin:0 auto var(--s5);max-width:46ch}

/* Corridor-connector: heel subtiele verbindingslijn met knooppunt, dezelfde
   visuele taal als het flowmap-diagram elders op de site. */
.corridor-link{display:block;width:1px;height:20px;margin:0 auto var(--s3);
  background:var(--slate-300);position:relative}
.corridor-link::after{content:"";position:absolute;left:50%;bottom:-4px;
  transform:translateX(-50%);width:7px;height:7px;border-radius:var(--r-full);
  background:var(--white);border:2px solid var(--navy-500)}

/* Statusblok: badge en tekst delen dezelfde linkerkant, als doorlopende
   pagina-inhoud — geen kader, geen apart vlak. */
.status-block{max-width:46ch;margin:0 auto;text-align:left}

.badge{display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border-radius:var(--r-full);
  background:var(--white);border:1px solid var(--slate-200);
  color:var(--slate-600);font-size:13px;font-weight:500;margin-bottom:var(--s4)}
.badge::before{content:"";width:6px;height:6px;border-radius:var(--r-full);
  background:var(--teal-500);opacity:.7;flex:none}

.corridor-status{position:relative;padding-left:28px}
.corridor-status::before{content:"";position:absolute;left:5px;top:7px;bottom:7px;
  width:1px;background:var(--slate-200)}
.corridor-status p{position:relative;color:var(--slate-700);font-size:14.5px;
  line-height:1.6}
.corridor-status p.is-lead{color:var(--navy-700);font-weight:600}
.corridor-status p+p{margin-top:var(--s4)}
.corridor-status p::before{content:"";position:absolute;left:-28px;top:6px;
  width:7px;height:7px;border-radius:var(--r-full);background:var(--white);
  border:2px solid var(--navy-300)}

.launch-content .btns{justify-content:center;margin-top:var(--s6)}

.launch-ftr{text-align:center;color:var(--slate-500);font-size:13.5px}

@keyframes launch-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .launch-content{animation:none}
}