@charset "UTF-8";
:root{color-scheme:dark;--navy:#10182e;--teal:#15d3a9;--text:#eef4f7;--muted:#aebbcf;--ease:cubic-bezier(.22,.8,.25,1);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:#090f20;min-height:100svh;display:grid;place-items:center}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 23% 30%,#16454565,transparent 48%),radial-gradient(ellipse at 79% 76%,#3436714d,transparent 50%);pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.carousel:focus-visible{outline:3px solid #91ffdf;outline-offset:5px}
button:disabled{cursor:default}
.onboarding{position:relative;isolation:isolate;width:100%;max-width:480px;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse 80% 55% at 50% 24%,#14555a3d,transparent 85%),var(--navy);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.brand{display:flex;justify-content:center;align-items:center;padding:28px 24px 27px;flex-shrink:0}
.brand img{width:165px;height:60px;display:block;user-select:none}
.carousel{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;flex:1 0 auto;outline-offset:-4px;align-items:stretch;scroll-behavior:smooth}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;padding:0 24px;display:flex;flex-direction:column;align-items:center}
.video-frame{width:100%;max-width:min(390px,calc(100svh - 435px));aspect-ratio:1;position:relative;flex-shrink:0;overflow:hidden;border-radius:28px;background:#193c50;box-shadow:0 0 0 1px #ffffff1c,0 18px 42px #00000030,0 0 46px #15d3a913;isolation:isolate;transform:translateZ(0)}
.video-frame video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.copy{padding:30px 0 20px;text-align:center;max-width:382px}
.copy h1,.copy h2{font-size:clamp(1.7rem,7.1vw,2rem);font-weight:650;letter-spacing:-.035em;line-height:1.12;margin:0;text-wrap:balance}
.copy h1 span{display:block;color:var(--teal)}
.copy p{font-size:1rem;line-height:1.55;color:var(--muted);margin:15px auto 0;max-width:355px;text-wrap:pretty}
.controls{flex-shrink:0;padding:4px 24px 12px;width:100%;max-width:438px;align-self:center}
.pagination{display:flex;justify-content:center;align-items:center;height:44px;margin-bottom:6px;gap:2px}
.dot{display:grid;place-items:center;min-width:26px;height:40px;padding:0 4px;border:0;background:transparent}
.dot::before{content:"";display:block;width:6px;height:6px;border-radius:20px;background:#65738b;transition:width .35s var(--ease),background .35s,box-shadow .35s}
.dot[aria-current="step"]::before{width:26px;background:var(--teal);box-shadow:0 0 12px #15d3a92b}
.continue{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:56px;padding:16px 48px;background:var(--teal);color:#0a2831;border:1px solid #80f2d544;border-radius:18px;font-size:1rem;font-weight:650;letter-spacing:-.01em;box-shadow:0 7px 24px #15d3a916;transition:transform .18s,background .18s,box-shadow .18s;touch-action:manipulation}
.continue svg{position:absolute;right:22px;width:20px;height:20px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.continue:hover{background:#38e3bd;box-shadow:0 8px 28px #15d3a925}
.continue:hover svg{transform:translateX(3px)}
.continue:active{transform:scale(.98)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{padding:12px;text-align:center}
@media(min-width:600px){body{padding:28px}.onboarding{min-height:min(850px,calc(100svh - 56px));max-width:460px;border:1px solid #ffffff12;border-radius:38px;box-shadow:0 40px 110px #00000050,0 1px 0 #ffffff0a inset}.brand{padding:24px}.controls{padding-bottom:18px}.video-frame{max-width:min(380px,calc(100svh - 500px))}.carousel{cursor:grab}.copy{padding-top:30px}}
@media(max-width:599px) and (max-height:750px){.brand{padding:19px 24px 21px}.brand img{width:148px;height:54px}.video-frame{max-width:min(100%,max(190px,calc(100svh - 440px)))}.copy{padding-top:25px;padding-bottom:10px}.copy h1,.copy h2{font-size:1.7rem}.copy p{margin-top:12px}.pagination{margin-bottom:5px}.controls{padding-bottom:8px}}
@media(max-height:620px){.onboarding{height:auto;min-height:100svh}.video-frame{max-width:230px}.copy{padding-top:22px}.brand{padding:18px}.controls{padding-top:4px}.carousel{flex:none}.copy p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Give the video the space previously left empty below the copy on phones. */
html{background:var(--navy)}
@media(max-width:599px){
  body{background:var(--navy)}
  body::before{display:none}
  .onboarding{min-height:100dvh;background:var(--navy)}
  .brand{padding:20px 24px 24px}
  .brand img{width:140px;height:51px}
  .carousel{flex:0 0 auto}
  .video-frame{max-width:min(390px,max(210px,calc(100svh - 385px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}
  .copy{padding:22px 0 8px}
  .copy h1,.copy h2{font-size:clamp(1.875rem,7.8vw,2.125rem)}
  .copy p{margin-top:12px;font-size:1.0625rem;line-height:1.45}
  .controls{padding-top:0}
  .continue,.continue:hover{box-shadow:none}
  .pagination{height:38px;margin-bottom:4px}
}

@media(max-width:599px){
  .video-frame{width:var(--mobile-video-size, min(100%, 260px));max-width:100%}
}

.carousel.animating{scroll-snap-type:none;scroll-behavior:auto}