#gate{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;
  padding-block:26px calc(26px + env(safe-area-inset-bottom));
  padding-inline:calc(26px + max(env(safe-area-inset-left), env(safe-area-inset-right)));
  overflow-x:hidden;overflow-y:auto;
  background:
    radial-gradient(90% 55% at 50% -5%, color-mix(in srgb,var(--sodium) 11%,transparent), transparent 62%),
    radial-gradient(80% 50% at 8% 108%, color-mix(in srgb,var(--accent-soft) 9%,transparent), transparent 60%),
    var(--void);
}
#gate[hidden]{display:none}

.gate-bg{position:absolute;inset:0;opacity:.75;pointer-events:none}
.gate-bg svg{width:100%;height:100%;display:block}

.gate-box{
  position:relative;width:100%;max-width:340px;text-align:center;
  animation:gate-in .7s cubic-bezier(.22,1,.36,1) both
}
@keyframes gate-in{from{opacity:0;transform:translateY(10px)}}

#gate.gate-leaving{pointer-events:none}
#gate.gate-leaving .gate-box{
  animation:gate-out .2s cubic-bezier(.4,0,.85,.3) both
}
#gate.gate-leaving .gate-bg{
  opacity:0;transition:opacity .2s ease
}
@keyframes gate-out{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-14px) scale(.985)}
}

.gate-eyebrow{
  display:block;font-family:var(--f-head);
  font-size:13px;letter-spacing:.01em;
  color:var(--mute);margin-bottom:11px
}

.gate-box h1{
  font-family:var(--f-head);font-weight:600;
  font-size:clamp(2rem,10vw,2.6rem);
  letter-spacing:.24em;line-height:1;
  margin:0 0 12px;
  color:var(--ink);white-space:nowrap
}
.gate-box h1 span{color:var(--sodium)}


.gate-lede{
  font-size:14px;line-height:1.6;color:var(--mute);
  margin:20px auto 26px;max-width:300px
}

.gate-cta{
  width:100%;max-width:var(--btn-w);margin-inline:auto;
  height:52px;font-size:16px;line-height:1.25;
  color:var(--void);
  background:var(--sodium);
  border:1px solid var(--accent-soft);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb,#ffffff 22%,transparent),transparent 52%),
    linear-gradient(180deg,
      rgba(0,0,0,.16),rgba(0,0,0,0) 46%,
      color-mix(in srgb,#ffffff 9%,transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 34%,transparent),
    inset 0 -1px 0 rgba(0,0,0,.30),
    inset 0 0 0 2px rgba(0,0,0,.13),
    inset 0 3px 5px -2px rgba(0,0,0,.34),
    var(--depth-1),var(--depth-glow),
    0 10px 34px color-mix(in srgb,var(--sodium) 30%,transparent);
  text-shadow:0 1px 1px rgba(0,0,0,.22);

  line-height:1.25;
  padding-block:.06em 0
}
.gate-cta:active{
  background:color-mix(in srgb,var(--sodium) 82%,#000);
  border-color:var(--sodium);
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0,.20),rgba(0,0,0,0) 52%,
      color-mix(in srgb,#ffffff 7%,transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 12%,transparent),
    inset 0 0 0 2px rgba(0,0,0,.16),
    inset 0 4px 7px -2px rgba(0,0,0,.42),
    var(--depth-glow),
    0 6px 20px color-mix(in srgb,var(--sodium) 24%,transparent);
  text-shadow:none
}
.gate-cta:disabled{opacity:.6}

.gate-error{
  margin:16px 0 0!important;padding:11px 13px;
  font-size:13px!important;line-height:1.5!important;text-align:left;
  color:var(--heavy)!important;
  background:color-mix(in srgb,var(--heavy) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--heavy) 30%,transparent);
  border-radius:10px
}

.link-btn{
  display:block;width:100%;margin-top:16px;padding:10px 0;
  color:var(--mute);font-size:13px;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--mute) 40%,transparent)
}
.link-btn:hover,.link-btn:active{color:var(--ink)}

.gate-foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--edge)}
.gate-note{
  margin:0!important;font-size:11px!important;line-height:1.55!important;
  color:var(--mute)!important
}
.diag{
  display:block;margin-top:12px;
  font-family:var(--f-mono);font-size:10px;
  letter-spacing:.04em;color:var(--mute);opacity:.65
}

@media (prefers-reduced-motion:reduce){
  .gate-box{animation:none}
  #gate.gate-leaving .gate-box{animation:none;opacity:0}
  #gate.gate-leaving .gate-bg{transition:none}
}

@media (max-height:620px){
  .gate-eyebrow{margin-bottom:8px}
  .gate-box h1{margin-bottom:10px}
  .gate-lede{margin:14px auto 18px;font-size:13px}
  .gate-foot{margin-top:20px;padding-top:14px}
}