.flow-drawer{background:var(--hem-white);color:#111827;border:0;border-radius:12px 0 0 12px;width:min(520px,100vw);max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0 0 0 auto;overflow:hidden}.flow-drawer[open]{animation:flow-drawer-in .32s var(--ease-out);flex-direction:column;display:flex}.flow-drawer.is-closing{animation:flow-drawer-out .22s var(--ease-out) forwards}.flow-drawer::backdrop{backdrop-filter:blur(6px);animation:flow-fade-in .32s var(--ease-out);background:#11182747}.flow-drawer.is-closing::backdrop{animation:flow-fade-out .22s var(--ease-out) forwards}.flow-drawer:focus,.flow-drawer h2:focus{outline:none}@keyframes flow-drawer-in{0%{transform:translate(100%)}}@keyframes flow-drawer-out{to{transform:translate(100%)}}@keyframes flow-fade-in{0%{opacity:0}}@keyframes flow-fade-out{to{opacity:0}}.flow-top{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:16px;padding:18px 18px 18px 32px;display:flex}.flow-steps{align-items:center;gap:10px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.flow-steps li{font-family:var(--font-mono);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--mono-color);white-space:nowrap;align-items:center;gap:8px;font-size:14px;display:flex}.flow-steps li+li:before{content:"";background:var(--border-default);width:20px;height:1px;margin-right:2px}.flow-step-mark{border:1px solid var(--border-default);border-radius:4px;place-items:center;width:24px;height:24px;line-height:1;display:grid}.flow-step-mark svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:13px;height:13px}.flow-steps .is-current{color:#111827}.flow-steps .is-current .flow-step-mark{border-color:var(--hem-deep-purple);background:var(--hem-deep-purple);color:var(--hem-white)}.flow-steps .is-done .flow-step-mark{border-color:var(--hem-light-purple);background:var(--hem-light-purple);color:var(--hem-deep-purple)}.flow-close{color:#211849;cursor:pointer;width:30px;height:30px;transition:background var(--t-fast) var(--ease-out);background:#f3f3f5;border:0;border-radius:4px;flex:none;place-items:center;padding:0;display:grid}.flow-close:hover{background:#e8e8ec}.flow-close svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;width:16px;height:16px}.flow-scroll{overscroll-behavior:contain;flex:1;padding:32px 32px 40px;overflow-y:auto}.flow-scroll h2{font-family:var(--font-display);color:#111827;margin:0 0 8px;font-size:32px;font-weight:500;line-height:1.15}.flow-scroll p.sub{color:#111827;margin:0 0 28px;font-size:16px;line-height:1.55}.flow-back{cursor:pointer;font-family:var(--font-mono);letter-spacing:var(--tracking-meta);text-transform:uppercase;color:var(--mono-color);background:0 0;border:none;margin-bottom:20px;padding:0;font-size:14px}.flow-back:hover{color:#211849}.choose-list{gap:12px;display:grid}.choose-opt{text-align:left;border:1px solid var(--border-subtle);background:var(--hem-white);color:#111827;cursor:pointer;width:100%;transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);border-radius:8px;align-items:center;gap:16px;padding:18px 20px;display:flex}.choose-opt:hover{border-color:var(--hem-deep-purple);background:#2a1f5c08}.choose-icon{background:var(--hem-light-purple);width:42px;height:42px;color:var(--hem-mid-purple);border-radius:8px;flex:none;place-items:center;display:grid}.choose-opt .ct{font-family:var(--font-display);letter-spacing:-.01em;font-size:18px;font-weight:500;display:block}.choose-opt .cs{color:#4d525d;margin-top:2px;font-size:15px;display:block}.flow-form{gap:20px;display:grid}.flow-field{gap:8px;display:grid}.flow-field label{font-family:var(--font-body);color:#111827;font-size:16px;font-weight:600}.flow-field input,.flow-field select,.flow-field textarea{box-sizing:border-box;width:100%;font-family:var(--font-body);color:#111827;background:var(--hem-white);border:1px solid var(--border-default);transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);border-radius:4px;outline:none;padding:11px 14px;font-size:16px}.flow-field textarea{resize:vertical;min-height:120px}.flow-field input[type=file]{padding:10px 12px;font-size:15px}.flow-field input::placeholder,.flow-field textarea::placeholder{color:var(--mono-color)}.flow-field input:focus,.flow-field select:focus,.flow-field textarea:focus{border-color:var(--hem-deep-purple);box-shadow:var(--shadow-focus)}.flow-select{position:relative}.flow-select select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px}.flow-select:after{content:"";pointer-events:none;border-bottom:1.5px solid #111827;border-right:1.5px solid #111827;width:8px;height:8px;margin-top:-6px;position:absolute;top:50%;right:16px;transform:rotate(45deg)}.flow-note{color:#4d525d;margin:0;font-size:14px;line-height:1.5}.flow-sent-icon{background:var(--hem-light-purple);width:54px;height:54px;color:var(--hem-mid-purple);border-radius:999px;place-items:center;margin-bottom:22px;display:grid}.flow-sent-icon svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.flow-foot{background:var(--hem-white);gap:12px;padding:16px 32px 20px;display:grid;position:relative}.flow-foot:before{content:"";background:linear-gradient(180deg, #fff0, var(--hem-white));pointer-events:none;height:48px;position:absolute;bottom:100%;left:0;right:0}.flow-action{border-radius:4px;justify-content:center;width:100%;padding:14px 18px;font-size:16px}.flow-action:hover{color:var(--hem-soft-sand);background:#554c7d}.flow-action:disabled{opacity:.7;cursor:wait}.flow-error{color:#111827;border-left:3px solid var(--hem-magenta);margin:0;padding-left:12px;font-size:14px;font-weight:500;line-height:1.5}@media (width<=720px){.flow-drawer{border-radius:12px 12px 0 0;width:100vw;height:calc(100dvh - 64px);inset:auto 0 0}}@media (width<=720px) and (prefers-reduced-motion:no-preference){.flow-drawer[open]{animation-name:flow-sheet-in}.flow-drawer.is-closing{animation-name:flow-sheet-out}}@keyframes flow-sheet-in{0%{transform:translateY(100%)}}@keyframes flow-sheet-out{to{transform:translateY(100%)}}@media (width<=560px){.flow-top{padding:14px 14px 14px 20px}.flow-scroll{padding:28px 20px 32px}.flow-foot{padding:14px 20px max(16px, env(safe-area-inset-bottom))}.flow-steps li:not(.is-current) .flow-step-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (prefers-reduced-motion:reduce){.flow-drawer[open],.flow-drawer.is-closing,.flow-drawer::backdrop,.flow-drawer.is-closing::backdrop{animation:none}}
