@font-face{font-family:Switzer;src:url('/assets/switzer.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Sentient;src:url('/assets/sentient.woff2') format('woff2');font-weight:200 700;font-display:swap}
:root{--forest:#0a3b28;--cream:#fbfaf3;--lime:#e2ff70;--sage:#cfe5c4;--ink:#072a1c;--error:#ffcaa4;--muted:#b9c9ba;--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark;font-family:Switzer,system-ui,sans-serif;background:var(--forest);color:var(--cream);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100svh;position:relative;isolation:isolate}
.signup{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 24px 100px;position:relative;z-index:1}
.logo{width:min(340px,65vw);height:auto;display:block;margin-bottom:68px}
.invitation{width:min(100%,580px);text-align:center}
h1,h2{font-family:Sentient,Georgia,serif;font-weight:360;letter-spacing:-.045em;line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(44px,5.8vw,72px)}
.full-stop{color:var(--lime)}
.intro{font-size:17px;line-height:1.6;margin:20px 0 38px;color:var(--sage);text-wrap:pretty}
form{text-align:left}
label{display:block;font-size:13px;font-weight:500;margin:0 0 10px 4px}
.form-row{display:flex;gap:8px;background:var(--cream);padding:8px;border-radius:22px;box-shadow:0 8px 28px #072a1c18}
input,button{font:inherit;min-height:56px;border:0;border-radius:14px}
input{width:100%;min-width:0;background:var(--cream);color:var(--ink);padding:0 16px;font-size:16px;caret-color:var(--forest)}
input::placeholder{color:#667467;opacity:1}
button{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:22px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:600;padding:0 22px;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
button:hover{background:var(--sage)}
button:hover svg{transform:translateX(3px)}
button:active{transform:scale(.96)}
button:disabled{cursor:wait;opacity:.75}
input:focus-visible{outline:2px solid var(--forest);outline-offset:-3px}
button:focus-visible{outline:3px solid var(--forest);outline-offset:-5px}
input[aria-invalid='true']{outline:2px solid var(--forest);outline-offset:-3px}
.message{color:var(--error);font-size:14px;line-height:1.5;margin:0;min-height:24px;padding-top:8px;text-align:center}
.message:empty{padding:0}
.consent{text-align:center;color:var(--muted);font-size:12px;line-height:1.6;margin:12px 0 0;text-wrap:pretty}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.success{padding:12px 0 24px;outline:none}
.success-bloom{position:relative;width:76px;height:76px;margin:0 auto 24px}
.success-bloom img{display:block;width:100%;height:100%;object-fit:contain}
.success:not([hidden]) .success-bloom img{animation:flower-pop .7s cubic-bezier(.22,1,.36,1) both}
.success:not([hidden]) h2{animation:welcome-in .45s .14s cubic-bezier(.22,1,.36,1) both}
.success:not([hidden]) p{animation:welcome-in .45s .22s cubic-bezier(.22,1,.36,1) both}
.sprinkle{position:absolute;left:50%;top:50%;width:5px;height:11px;border-radius:4px;background:var(--lime);opacity:0;pointer-events:none}
.sprinkle--one{--x:-65px;--y:-28px;--turn:-35deg}.sprinkle--two{--x:-32px;--y:-65px;--turn:20deg}.sprinkle--three{--x:35px;--y:-62px;--turn:65deg}.sprinkle--four{--x:66px;--y:-14px;--turn:40deg}.sprinkle--five{--x:50px;--y:52px;--turn:-25deg}
.success:not([hidden]) .sprinkle{animation:sprinkle-out .7s .08s cubic-bezier(.22,1,.36,1) both}
@keyframes flower-pop{0%{opacity:0;transform:scale(.3) rotate(-24deg)}45%{opacity:1;transform:scale(1.16) rotate(10deg)}70%{transform:scale(.95) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes welcome-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes sprinkle-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--turn)) scale(.6)}}
.success h2{font-size:36px}
.success p{color:var(--sage);font-size:17px;margin:12px 0 0}
.organic{position:absolute;z-index:0;bottom:0;left:0;width:100%;height:25px;background:var(--lime);border-radius:65% 90% 0 0 / 100% 100% 0 0;pointer-events:none}
[hidden]{display:none!important}
@media(max-width:600px){.signup{padding:56px 24px 72px}.logo{margin-bottom:56px;width:240px;max-width:75vw}h1{font-size:46px}.intro{font-size:16px;max-width:240px;margin:18px auto 32px}.form-row{flex-direction:column;gap:6px;padding:8px;border-radius:24px}input,button{min-height:56px;border-radius:16px}button{justify-content:space-between;padding-inline:20px}.consent{max-width:270px;margin:14px auto 0}.desktop-break{display:none}.organic{height:18px}}
@media(prefers-reduced-motion:reduce){button,button svg{transition:none}button:active,button:hover svg{transform:none}}

@media(prefers-reduced-motion:reduce){.success:not([hidden]) .success-bloom img,.success:not([hidden]) h2,.success:not([hidden]) p,.success:not([hidden]) .sprinkle{animation:none}}