/* The Welcome: a confirmed sign-up dissolves within the form's own footprint. */
.demo{max-width:880px;margin-inline:auto}
.demo-grid{display:block;min-height:0}
.form-side{width:100%}
.form-inner{padding:clamp(32px,5vw,65px) clamp(24px,7vw,86px)}
.form-inner h2{font-size:clamp(54px,7vw,86px)}
.form-intro{max-width:510px}
.form-top,.form-bottom{padding-inline:clamp(24px,7vw,86px)}
.welcome-stage{position:relative;isolation:isolate;max-width:650px;margin:0 auto;min-height:230px}
.welcome-form-shell{position:relative;z-index:2;transform-origin:50% 50%;backface-visibility:hidden}
.welcome-form-shell form{padding:28px 30px 22px;background:#f2f6ee;border:1px solid #cbdaca;box-shadow:0 4px 0 #dce6d9,0 20px 46px #1d40301a}
.welcome-form-shell form .field{position:relative}
.inline-welcome-art{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
#welcome-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.inline-welcome-confirm[hidden]{display:none!important}
.inline-welcome-confirm{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;opacity:0;pointer-events:none}
.inline-welcome-confirm span{font:900 10px Arial;letter-spacing:.14em;color:#69947a}
.inline-welcome-confirm strong{font:400 italic clamp(44px,6vw,72px) Georgia,serif;color:#23583a}
.inline-welcome-confirm p{font-size:14px;color:#728774;margin:0}
.inline-welcome-confirm button{border:1px solid #6c9a76;background:transparent;color:#306b4c;font-weight:900;letter-spacing:.08em;font-size:10px;padding:12px 18px;margin-top:10px;pointer-events:auto}
.inline-welcome-confirm button:hover{background:#e0efe0}
.welcome-stage.is-playing .inline-welcome-art{opacity:1}
.welcome-stage.is-playing .welcome-form-shell{animation:form-disperse 1.2s cubic-bezier(.17,.8,.2,1) both;pointer-events:none}
.welcome-stage.is-playing .inline-welcome-confirm{animation:welcome-inline-arrive .7s ease 1.75s both}
.welcome-stage.is-complete .welcome-form-shell{display:none}
.welcome-stage.is-complete .inline-welcome-confirm{opacity:1;pointer-events:auto}
@keyframes form-disperse{
  0%,9%{opacity:1;transform:scale(1);filter:blur(0)}
  34%{opacity:.93;transform:scale(.985);filter:blur(0)}
  67%{opacity:.32;transform:scale(.94,.88);filter:blur(2px)}
  100%{opacity:0;transform:scale(.82,.78);filter:blur(5px)}
}
@keyframes welcome-inline-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.demo{margin:0 12px}.form-inner{padding:34px 20px}.welcome-form-shell form{padding:23px 17px 17px}}
@media(prefers-reduced-motion:reduce){
.welcome-stage.is-playing .welcome-form-shell{display:none}
.welcome-stage.is-playing .inline-welcome-confirm{opacity:1;transform:none}
}