/* sign in, invite, password and payment pages, in the Signal Marketing design system:
   light theme, Instrument Sans text, Unbounded headings, JetBrains Mono labels, pill buttons, 18px cards, 12px inputs */
:root{
  --bg:#F4F4F5;--surface:#FFFFFF;
  --text:#0A0A0A;--text-2:#63636B;--text-rgb:10,10,10;
  --line:rgba(10,10,10,.10);--line-strong:rgba(10,10,10,.26);
  --accent:#DB37D0;--pink:#FD5EF4;
  --shadow:0 24px 60px -28px rgba(0,0,0,.20),0 1px 3px rgba(0,0,0,.05);
  --display:'Unbounded',sans-serif;--body:'Instrument Sans',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --red-ink:#B4232A;--red-soft:#FDEDED;--green-ink:#0B7A58;--green-soft:#E3F6EF;
  /* names the payment page's own styles use */
  --ink:var(--text);--ink-2:var(--text-2);--ink-3:var(--text-2);--line-2:var(--line-strong);--canvas:var(--bg);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:17px/1.55 var(--body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px 16px;overflow-x:hidden}

/* hero background: three drifting pink glows under a 56px grid that fades out */
.au-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.au-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--text-rgb),.09) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--text-rgb),.09) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 96%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 96%)}
.au-bg i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(253,94,244,var(--a)) 0%,rgba(253,94,244,0) 70%)}
.au-bg i:nth-child(1){--a:.32;width:620px;height:620px;left:-180px;top:-220px;animation:drift1 20s ease-in-out infinite alternate}
.au-bg i:nth-child(2){--a:.22;width:520px;height:520px;right:-160px;top:18%;animation:drift2 24s ease-in-out infinite alternate}
.au-bg i:nth-child(3){--a:.16;width:560px;height:560px;left:30%;bottom:-300px;animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(120px,90px)}}
@keyframes drift2{to{transform:translate(-110px,70px)}}
@keyframes drift3{to{transform:translate(80px,-90px)}}

.au{width:100%;max-width:420px}

/* lockup: the star in accent pink, SIGNAL in Unbounded 800 with the one positive tracking, and a mono tag */
.au-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 26px}
.au-logo{width:22px;height:22px;color:var(--accent);display:grid;place-items:center;animation:spin 14s linear infinite}
.au-logo svg{width:100%;height:100%}
.au-word{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.au-tag{font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line);border-radius:999px;padding:.3em .75em;background:var(--surface)}
@keyframes spin{to{transform:rotate(360deg)}}

.au-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px 28px 28px;box-shadow:var(--shadow)}
.au-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:600;font-size:.95rem;color:var(--text-2)}
.au-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.au h1{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1.04;letter-spacing:-.035em;margin:0 0 10px;text-wrap:balance}
.au-sub{margin:0 0 22px;color:var(--text-2);font-size:1rem}
.au-sub b{color:var(--text);font-weight:600}

.au label{display:block;font-size:.9rem;font-weight:500;color:var(--text-2);margin:0 0 7px}
.au input[type=email],.au input[type=password],.au input[type=text]{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:400 16px/1.2 var(--body);color:var(--text);background:var(--bg);margin:0 0 16px;outline:none;transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.au input::placeholder{color:#9A9AA2}
.au input:focus{border-color:var(--pink);background:transparent;box-shadow:0 0 0 3px rgba(253,94,244,.18)}

/* pill button with the long arrow, which slides 4px on hover */
.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;width:100%;padding:.95em 1.5em;margin-top:6px;border:0;border-radius:999px;background:var(--pink);color:#050505;font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;transition:background .2s var(--ease)}
.au-btn:hover{background:#ff7bf7}
.au-btn svg{width:1.4em;height:.7em;transition:transform .3s var(--ease)}
.au-btn:hover svg{transform:translateX(4px)}
.au-btn:focus-visible,.au-demo button:focus-visible,.au-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.au-msg{border-radius:12px;padding:12px 14px;font-size:.92rem;margin:0 0 18px}
.au-msg.bad{background:var(--red-soft);color:var(--red-ink)}
.au-msg.ok{background:var(--green-soft);color:var(--green-ink)}

/* mono label idiom: small uppercase JetBrains Mono */
.au-label{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.au-demo{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;font-size:.92rem;color:var(--text-2)}
.au-demo-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.au-demo-h b{font-weight:600;color:var(--text)}
.au-demo button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:7px 0;border-radius:6px;color:var(--text)}
.au-demo button:hover span:first-child{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

.au-foot{text-align:center;color:var(--text-2);font-size:.9rem;margin-top:18px}
.au-foot a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.au-foot a:hover{text-decoration-color:var(--accent)}

@media (max-width:640px){
  body{padding:28px 16px;align-items:flex-start}
  .au-card{border-radius:14px;padding:26px 20px 22px}
  .au h1{font-size:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  .au-bg i,.au-logo{animation:none}
  .au-btn svg{transition:none}
}