/* The sign-up gate, built on the subscribe overlay's shape so the two read as
   the same hand. Wider than the subscribe sheet because it carries two ways in
   and a line of small print. */

#gatemodal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:1.2rem}
#gatemodal.open{display:flex}
.gateback{position:fixed;inset:0;background:rgba(30,18,8,.72);backdrop-filter:blur(7px);animation:fade .3s}
.gatesheet{position:relative;width:min(470px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:2rem 1.8rem 1.6rem;box-shadow:var(--shadow);
  animation:rise .38s cubic-bezier(.2,.8,.2,1)}
.gatesheet .mclose{top:.7rem;right:.7rem}
.gate-title{font-family:var(--font);font-weight:800;font-size:1.5rem;color:var(--ink);
  margin:.35rem 0 .55rem;letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
.gate-sub{color:var(--ink-dim);font-size:.98rem;line-height:1.55;margin:0 0 1.3rem;max-width:40ch}

.gate-actions{display:flex;flex-direction:column;gap:.7rem}
.gate-g{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:.78rem 1rem;border-radius:10px;border:1px solid var(--line);background:#fff;color:#1f1f1f;
  font-family:var(--font);font-weight:600;font-size:.96rem;cursor:pointer;transition:.18s}
.gate-g:hover{box-shadow:0 2px 10px rgba(0,0,0,.18);transform:translateY(-1px)}
.gate-g svg{width:19px;height:19px;flex:0 0 19px}
.gate-or{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

.gate-mail{display:flex;gap:.5rem}
.gate-mail input{flex:1;min-width:0;padding:.74rem .9rem;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2,rgba(255,255,255,.04));color:var(--ink);font-size:.95rem;font-family:inherit}
.gate-mail input:focus{outline:2px solid var(--accent);outline-offset:1px}
.gate-mail button{padding:.74rem 1.05rem;border-radius:10px;border:0;background:var(--accent);
  color:var(--on-accent,#fff);font-family:var(--font);font-weight:700;font-size:.92rem;cursor:pointer;
  white-space:nowrap;transition:.18s}
.gate-mail button:hover{background:var(--accent-deep)}

.gate-fine{margin:1.15rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5;max-width:42ch}

/* the short profile form */
.gate-prof{display:flex;flex-direction:column;gap:.85rem}
.gate-prof label{display:flex;flex-direction:column;gap:.3rem;color:var(--ink-dim);
  font-size:.85rem;letter-spacing:.01em}
.gate-prof select,.gate-prof input{padding:.68rem .85rem;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2,rgba(255,255,255,.04));color:var(--ink);font-size:.95rem;font-family:inherit}
.gate-prof select:focus,.gate-prof input:focus{outline:2px solid var(--accent);outline-offset:1px}
.gate-prof-act{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.4rem}
.gate-prof-act button{padding:.7rem 1.2rem;border-radius:10px;border:0;background:var(--accent);
  color:var(--on-accent,#fff);font-family:var(--font);font-weight:700;font-size:.92rem;cursor:pointer}
.gate-skip{background:transparent !important;color:var(--muted) !important;
  border:1px solid var(--line) !important;font-weight:600 !important}
.gate-skip:hover{color:var(--ink) !important}

@media (max-width:480px){
  .gatesheet{padding:1.6rem 1.2rem 1.3rem}
  .gate-title{font-size:1.3rem}
  .gate-mail{flex-direction:column}
  .gate-mail button{width:100%}
}