/* Waitlist landing page - ported from the Graphics Designer's v2/landing.html (keep in sync with that file).
   Loaded after base.css; the rules below the marker are additions that don't change the look. */
html,body{height:100%}
body{min-height:100vh;overflow:hidden;display:flex;flex-direction:column;background:#000;position:relative}
.glow{position:absolute;left:50%;top:44%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,225,255,.10),rgba(0,225,255,.03) 55%,transparent);pointer-events:none}
.wv{position:absolute;left:0;right:0;top:44%;height:240px;transform:translateY(-50%);width:100%;opacity:.22;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.red{position:absolute;left:50%;top:44%;width:min(46vw,620px);height:250px;transform:translate(-50%,-50%);background:#000;box-shadow:0 0 60px 40px #000}
header,footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:28px 44px}
.mono{font-family:'JetBrains Mono',monospace}
.live{font-size:11px;letter-spacing:2px;color:var(--m);display:flex;align-items:center;gap:8px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 10px var(--or);animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.25}}
main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;margin-top:-40px}
.ring{width:96px;height:96px;border-radius:50%;border:3px solid var(--cy);position:relative;box-shadow:0 0 40px rgba(0,225,255,.5),inset 0 0 20px rgba(0,225,255,.25);animation:sp 8s linear infinite}
.ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:repeating-radial-gradient(circle,#0a0a0a 0 2px,#151515 2px 4px)}
.ring:after{content:"";position:absolute;inset:36px;border-radius:50%;background:var(--or);box-shadow:0 0 18px var(--or)}
@keyframes sp{to{transform:rotate(360deg)}}
.ey{margin-top:34px;font-size:12px;letter-spacing:4px;color:var(--cy)}
h1{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(64px,10vw,132px);line-height:.88;text-transform:uppercase;letter-spacing:1px;margin-top:14px}
h1 span{color:transparent;-webkit-text-stroke:1.5px rgba(237,239,243,.55)}
.sub{font-size:17px;color:var(--m);margin-top:20px;max-width:440px;line-height:1.5}
form{margin-top:34px;display:flex;gap:8px;width:100%;max-width:460px;background:#0B0C0F;border:1px solid var(--line);border-radius:12px;padding:6px}
form:focus-within{border-color:rgba(0,225,255,.55);box-shadow:0 0 0 4px rgba(0,225,255,.08)}
input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--t);font:500 15px 'Space Grotesk';padding:0 14px}
input::placeholder{color:#5A5F6A}
button{border:0;cursor:pointer;background:var(--cy);color:#001418;font:700 14px 'Space Grotesk';padding:14px 20px;border-radius:8px;box-shadow:0 0 22px rgba(0,225,255,.35);white-space:nowrap}
.fine{font-size:12px;color:#5A5F6A;margin-top:14px}.fine a{color:var(--m)}
.ok{display:none;margin-top:34px;align-items:center;gap:12px;background:rgba(57,255,136,.06);border:1px solid rgba(57,255,136,.35);border-radius:12px;padding:16px 22px;font-size:15px}
.ok b{color:var(--gr)}
body.done form,body.done .fine{display:none}body.done .ok{display:flex}
footer{font-size:11px;letter-spacing:2px;color:#4A4E58}footer a{color:#4A4E58;text-decoration:none}
@media(max-width:600px){header,footer{padding:22px}.live{display:none}form{flex-direction:column;background:none;border:0;padding:0}form:focus-within{box-shadow:none}input{background:#0B0C0F;border:1px solid var(--line);border-radius:10px;padding:15px}.red{width:70vw}.wv{height:180px}footer{flex-direction:column;gap:8px}}

/* ---- additions (not in the design) ---- */
.fine a{text-decoration:underline} /* base.css removes link underlines; the design shows one */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* bot honeypot, invisible to people */
.err{margin-top:14px;font-size:13px;color:var(--rd)}.err:empty{display:none}
body.done .err{display:none}
@media(max-height:620px){body{overflow:auto}} /* very short screens (landscape phones) can still scroll */