/* Hamid Smart Intake 1.1 — colours, radii and spacing come from design-system tokens only. */

/* ---------- Intro on the page (light) ---------- */
.hd.hd .hd-flow{max-width:820px;margin:auto;padding:var(--space-40) var(--space-18) var(--space-70);text-align:right;font:inherit;color:var(--ink)}
.hd.hd .hd-flow-intro{text-align:center;padding:var(--space-30) 0}
.hd.hd .hd-flow-intro h1{font-size:clamp(28px,4vw,46px);line-height:1.55;margin:var(--space-18) 0;color:var(--ink)}
.hd.hd .hd-flow-intro p{font-size:16px;color:var(--ink-body);line-height:2}
.hd.hd .hd-flow .hd-flow-small{font-size:13px;line-height:1.85;color:var(--ink-muted);margin:var(--space-12) 0}
.hd.hd .hd-flow-eyebrow{font-size:13px!important}
.hd.hd .hd-flow-orb{position:relative;width:100px;height:100px;margin:0 auto var(--space-30);animation:hd-flow-float 6s ease-in-out infinite}
.hd.hd .hd-flow-orb span{position:absolute;inset:8px;background:var(--sage);border-radius:var(--radius-24);transform:rotate(-18deg);box-shadow:var(--shadow-orb-stack)}
.hd.hd .hd-flow-orb span:nth-child(2){inset:32px;border:1px solid var(--on-inverse);background:transparent;box-shadow:none;border-radius:var(--radius-circle);animation:hd-flow-spin 12s linear infinite}
.hd.hd .hd-flow-orb span:nth-child(3){inset:42px;border-radius:var(--radius-circle);background:var(--on-inverse);box-shadow:none}

/* ---------- Buttons (shared) ---------- */
.hd.hd .hd-flow button{font:inherit;cursor:pointer;min-height:48px;touch-action:manipulation}
.hd.hd .hd-flow button:disabled{cursor:wait;opacity:.5}
.hd.hd .hd-flow button:focus-visible,.hd.hd .hd-flow textarea:focus-visible,.hd.hd .hd-flow input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.hd.hd .hd-flow-primary{display:inline-flex;justify-content:center;gap:var(--space-24);align-items:center;padding:var(--space-12) var(--space-28);background:var(--inverse);border:1px solid var(--inverse);border-radius:var(--radius-pill);color:var(--on-inverse);font-size:15px!important;font-weight:700!important;transition:transform .25s var(--ease),background .25s}
.hd.hd .hd-flow-primary:hover{background:var(--inverse-hover);color:var(--on-inverse);transform:translateY(-2px)}

/* ---------- The stage: full screen, dark ---------- */
.hd.hd .hd-flow-dialog{font:inherit;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--inverse-deep);color:var(--on-inverse);overflow:hidden;overscroll-behavior:contain}
.hd.hd .hd-flow-dialog[open]{display:flex;flex-direction:column}
.hd.hd .hd-flow-dialog::backdrop{background:transparent}
.hd.hd .hd-flow-dialog.is-opening{animation:hd-flow-reveal .7s var(--ease) both}
.hd.hd .hd-flow-dialog.is-closing{animation:hd-flow-conceal .45s var(--ease) both}

.hd.hd .hd-flow-top{display:flex;align-items:center;gap:var(--space-18);padding:var(--space-12) var(--space-30);padding-top:max(var(--space-12),env(safe-area-inset-top));font-size:12px;color:var(--on-deep-subtle)}
.hd.hd .hd-flow-brand{flex:1}
.hd.hd .hd-flow-stages{display:flex;gap:var(--space-8);list-style:none;margin:0;padding:0;font-size:12px}
.hd.hd .hd-flow-stages li{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-12);border:1px solid var(--on-deep-line);border-radius:var(--radius-pill);color:var(--on-deep-subtle);transition:background .4s,color .4s,border-color .4s}
.hd.hd .hd-flow-stages li::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:var(--on-deep-line);transition:background .4s}
.hd.hd .hd-flow-stages li.is-current{color:var(--on-inverse);border-color:var(--sage)}
.hd.hd .hd-flow-stages li.is-current::before{background:var(--sage)}
.hd.hd .hd-flow-stages li.is-done{color:var(--on-deep-muted);background:var(--on-deep-fill)}
.hd.hd .hd-flow-stages li.is-done::before{content:"✓";width:auto;height:auto;background:none;color:var(--sage);font-size:11px}
.hd.hd .hd-flow-close{flex:none;border:0!important;background:none!important;color:var(--on-inverse)!important;width:48px;font-size:28px;line-height:1;border-radius:var(--radius-circle)}
.hd.hd .hd-flow-close:hover{background:var(--on-deep-fill)!important}
.hd.hd .hd-flow-progress{height:2px;background:var(--on-deep-line)}
.hd.hd .hd-flow-progress span{display:block;height:100%;width:25%;margin-inline-start:0;background:var(--sage);transition:width .6s var(--ease)}

.hd.hd .hd-flow-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:var(--space-30) var(--space-30)}
.hd.hd .hd-flow-inner{width:100%;max-width:640px;margin:auto}
.hd.hd .hd-flow-counter{font-size:12px;color:var(--on-deep-eyebrow);margin:0 0 var(--space-12)}

/* Orb on the stage: its state follows the form (idle, work, listen, done). */
.hd.hd .hd-flow-stage-orb{--level:0;position:relative;width:76px;height:76px;margin:0 0 var(--space-24);transition:transform .12s linear}
.hd.hd .hd-flow-stage-orb span{position:absolute;inset:6px;background:var(--sage);border-radius:var(--radius-22);transform:rotate(-18deg);transition:transform .5s var(--ease),opacity .4s,border-radius .5s var(--ease)}
.hd.hd .hd-flow-stage-orb span:nth-child(2){inset:24px;background:transparent;border:1px solid var(--inverse-deep);border-radius:var(--radius-circle);animation:hd-flow-spin 12s linear infinite}
.hd.hd .hd-flow-stage-orb span:nth-child(3){inset:32px;background:var(--inverse-deep);border-radius:var(--radius-circle)}
.hd.hd .hd-flow-stage-orb b{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:var(--inverse-deep);opacity:0;transform:scale(.4);transition:opacity .4s .25s,transform .5s .25s var(--ease)}
.hd.hd [data-orb-state=idle] .hd-flow-stage-orb{animation:hd-flow-float 6s ease-in-out infinite}
.hd.hd [data-orb-state=work] .hd-flow-stage-orb span:first-child{animation:hd-flow-breathe 1.6s ease-in-out infinite}
.hd.hd [data-orb-state=work] .hd-flow-stage-orb span:nth-child(2){animation-duration:1.4s}
.hd.hd [data-orb-state=listen] .hd-flow-stage-orb{transform:scale(calc(1 + var(--level) * .6))}
.hd.hd [data-orb-state=listen] .hd-flow-stage-orb span:first-child{border-radius:var(--radius-circle)}
.hd.hd [data-orb-state=done] .hd-flow-stage-orb span:first-child{transform:rotate(0);border-radius:var(--radius-circle)}
.hd.hd [data-orb-state=done] .hd-flow-stage-orb span:nth-child(n+2){opacity:0;transform:scale(.2)}
.hd.hd [data-orb-state=done] .hd-flow-stage-orb b{opacity:1;transform:none}

/* Steps: direction-aware entrance (RTL: forward comes from the left). */
.hd.hd .hd-flow-step.is-in{animation:hd-flow-in-fwd .5s var(--ease) both}
.hd.hd .hd-flow-step.is-in[data-dir=back]{animation-name:hd-flow-in-back}
.hd.hd .hd-flow-step h2{font-size:clamp(26px,3.4vw,40px);line-height:1.5;letter-spacing:-1px;margin:0 0 var(--space-12);color:var(--on-inverse);font-weight:700}
.hd.hd .hd-flow-step h2:focus{outline:none}
.hd.hd .hd-flow-step h2 .hd-w{display:inline-block;animation:hd-flow-word .5s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}
.hd.hd .hd-flow-step p{font-size:15px;line-height:1.9;color:var(--on-deep-muted);margin:0 0 var(--space-20)}
.hd.hd .hd-flow-dialog .hd-flow-small{color:var(--on-deep-subtle)}
.hd.hd .hd-flow-dialog label{display:block;font-size:13px;margin:var(--space-14) 0 var(--space-8);color:var(--on-deep-eyebrow)}
.hd.hd .hd-flow-dialog textarea,.hd.hd .hd-flow-dialog input{display:block;box-sizing:border-box;width:100%;font:inherit;font-size:16px!important;color:var(--on-inverse);border:1px solid var(--on-deep-line);border-radius:var(--radius-16);background:var(--on-deep-fill);padding:var(--space-14) var(--space-16);line-height:1.85;resize:vertical;min-height:54px;max-height:35dvh;transition:border-color .3s,background .3s;box-shadow:none}
.hd.hd .hd-flow-dialog textarea:focus,.hd.hd .hd-flow-dialog input:focus{border-color:var(--sage);background:var(--on-deep-fill)}
.hd.hd .hd-flow-dialog textarea::placeholder,.hd.hd .hd-flow-dialog input::placeholder{color:var(--on-deep-strike);opacity:1;font-size:14px}
.hd.hd #hd-links{direction:ltr;text-align:left;unicode-bidi:plaintext}

.hd.hd .hd-flow-secondary{background:var(--on-deep-fill)!important;border:1px solid var(--on-deep-line)!important;border-radius:var(--radius-pill);color:var(--on-inverse)!important;padding:var(--space-10) var(--space-24);margin-top:var(--space-12)}
.hd.hd .hd-flow-secondary:hover{border-color:var(--sage)!important}
.hd.hd .hd-flow-link{border:0!important;background:transparent!important;color:var(--on-deep-muted)!important;text-decoration:underline;text-underline-offset:5px;padding:var(--space-8);font-size:14px!important}
.hd.hd .hd-flow-link:hover{color:var(--on-inverse)!important}
.hd.hd .hd-flow-dialog .hd-flow-primary{background:var(--sage);border-color:var(--sage);color:var(--inverse-deep)}
.hd.hd .hd-flow-dialog .hd-flow-primary:hover{background:var(--sage-highlight);border-color:var(--sage-highlight);color:var(--inverse-deep)}

/* Summary typed out, need chip */
.hd.hd .hd-flow-summary{background:var(--on-deep-fill);border:1px solid var(--on-deep-line);padding:var(--space-22);border-radius:var(--radius-18);font-size:17px;line-height:2.1;color:var(--on-inverse);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:var(--space-12);min-height:3.5em;cursor:default}
.hd.hd .hd-flow-summary.is-typing::after{content:"";display:inline-block;width:2px;height:1.1em;margin-inline-start:2px;vertical-align:middle;background:var(--sage);animation:hd-flow-caret .8s steps(1) infinite}
.hd.hd .hd-flow-need-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-10);padding:var(--space-8) var(--space-16);margin:0 0 var(--space-12);border-radius:var(--radius-pill);background:var(--sage);color:var(--inverse-deep);font-size:14px;animation:hd-flow-pop .5s var(--ease) both}
.hd.hd .hd-flow-need-chip span{font-size:12px;opacity:.75}

/* Work panel: one row per real task */
.hd.hd .hd-flow-work{animation:hd-flow-in-fwd .4s var(--ease) both}
.hd.hd .hd-flow-work-title{font-size:clamp(22px,3vw,30px);font-weight:700;line-height:1.6;color:var(--on-inverse);margin:0 0 var(--space-20)}
.hd.hd .hd-flow-work ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-10)}
.hd.hd .hd-flow-work li{display:flex;align-items:center;gap:var(--space-14);padding:var(--space-14) var(--space-18);border:1px solid var(--on-deep-line);border-radius:var(--radius-16);background:var(--on-deep-fill);animation:hd-flow-in-fwd .45s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms);transition:border-color .4s}
.hd.hd .hd-flow-work li[data-state=ok]{border-color:var(--sage-ink)}
.hd.hd .hd-flow-work-icon{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-circle);border:2px solid var(--on-deep-line);font-size:12px;color:var(--inverse-deep)}
.hd.hd .hd-flow-work li[data-state=run] .hd-flow-work-icon{border-top-color:var(--sage);animation:hd-flow-spin 1s linear infinite}
.hd.hd .hd-flow-work li[data-state=ok] .hd-flow-work-icon{background:var(--sage);border-color:var(--sage);animation:hd-flow-pop .4s var(--ease) both}
.hd.hd .hd-flow-work li[data-state=ok] .hd-flow-work-icon::before{content:"✓"}
.hd.hd .hd-flow-work li[data-state=fail] .hd-flow-work-icon{border-color:var(--on-deep-strike);color:var(--on-deep-strike)}
.hd.hd .hd-flow-work li[data-state=fail] .hd-flow-work-icon::before{content:"–"}
.hd.hd .hd-flow-work-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--on-inverse)}
.hd.hd .hd-flow-work-label[dir=ltr]{text-align:left}
.hd.hd .hd-flow-work-state{flex:none;font-size:12px;color:var(--on-deep-subtle)}

/* Voice: waveform from the microphone level */
.hd.hd .hd-flow-voice{display:flex;align-items:center;gap:var(--space-12);margin-top:var(--space-12);flex-wrap:wrap}
.hd.hd .hd-flow-voice button{border:1px solid var(--on-deep-line)!important;background:var(--on-deep-fill)!important;padding:var(--space-8) var(--space-18);border-radius:var(--radius-pill);color:var(--on-inverse)!important;font-size:14px}
.hd.hd .hd-flow-voice button:hover{border-color:var(--sage)!important}
.hd.hd .hd-flow-voice button[aria-pressed=true]{background:var(--sage)!important;border-color:var(--sage)!important;color:var(--inverse-deep)!important}
.hd.hd .hd-flow-voice > span{font-size:12px;color:var(--on-deep-subtle);flex:1;min-width:150px}
.hd.hd .hd-flow-wave{display:flex;align-items:center;gap:3px;height:28px}
.hd.hd .hd-flow-wave i{display:block;width:3px;height:100%;border-radius:var(--radius-pill);background:var(--sage);transform:scaleY(.15);transition:transform .08s linear}
.hd.hd .hd-flow-dialog textarea.is-filling{border-color:var(--sage)}

/* Contact: live kind badge */
.hd.hd .hd-flow-contact{position:relative}
.hd.hd .hd-flow-contact input{padding-right:56px}
/* the field is LTR (text starts left), so the badge sits on the right */
.hd.hd .hd-flow-kind{position:absolute;right:var(--space-10);top:50%;transform:translateY(-50%);padding:var(--space-4) var(--space-12);border-radius:var(--radius-pill);font-size:12px;background:var(--on-deep-fill);border:1px solid var(--on-deep-line);color:var(--on-deep-muted);transition:background .3s,color .3s;pointer-events:none}
.hd.hd .hd-flow-kind:empty{display:none}
.hd.hd .hd-flow-kind.is-valid{background:var(--sage);border-color:var(--sage);color:var(--inverse-deep)}

/* Success recap */
.hd.hd .hd-flow-recap{display:grid;gap:var(--space-10);margin:0 0 var(--space-24)}
.hd.hd .hd-flow-recap div{padding:var(--space-14) var(--space-18);border:1px solid var(--on-deep-line);border-radius:var(--radius-16);background:var(--on-deep-fill);animation:hd-flow-in-fwd .5s var(--ease) both;animation-delay:calc(.3s + var(--i,0) * 120ms)}
.hd.hd .hd-flow-recap dt{font-size:12px;color:var(--on-deep-eyebrow);margin:0 0 var(--space-4)}
.hd.hd .hd-flow-recap dd{margin:0;font-size:15px;line-height:1.9;color:var(--on-inverse);white-space:pre-wrap;overflow-wrap:anywhere}

/* Error, bottom bar, privacy */
.hd.hd .hd-flow-error{font-size:14px;color:var(--on-inverse);border-inline-start:3px solid var(--focus);padding:var(--space-12);background:var(--on-deep-fill);margin-top:var(--space-14);border-radius:var(--radius-10)}
/* Fixed action bar: its own surface and a top line, so it reads as a separate panel */
.hd.hd .hd-flow-bottom{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap;box-sizing:border-box;width:100%;margin:0;padding:var(--space-16) max(var(--space-30),calc((100% - 640px) / 2)) var(--space-10);background:var(--inverse-core);border-top:1px solid var(--on-deep-line)}
.hd.hd .hd-flow-bottom [data-next]{flex:1}
.hd.hd .hd-flow-bottom [data-skip]{flex-basis:100%}
.hd.hd .hd-flow-kbd{font-size:11px;color:var(--on-deep-subtle);direction:ltr}
.hd.hd .hd-flow-kbd:empty{display:none}
.hd.hd .hd-flow-privacy{font-size:11px!important;line-height:1.8!important;color:var(--on-deep-subtle)!important;margin:0!important;background:var(--inverse-core);padding:0 max(var(--space-30),calc((100% - 640px) / 2)) max(var(--space-14),env(safe-area-inset-bottom))}

/* Link confirm cards */
.hd.hd .hd-flow-cards{list-style:none;margin:0 0 var(--space-12);padding:0;display:grid;gap:var(--space-10)}
.hd.hd .hd-flow-card{display:flex;gap:var(--space-16);align-items:flex-start;padding:var(--space-16) var(--space-18);border:1px solid var(--on-deep-line);border-radius:var(--radius-18);background:var(--on-deep-fill);animation:hd-flow-in-fwd .45s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms)}
.hd.hd .hd-flow-card-logo{flex:none;width:52px;height:52px;border-radius:var(--radius-13);object-fit:cover;background:var(--on-inverse);display:grid;place-items:center}
.hd.hd .hd-flow-card-logo.is-letter{background:var(--sage);color:var(--inverse-deep);font-size:22px;font-weight:700}
.hd.hd .hd-flow-card div{min-width:0;flex:1}
.hd.hd .hd-flow-card b{display:block;font-size:16px;line-height:1.7;color:var(--on-inverse);overflow-wrap:anywhere}
.hd.hd .hd-flow-card-meta{display:block;font-size:12px;color:var(--on-deep-eyebrow);margin-top:var(--space-4);overflow-wrap:anywhere}
.hd.hd .hd-flow-step .hd-flow-card p{font-size:13px;line-height:1.85;color:var(--on-deep-muted);margin:var(--space-8) 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hd.hd .hd-flow [hidden]{display:none!important}

@keyframes hd-flow-reveal{from{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}to{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%))}}
@keyframes hd-flow-conceal{from{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%))}to{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}}
@keyframes hd-flow-in-fwd{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes hd-flow-in-back{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes hd-flow-word{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes hd-flow-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes hd-flow-breathe{50%{transform:rotate(-18deg) scale(.86)}}
@keyframes hd-flow-caret{50%{opacity:0}}
@keyframes hd-flow-float{50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes hd-flow-spin{to{transform:rotate(360deg)}}

@media(hover:none){.hd.hd .hd-flow-kbd{display:none}}
@media(max-width:800px){
 .hd.hd .hd-flow{padding:var(--space-20) var(--space-18) var(--space-40)}
 .hd.hd .hd-flow-intro{padding:var(--space-20) 0}
 .hd.hd .hd-flow-intro h1{font-size:29px}
 .hd.hd .hd-flow-top{padding-inline:var(--space-14)}
 .hd.hd .hd-flow-brand{display:none}
 .hd.hd .hd-flow-stages{flex:1;gap:var(--space-4)}
 .hd.hd .hd-flow-stages li{padding:var(--space-4) var(--space-8);font-size:11px}
 .hd.hd .hd-flow-content{padding:var(--space-20) var(--space-20)}
 .hd.hd .hd-flow-inner{margin:0 auto auto}
 .hd.hd .hd-flow-stage-orb{width:56px;height:56px;margin-bottom:var(--space-16)}
 .hd.hd .hd-flow-stage-orb span{inset:4px}
 .hd.hd .hd-flow-stage-orb span:nth-child(2){inset:18px}
 .hd.hd .hd-flow-stage-orb span:nth-child(3){inset:24px}
 .hd.hd .hd-flow-step h2{font-size:26px}
 .hd.hd .hd-flow-bottom{padding:var(--space-12) var(--space-20) var(--space-8)}
 .hd.hd .hd-flow-privacy{padding:0 var(--space-20) max(var(--space-12),env(safe-area-inset-bottom))}
 .hd.hd .hd-flow-card-logo{width:44px;height:44px}
 .hd.hd .hd-flow-summary{padding:var(--space-18);font-size:16px}
 .hd.hd .hd-flow-dialog textarea{max-height:30dvh}
}
@media(prefers-reduced-motion:reduce){.hd.hd .hd-flow *,.hd.hd .hd-flow-dialog{animation:none!important;transition:none!important}}