*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#fff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.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}

.page{
  min-height:100vh;
  height:100vh;
  max-height:100dvh;
  background:#fff;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.coming-soon-top-black{
  position:absolute;
  left:0;top:0;width:100%;
  height:calc(20% + 2px);
  background:#000;
  z-index:0;
}

.coming-soon-bg-image-box{
  position:absolute;
  left:0;top:20%;width:100%;height:80%;
  overflow:hidden;
  z-index:10;
}
.coming-soon-bg-image-box img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:crisp-edges;
  -webkit-image-rendering:-webkit-optimize-contrast;
}

.coming-soon-bg{
  position:absolute;
  left:0;width:100%;
  bottom:0;height:75%;
  z-index:20;
  pointer-events:none;
}
@media (min-width:768px){
  .coming-soon-bg{top:20%;bottom:auto;height:80%;}
}

.spark{
  position:absolute;
  pointer-events:none;
  transform:translateX(-50%);
  filter:blur(2px);
  animation:spark-life 1.5s ease-out forwards;
}
.spark-inner{position:relative;transform:scale(.3)}
.spark-core{
  width:8px;height:8px;border-radius:999px;background:#C6F24E;
  box-shadow:0 0 8px 2px rgba(198,242,78,.9),0 0 16px 4px rgba(198,242,78,.5);
  filter:blur(1px);
}
.spark-glow{
  position:absolute;inset:0;width:8px;height:8px;border-radius:999px;background:#C6F24E;
  box-shadow:0 0 12px 3px rgba(198,242,78,.7);
  filter:blur(1.5px);
  animation:spark-pulse 1s ease-in-out infinite;
}
@keyframes spark-life{
  0%{opacity:0;transform:translateX(-50%) scale(0)}
  20%{opacity:1;transform:translateX(-50%) scale(1.2)}
  80%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(.8)}
}
@keyframes spark-pulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.5);opacity:.35}
}

.content{
  position:relative;
  z-index:30;
  width:100%;
  text-align:center;
  padding:16px;
  max-width:48rem;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:0;
  flex:1;
  max-height:100%;
  overflow:hidden;
}
.content-inner{
  margin-top:0;
  width:100%;
  max-width:75%;
  margin-left:auto;margin-right:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.upper-scale{
  transform-origin:center;
  transform:scale(1.1);
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-wrap{margin-bottom:12px}
.logo-mark{height:70px;width:auto;display:block;margin:0 auto 8px}
.wordmark-wrap{margin-bottom:12px}
.wordmark{height:32px;width:auto;display:block;margin:0 auto}

.tagline{
  font-size:15px;
  margin:0 0 8px;
  background-image:linear-gradient(90deg,#9ca3af 0%,#ffffff 25%,#9ca3af 50%,#ffffff 75%,#9ca3af 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient 3s ease-in-out infinite;
}
.subtag{
  font-size:12px;
  color:#fff;
  margin:0 0 16px;
}
@keyframes gradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.lower-block{
  margin-top:75px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.coming-title{margin-bottom:16px}
.coming-title h2{
  margin:0 0 4px;
  color:#fff;
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:.025em;
}
.pill{
  display:inline-block;
  padding:2px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.pill p{margin:0;color:#d1d5db;font-size:10px}

.waitlist{width:100%;max-width:75%;margin:0 auto 16px}
.row{display:flex;flex-direction:column;gap:8px;width:100%}
#waitlist-email{
  flex:1;
  height:32px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.5);
  color:#fff;
  padding:0 12px;
  font-size:14px;
  outline:none;
  transition:border-color .2s,background .2s;
}
#waitlist-email::placeholder{color:#d1d5db;font-size:12px}
#waitlist-email:hover{background:transparent}
#waitlist-email:focus{border-color:#fff}
#waitlist-email.is-error,
#waitlist-email.is-error:focus{border-color:#f87171}
#waitlist-email.is-error::placeholder{color:#f87171}

#waitlist-submit{
  height:32px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.5);
  color:#fff;
  font-weight:600;
  font-size:12px;
  padding:0 16px;
  cursor:pointer;
  transition:background .2s,opacity .2s;
}
#waitlist-submit:hover:not(:disabled){background:transparent}
#waitlist-submit:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}

.role-slot{
  min-height:36px;
  margin-top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.role-slot.is-visible{opacity:1;pointer-events:auto}
.role-group{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center}
.role-option{display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer}
.role-option input{position:absolute;opacity:0;pointer-events:none}
.radio{
  width:12px;height:12px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5);
  display:inline-block;position:relative;flex-shrink:0;
}
.role-option input:checked + .radio{
  border-color:#fff;
  background:rgba(255,255,255,.2);
}
.role-option input:checked + .radio::after{
  content:"";
  position:absolute;inset:2px;border-radius:999px;background:#fff;
}
.role-label{color:#d1d5db;font-size:12px;white-space:nowrap;transition:color .2s}
.role-option:hover .role-label{color:#fff}
.error{margin:8px 0 0;color:#f87171;font-size:12px;text-align:center}

.social{display:flex;justify-content:center;gap:12px;margin-top:8px}
.social a{
  width:36px;height:36px;border-radius:999px;
  border:2px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;
}
.social a:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.social svg{width:16px;height:16px;color:#fff}

.fade-in{animation:fade-up .8s ease both}
.fade-delay-0{animation-delay:0s}
.fade-delay-1{animation-delay:.2s}
.fade-delay-2{animation-delay:.3s}
.fade-delay-3{animation-delay:.35s}
.fade-delay-4{animation-delay:.5s}
.fade-delay-5{animation-delay:.6s}
.fade-delay-6{animation-delay:.7s}
@keyframes fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fade-in,.spark,.spark-glow,.tagline{animation:none !important}
  .fade-in{opacity:1;transform:none}
}

@media (min-width:640px){
  .page{height:auto;max-height:none}
  .content{
    padding:0 32px 64px;
    overflow:visible;
    max-height:none;
    flex:initial;
  }
  .content-inner{max-width:none;margin-top:.5cm}
  .upper-scale{transform:none}
  .logo-wrap{margin-bottom:56px}
  .logo-mark{height:147px;margin-bottom:40px}
  .wordmark-wrap{margin-bottom:32px}
  .wordmark{height:58px}
  .tagline{font-size:1.5rem;margin-bottom:8px}
  .subtag{font-size:.875rem;margin-bottom:80px}
  .lower-block{margin-top:0}
  .coming-title{margin-bottom:48px}
  .coming-title h2{font-size:1.5rem;margin-bottom:16px}
  .pill{padding:2px 12px}
  .pill p{font-size:.75rem}
  .waitlist{max-width:32rem;margin-bottom:80px}
  .row{flex-direction:row;gap:16px}
  #waitlist-email{height:40px;font-size:1rem}
  #waitlist-email::placeholder{font-size:.875rem}
  #waitlist-submit{height:40px;font-size:1rem;padding:0 32px}
  .role-slot{min-height:48px;justify-content:flex-start}
  .role-group{gap:16px;justify-content:flex-start}
  .role-option{gap:8px}
  .radio{width:16px;height:16px}
  .role-label{font-size:.875rem}
  .error{font-size:.875rem;text-align:left}
  .social{gap:24px;margin-top:0}
  .social a{width:48px;height:48px}
  .social svg{width:20px;height:20px}
}
@media (min-width:768px){
  .content{padding-left:48px;padding-right:48px}
  .wordmark{height:72px}
  .tagline{font-size:1.875rem}
  .subtag{font-size:1rem}
  .coming-title h2{font-size:1.875rem}
  .pill p{font-size:.875rem}
}
@media (min-width:1024px){
  .wordmark{height:86px}
}