/* Zirva website v10: the closing sign-up asks one question after the email. Design-system pieces only. */

.zj{max-width:640px;margin:32px auto 0}
.zj .lp-join{margin-top:0}
.zj-in{animation:rise2 380ms var(--ease-out) both}
.zj-err{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:var(--type-label-md);color:var(--color-danger)}
.zj-err[hidden]{display:none}
.zj .lp-join input[aria-invalid="true"]{color:var(--color-danger)}

/* step 2: Siz kimsiniz? */
.zj-roles[hidden],.zj-done[hidden],.zj-form[hidden]{display:none}
.zj-q{font:600 28px/34px var(--font-family-display);letter-spacing:-.02em;outline:none}
.zj-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.zj-opts button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:148px;padding:20px 12px 22px;border:0;border-radius:24px;background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken);cursor:pointer;animation:pop 420ms var(--ease-spring) both;transition:transform 120ms var(--ease-out),box-shadow 150ms ease}
.zj-opts button:nth-child(2){animation-delay:70ms}
.zj-opts button:nth-child(3){animation-delay:140ms}
.zj-opts button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--c),inset 0 -5px 0 var(--c)}
.zj-opts button:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--c),inset 0 -2px 0 var(--c)}
.zj-opts .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:28px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);padding-bottom:4px;margin-bottom:10px}
.zj-opts b{font:600 18px/22px var(--font-family-ui)}
.zj-opts small{font:var(--type-body-sm);color:var(--color-text-secondary)}
.zj-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;border:0;background:none;font:var(--type-label-md);color:var(--color-text-secondary);cursor:pointer}
.zj-back:hover{color:var(--color-text)}
@media (max-width:560px){.zj-opts{grid-template-columns:1fr}.zj-opts button{flex-direction:row;min-height:76px;padding:12px 18px 15px 12px;gap:14px;text-align:left}.zj-opts .ic{width:48px;height:48px;font-size:24px;margin:0}.zj-opts button b{display:block}.zj-opts button small{margin-left:auto}}

/* step 3: done */
.zj-done{display:flex;flex-direction:column;align-items:center;text-align:center}
.zj-tick{display:inline-grid}
.zj-done h3{margin-top:18px;font:600 32px/38px var(--font-family-display);letter-spacing:-.02em;outline:none}
.zj-msg{margin-top:8px;font:var(--type-body-lg);color:var(--color-text-secondary);max-width:44ch}
.zj-more{margin-top:14px}

@media (prefers-reduced-motion:reduce){.zj-in,.zj-opts button{animation:none}.zj-opts button{transition:none}}

/* honeypot: off screen, never seen by people */
.zj-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.zj-rerr{margin-top:14px;font:var(--type-label-md);color:var(--color-danger)}
.zj-rerr[hidden],.lp-ferr[hidden]{display:none}
.lp-ferr{display:block;margin-top:18px}
.zj-opts button.zj-wait{opacity:.7}
.zj-opts button[aria-disabled="true"]{pointer-events:none}

/* inside the closing section, beat its general paragraph style */
.zend .zj-q{font:600 28px/34px var(--font-family-display);letter-spacing:-.02em;color:var(--color-text);margin-top:0}
.zend .zj-err,.zend .zj-rerr{font:var(--type-label-md);color:var(--color-danger)}
.zend .zj-msg{margin-top:8px}
.zend .zj-sub{margin-top:14px}