/* VSL landing pages (/nl, /en): headline + VSL + embedded application. Nothing else on purpose:
   the less there is to read, the more people watch the video. */
:root{--accent:#FFD43B;--ink:#050C1A}
body{background:radial-gradient(120% 70% at 50% 0%,#0B1A33 0%,#050C1A 60%)}

.vsl-page{max-width:880px;margin:0 auto;padding:28px 20px 48px;text-align:center}
.vsl-logo{height:26px;display:block;margin:0 auto}
.callout{display:inline-block;margin-top:22px;padding:8px 14px;border-radius:999px;background:#0F2448;color:#8FB0FF;font:600 14px/1.35 'Inter Tight',sans-serif;text-wrap:balance}
.vsl-page h1{margin:18px auto 0;max-width:820px;font:800 clamp(28px,4.6vw,48px)/1.08 'Inter Tight',sans-serif;letter-spacing:-.03em;text-wrap:balance}
.vsl-page h1 em{font-style:normal;color:var(--accent)}
.vsl-page .sub{margin:14px auto 0;max-width:640px;font-size:clamp(16px,2vw,18px);line-height:1.5;color:#C3CCDB;text-wrap:balance}

/* Video: replace the poster with the Vidalytics embed code (see comment in the HTML). */
.vsl-video{position:relative;margin:26px auto 0;max-width:820px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0C1C36;border:1px solid #1A2C4A;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.vsl-video > img{width:100%;height:100%;object-fit:cover;display:block}
.vsl-video .badge{position:absolute;left:12px;bottom:12px;background:rgba(5,12,26,.82);color:#F5F7FA;font:600 13px 'Inter Tight',sans-serif;padding:7px 12px;border-radius:999px}

.vsl-hint{margin-top:16px;font-size:14px;color:#7F8BA0}

/* Call-to-action under the video: opens the application */
.vsl-cta{margin-top:26px}
.vsl-cta[hidden]{display:none}
.cta-btn{border:0;cursor:pointer;background:var(--accent);color:var(--ink);font:800 clamp(16px,2vw,19px) 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  padding:20px 34px;border-radius:14px;box-shadow:0 18px 40px -14px rgba(255,212,59,.55);transition:transform .2s ease,box-shadow .2s ease}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 22px 46px -14px rgba(255,212,59,.7)}
.cta-note{margin-top:12px;font-size:14px;color:#7F8BA0}
@media (max-width:600px){.cta-btn{width:100%;padding:18px 16px}}

/* Application (our own Typeform-style form + Calendly), revealed after the delay */
.apply-wrap{max-width:880px;margin:0 auto;padding:0 20px 64px;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.apply-wrap[hidden]{display:none!important}
.apply-wrap.show{opacity:1;transform:none}
.apply-frame{display:block;width:100%;height:min(820px,90svh);min-height:640px;border:1px solid #1A2C4A;border-radius:18px;background:#050C1A;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}

/* Mobile nudge to the application once it's there */
.to-apply{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;border:0;cursor:pointer;background:var(--accent);color:var(--ink);
  font:800 16px 'Inter Tight',sans-serif;text-transform:uppercase;letter-spacing:.02em;padding:16px;border-radius:14px;white-space:nowrap;box-shadow:0 14px 34px -12px rgba(255,212,59,.6);
  transform:translateY(140%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.to-apply.show{transform:none}
@media (min-width:900px){.to-apply{display:none}}
.consent{z-index:60}

.vsl-footer{border-top:1px solid #142440;padding:24px 20px 90px;text-align:center;font-size:12px;line-height:1.6;color:#7F8BA0}
.vsl-footer a{color:#7F8BA0}

/* Acquisition.com-style hero (NL): sticky urgency bar + pain-question H1 in caps.
   Only applies where the bar is present, so /en keeps its current look. */
.urgency{position:sticky;top:0;z-index:40;background:var(--accent);color:var(--ink);font:700 12px/1.3 'Inter Tight',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;padding:9px 16px;text-align:center}
.urgency .dot{width:8px;height:8px;border-radius:50%;background:#E5172F;box-shadow:0 0 0 3px rgba(229,23,47,.2);animation:pulse 1.6s infinite}
.urgency .sep{opacity:.35}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(229,23,47,0)}}
.urgency + .vsl-page h1{margin-top:6px;max-width:760px;font-size:clamp(30px,5.2vw,54px);line-height:1.04;text-transform:uppercase;letter-spacing:-.02em}
.urgency + .vsl-page .sub{color:#E3E8F2}
.urgency + .vsl-page .cta-btn{width:100%;max-width:640px;font-size:clamp(20px,2.6vw,26px);padding:24px 20px}
@media (max-width:600px){.urgency{flex-wrap:nowrap;white-space:nowrap;font-size:11px;letter-spacing:.04em;gap:8px}}
.urgency ~ .vsl-footer{margin-top:clamp(160px,30vh,320px)}
.urgency ~ .apply-wrap{scroll-margin-top:48px}
.apply-frame.sized{min-height:0;transition:height .3s ease}

/* Mobile fold: headline in max ~4 lines and a slim cookie bar, so the video sits higher on the first screen. */
@media (max-width:600px){
  .urgency + .vsl-page{padding-top:18px}
  .urgency + .vsl-page h1{font-size:clamp(24px,7vw,30px);line-height:1.06}
  .urgency + .vsl-page .sub{margin-top:10px;font-size:15px}
  .vsl-page .vsl-video{margin-top:18px}
  .consent{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:10px;flex-wrap:nowrap;font-size:12px;line-height:1.35;border-radius:14px}
  .consent p{flex:1 1 auto}
  .consent-actions{width:auto!important;margin-left:0}
  .consent-actions button{min-height:36px;padding:0 16px!important;font-size:14px}
}