/* Signup box + every state, for pages that use site.css (the homepage). Same look as /letter. Needs /signup.js. */
.signup{position:relative;max-width:560px}
.signup .row{display:flex;gap:8px}
.signup .row input{flex:1 1 auto;min-width:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup input[type=email]{height:54px;padding:0 16px;font:400 17px var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--hairline-strong);border-radius:6px;transition:border-color .12s ease;-webkit-appearance:none;appearance:none}
.signup input[type=email]::placeholder{color:#9a9a93}
.signup input[type=email]:hover{border-color:var(--ink-meta)}
.signup input[type=email]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.signup.is-invalid input[type=email]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.signup button{height:54px;padding:0 22px;border:0;border-radius:6px;background:var(--ink);color:var(--paper);
  font:500 17px var(--sans);cursor:pointer;white-space:nowrap;transition:background .12s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.signup button:hover{background:var(--ink-hover)}
.signup button[disabled]{cursor:default}
.signup.is-loading input,.signup.is-loading button{opacity:.55}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.signup.is-loading .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.signup .fine{font-size:14px;color:var(--ink-meta);margin:12px 0 0}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.signup .alert{display:none;margin:12px 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--ink);font-size:15px;color:var(--ink)}
.signup .alert p{margin:0}
.signup .alert p + p{margin-top:4px}
.signup.has-alert .alert{display:block}
.signup .linkbtn{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:500}
.signup .linkbtn:hover{text-decoration-thickness:2px}
.signup .linkbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.signup .result{display:none;background:var(--panel);border:1px solid var(--hairline);border-radius:8px;padding:24px}
.signup.is-done > form{display:none}
.signup.is-done .result{display:block}
.signup .result h2{font:500 28px/1.2 var(--serif);color:var(--ink);margin:0 0 8px;padding:0;border:0}
.signup .result h2:focus{outline:none}
.signup .result p{margin:0 0 12px}
.signup .result p:last-child{margin-bottom:0}
.signup .result .who{font-family:var(--mono);font-size:14px;color:var(--ink-meta);word-break:break-all}
.signup .namestep{margin:20px 0 4px;padding:18px 0 0;border-top:1px solid var(--hairline)}
.signup .namestep label{display:block;font:500 16px/1.4 var(--sans);color:var(--ink);margin:0 0 8px}
.signup .namestep label span{font-weight:400;color:var(--ink-meta)}
.signup .namestep input{flex:1 1 auto;min-width:0;height:50px;padding:0 14px;font:400 17px var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--hairline-strong);border-radius:6px}
.signup .namestep input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.signup .btn-2{height:50px;background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.signup .btn-2:hover{background:var(--panel)}
.signup .btn-2 .spin{border-color:rgba(11,11,11,.25);border-top-color:var(--ink)}
.signup .namestep.is-loading .spin{display:inline-block}
.signup .namestep.is-loading input,.signup .namestep.is-loading button{opacity:.55}
.signup .namestep.has-alert .alert{display:block}
.signup .namedone{margin:20px 0 4px !important;padding:18px 0 0;border-top:1px solid var(--hairline)}
.signup .steps{list-style:none;padding:0;margin:16px 0;counter-reset:s}
.signup .steps li{counter-increment:s;position:relative;padding:12px 0 12px 36px;margin:0;border-top:1px solid var(--hairline)}
.signup .steps li:last-child{border-bottom:1px solid var(--hairline)}
.signup .steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;
  font:500 13px/22px var(--sans);text-align:center;color:var(--ink)}

@media (max-width:640px){
  .signup .row{flex-direction:column}
  .signup .row button{width:100%}
  .signup .result{padding:20px}
  .signup .result h2{font-size:25px}
}