@layer components{.hero-grid{row-gap:calc(var(--spacing,.25rem) * 10);grid-template-columns:minmax(0,1fr);display:grid}.hero-copy{max-width:44rem}.hero-lead{margin-top:calc(var(--spacing,.25rem) * 5)}.hero-ctas{margin-top:calc(var(--spacing,.25rem) * 8)}.hero-proof{gap:calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 5);margin-top:calc(var(--spacing,.25rem) * 8);padding-top:calc(var(--spacing,.25rem) * 5);border-top:1px solid var(--color-border);font-size:var(--text-ui);color:var(--color-ink-2);flex-wrap:wrap;line-height:1.45;display:flex}.hero-proof li{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:inline-flex}.hero-proof svg{color:var(--color-muted)}@media (min-width:48rem){.hero-grid{row-gap:calc(var(--spacing,.25rem) * 12)}}@media (min-width:64rem) and (not (min-width:80rem)){.hero-copy{column-gap:var(--grid-gap);grid-template-columns:repeat(12,minmax(0,1fr));max-width:none;display:grid}.hero-copy>*{grid-column:1/span 6}.hero-lead{grid-area:1/7/span 2/span 6;align-self:end;margin-top:0;margin-bottom:.15em}.hero-ctas{grid-row:3;align-self:start}.hero-proof{padding-top:calc(var(--spacing,.25rem) * 4);flex-direction:column;grid-area:3/7/auto/span 6;gap:6px}}@media (min-width:80rem){.hero-grid{column-gap:var(--grid-gap);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}.hero-copy{grid-column:span 5;max-width:none}.hero-visual{grid-column:span 7}.hero-lead{margin-top:calc(var(--spacing,.25rem) * 6)}.hero-proof{flex-direction:column;gap:6px}}.hero-run{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-frame);box-shadow:var(--shadow-surface);--hero-axis:27px;--hero-head-y:25px;--hero-gy:calc(var(--spacing,.25rem) * 5);--hero-gx:calc(var(--spacing,.25rem) * 10);--hero-flow:.48s;margin:0;position:relative;overflow:clip;container:hero-run/inline-size}.hero-run-bar{align-items:center;gap:calc(var(--spacing,.25rem) * 3);min-height:calc(var(--spacing,.25rem) * 13);padding:calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 2.5) calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 4);border-bottom:1px solid var(--color-border);display:flex}.hero-run-title{align-items:center;gap:calc(var(--spacing,.25rem) * 2);min-width:0;font-size:var(--text-ui);flex:auto;line-height:1.3;display:flex}.hero-run-mark{border-radius:var(--radius-sm);background:var(--color-tech);width:24px;height:24px;color:var(--color-on-tech);flex:none;justify-content:center;align-items:center;display:inline-flex}.hero-run-name{color:var(--color-ink);white-space:nowrap;font-weight:600}.hero-run-sub{min-width:0;color:var(--color-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-run-sub:before{content:"·";margin-inline-end:.45em}.hero-run-tools{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex:none;display:flex}.hero-control{min-width:calc(var(--spacing,.25rem) * 9);min-height:calc(var(--spacing,.25rem) * 8);padding:0 calc(var(--spacing,.25rem) * 3);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);font-size:var(--text-ui);white-space:nowrap;transition:background-color var(--duration-button) var(--ease-out), border-color var(--duration-button) var(--ease-out);place-items:center;font-weight:500;line-height:1.25;display:inline-grid}.hero-control-face{align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);visibility:hidden;grid-area:1/1;display:inline-flex}.hero-control-face[data-on]{visibility:inherit}.hero-control:hover{background:var(--color-canvas);border-color:var(--color-border-input)}.hero-control:active{translate:0 1px}@media (pointer:coarse){.hero-control{min-width:44px;min-height:44px}}.hero-control:not([data-ready]){visibility:hidden}@media (prefers-reduced-motion:reduce){.hero-control{display:none}}.hero-canvas{padding:calc(var(--spacing,.25rem) * 3);background-color:var(--color-canvas);background-position:10px 10px;position:relative}.hero-graph{flex-direction:column;display:flex;position:relative}.hero-stage{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);min-width:0;transition:background-color .36s var(--ease-out), border-color var(--duration-demo) var(--ease-out), box-shadow var(--duration-demo) var(--ease-out);padding:10px 12px 12px;position:relative;container:hero-stage/inline-size}.hero-stage-head{align-items:center;gap:calc(var(--spacing,.25rem) * 2);min-height:28px;display:flex}.hero-stage-icon{border-radius:var(--radius-sm);background:var(--color-quiet);width:28px;height:28px;color:var(--color-ink-2);transition:background-color var(--duration-demo) var(--ease-out), color var(--duration-demo) var(--ease-out);flex:none;justify-content:center;align-items:center;display:inline-flex}.hero-stage[data-stage=ai] .hero-stage-icon{background:var(--color-ai-soft);color:var(--color-ai)}.hero-stage[data-stage=approval] .hero-stage-icon{background:var(--color-review-soft);color:var(--color-review)}.hero-stage[data-stage=notify][data-state=done] .hero-stage-icon{background:var(--color-success-soft);color:var(--color-success)}.hero-stage-title{min-width:0;font-size:var(--text-ui);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:baseline;gap:6px;font-weight:600;line-height:1.3;display:flex;overflow:hidden}.hero-stage-index{font-family:var(--font-mono);font-size:var(--text-ui-sm);color:var(--color-muted);font-weight:450}@container hero-stage not (min-width:17rem){.hero-stage-index{display:none}}.hero-pills{flex:none;justify-items:end;display:inline-grid}.hero-pill{visibility:hidden;grid-area:1/1;display:inline-flex}.hero-stage[data-state=queued] .hero-pill[data-for=queued],.hero-stage[data-state=active] .hero-pill[data-for=active],.hero-stage[data-state=done] .hero-pill[data-for=done]{visibility:inherit}.hero-stage:not([data-state=active]) .hero-pill[data-for=active] *{animation:none!important}.hero-stage-body{font-size:var(--text-ui);color:var(--color-ink-2);margin-top:10px;line-height:1.45}.hero-stage[data-state=queued]{background-color:var(--color-canvas)}.hero-stage[data-state=queued] .hero-stage-icon{background:var(--color-quiet);color:var(--color-muted)}.hero-val{background-image:linear-gradient(var(--color-quiet), var(--color-quiet));transition:color .36s var(--ease-out), background-size .36s var(--ease-out);background-position:100%;background-repeat:no-repeat;background-size:0 .75em}.hero-stage[data-state=queued] .hero-val{color:#0000;background-size:100% .75em}.hero-stage[data-state=active] .hero-val{animation:hero-val .3s var(--ease-out) both;animation-delay:calc(var(--i,0) * .14s + .2s)}.hero-after{transition:opacity .36s var(--ease-out), visibility .36s var(--ease-out)}.hero-stage[data-state=queued] .hero-after{opacity:0;visibility:hidden}.hero-stage[data-state=active] .hero-after{animation:hero-after .26s var(--ease-out) both;animation-delay:calc(var(--i,0) * .3s + .2s)}.hero-stage[data-state=active]{border-color:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink), var(--shadow-md)}.hero-stage[data-stage=ai][data-state=active]{border-color:var(--color-ai);box-shadow:0 0 0 1px var(--color-ai), var(--shadow-md)}.hero-stage[data-stage=approval][data-state=active]{border-color:var(--color-review-solid);box-shadow:0 0 0 1px var(--color-review-solid), var(--shadow-md)}.hero-stage[data-state=active] .hero-in{animation:hero-in .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * .14s + 80ms)}.hero-time{font-family:var(--font-mono);font-size:var(--text-mono);color:var(--color-muted);white-space:nowrap;flex:none;font-weight:450}.hero-mono,.hero-mono-sm{font-family:var(--font-mono);font-size:var(--text-mono);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:450}.hero-mail{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.hero-mail-sender{color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;align-self:stretch;font-weight:600;overflow:hidden}.hero-mail-line{justify-content:space-between;align-self:stretch;gap:calc(var(--spacing,.25rem) * 2);display:flex}.hero-mail-subject{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.hero-attach{border-radius:var(--radius-sm);background:var(--color-quiet);max-width:100%;color:var(--color-ink-2);transition:background-color var(--duration-demo) var(--ease-out), box-shadow var(--duration-demo) var(--ease-out);align-items:center;gap:6px;margin-top:8px;padding:3px 8px;display:inline-flex}.hero-graph:has(.hero-stage[data-stage=ai][data-state=active]) .hero-attach{background:var(--color-ai-soft);box-shadow:inset 0 0 0 1px #315e9173}@supports (color:color-mix(in lab, red, red)){.hero-graph:has(.hero-stage[data-stage=ai][data-state=active]) .hero-attach{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-ai) 45%, transparent)}}.hero-attach-name{font-family:var(--font-mono);font-size:var(--text-mono);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-attach-meta{color:var(--color-muted);white-space:nowrap;flex:none}.hero-fields{flex-direction:column;display:flex}.hero-field{justify-content:space-between;align-items:baseline;gap:calc(var(--spacing,.25rem) * 3);border-left:2px solid #315e9173;padding:2px 0 2px 10px;display:flex}@supports (color:color-mix(in lab, red, red)){.hero-field{border-left:2px solid color-mix(in oklab, var(--color-ai) 45%, transparent)}}.hero-field dt{color:var(--color-muted);white-space:nowrap;flex:none}.hero-field dd{min-width:0;color:var(--color-ink);text-align:right;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-field[data-strong]{background-image:linear-gradient(var(--color-border), var(--color-border));background-repeat:no-repeat;background-size:100% 1px;margin-top:3px;padding-top:5px}.hero-field[data-strong] dd{font-weight:600}.hero-stage[data-state=queued] .hero-field{border-left-color:var(--color-border)}.hero-stage[data-state=active] .hero-field{animation:hero-find .42s var(--ease-out) both;animation-delay:calc(var(--i,0) * .14s + .12s)}.hero-ai-foot{justify-content:space-between;align-items:center;gap:2px calc(var(--spacing,.25rem) * 3);border-top:1px solid var(--color-border);color:var(--color-muted);flex-wrap:wrap;margin-top:10px;padding-top:8px;display:flex}.hero-stage[data-state=active] .hero-ok.hero-after{animation-delay:1.3s}.hero-ai-source{align-items:center;gap:6px;min-width:0;display:inline-flex}.hero-ai-source .hero-mono-sm{text-overflow:ellipsis;overflow:hidden}.hero-ai-page{white-space:nowrap;flex:none}.hero-ok{color:var(--color-success);white-space:nowrap;align-items:center;gap:4px;font-weight:500;display:inline-flex}.hero-rec{flex-direction:column;gap:4px;display:flex}.hero-rec-head{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}.hero-rec-label{color:var(--color-muted);white-space:nowrap}.hero-rec-id{font-family:var(--font-mono);font-size:var(--text-mono);color:var(--color-ink);white-space:nowrap;font-weight:500}.hero-rec-sum{justify-content:space-between;gap:0 calc(var(--spacing,.25rem) * 3);flex-wrap:wrap;display:flex}.hero-rec-customer{color:var(--color-ink)}.hero-rec-total{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);white-space:nowrap;display:inline-flex}.hero-rec-amount{color:var(--color-ink)}.hero-rec-sep{color:var(--color-muted)}.hero-approval{flex-direction:column;gap:4px;display:flex}.hero-rule{color:var(--color-ink-2)}.hero-checks{gap:2px calc(var(--spacing,.25rem) * 4);flex-wrap:wrap;display:flex}.hero-checks li{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.hero-checks .hero-after{color:var(--color-success);font-weight:500}.hero-stage[data-state=active] .hero-checks .hero-after{animation-delay:calc(var(--i,0) * .25s + .15s)}.hero-tick{flex:none;display:inline-grid}.hero-tick>svg{grid-area:1/1}.hero-tick-ok{color:var(--color-success)}.hero-tick-wait{color:var(--color-muted);opacity:0}.hero-stage[data-state=queued] .hero-tick-wait{opacity:1}.hero-stage[data-state=queued] .hero-tick-ok{opacity:0}.hero-stage[data-state=active] :is(.hero-tick-ok,.hero-tick-wait){animation:hero-tick .26s var(--ease-out) both;animation-delay:calc(var(--i,0) * .25s + .15s)}.hero-stage[data-state=active] .hero-tick-wait{animation-name:hero-untick}.hero-approval-slot{margin-top:6px;display:grid}.hero-approval-slot>*{grid-area:1/1}.hero-approval-actions,.hero-approval-result{transition:opacity var(--duration-demo) var(--ease-out), visibility var(--duration-demo) var(--ease-out)}.hero-approval-actions{justify-content:flex-end;gap:6px;display:flex}.hero-fake-btn{border-radius:var(--radius-control);white-space:nowrap;align-items:center;gap:6px;height:32px;padding:0 12px;font-weight:500;display:inline-flex}.hero-fake-btn[data-variant=ghost]{color:var(--color-ink-2)}.hero-fake-btn[data-variant=primary]{background:var(--color-brand);color:var(--color-brand-on);box-shadow:var(--shadow-xs);transition:background-color var(--duration-button) var(--ease-out), scale var(--duration-button) var(--ease-out), box-shadow var(--duration-button) var(--ease-out)}.hero-stage[data-state=queued] .hero-approve{background:var(--color-quiet);color:var(--color-muted);box-shadow:none}.hero-stage[data-sub=approving] .hero-approve{background:var(--color-brand-hover);box-shadow:0 0 0 3px var(--color-brand-soft);scale:.96}.hero-approval-result{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-control);background:var(--color-quiet);min-height:32px;color:var(--color-ink);opacity:0;visibility:hidden;padding:0 10px;display:flex}.hero-approval-result svg{color:var(--color-review)}.hero-approval-who{flex:auto;min-width:0;font-weight:500}.hero-stage[data-state=done] .hero-approval-actions{opacity:0;visibility:hidden}.hero-stage[data-state=done] .hero-approval-result{opacity:1;visibility:visible}.hero-out{flex-direction:column;gap:8px;display:flex}.hero-out li{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 2);display:flex}.hero-out li>svg{color:var(--color-ink-2);margin-top:2px}.hero-out-text{flex-direction:column;flex:auto;min-width:0;display:flex}.hero-out-title{color:var(--color-ink);font-weight:500}.hero-out-sub{color:var(--color-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-conn{height:var(--hero-gy);flex:none;position:relative}.hero-conn>span{display:block;position:absolute}.hero-conn-line,.hero-conn-fill{top:0;bottom:0;left:calc(var(--hero-axis) - .75px);border-radius:1px;width:1.5px}.hero-conn-line{background:var(--color-border-strong)}.hero-conn-fill{background:var(--color-brand);transform-origin:50% 0;transition:scale var(--hero-flow) var(--ease-in-out);scale:1 0}.hero-conn[data-state=idle] .hero-conn-fill{transition:none}.hero-conn:is([data-state=flowing],[data-state=done]) .hero-conn-fill{scale:1}.hero-conn-head{left:calc(var(--hero-axis) - 3.5px);border-right:1.5px solid var(--color-border-strong);border-bottom:1.5px solid var(--color-border-strong);width:7px;height:7px;transition:border-color var(--duration-demo) var(--ease-out);bottom:2px;rotate:45deg}.hero-conn[data-state=done] .hero-conn-head{border-color:var(--color-brand)}.hero-token{top:0;left:var(--hero-axis);background:var(--color-ink);width:8px;height:8px;box-shadow:0 0 0 2px var(--color-canvas);opacity:0;border-radius:2px;margin:-4px 0 0 -4px}.hero-conn[data-state=flowing] .hero-token{animation:hero-token-y var(--hero-flow) var(--ease-in-out) forwards}.hero-run-foot{align-items:center;gap:calc(var(--spacing,.25rem) * 3);min-height:44px;padding:calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 4);border-top:1px solid var(--color-border);font-size:var(--text-ui);color:var(--color-ink-2);line-height:1.3;display:flex}.hero-progress{flex:none;gap:3px;display:inline-flex}.hero-progress-seg{background:var(--color-border);width:14px;height:4px;transition:background-color var(--duration-demo) var(--ease-out);border-radius:2px}.hero-progress-seg[data-state=active]{background:var(--color-ink)}.hero-progress-seg[data-state=done]{background:var(--color-success)}.hero-run-status{align-items:center;gap:calc(var(--spacing,.25rem) * 2);white-space:nowrap;flex:auto;min-width:0;display:flex;overflow:hidden}.hero-run-paused{color:var(--color-ink);flex:none;font-weight:600}.hero-run-paused:after{content:"·";color:var(--color-muted);margin-inline-start:calc(var(--spacing,.25rem) * 2);font-weight:400}.hero-run-step{color:var(--color-ink);flex:none;font-weight:600}.hero-run-now{min-width:0;color:var(--color-muted);text-overflow:ellipsis;overflow:hidden}.hero-run-done{color:var(--color-success);align-items:center;gap:6px;font-weight:500;display:inline-flex}.hero-run-journey{font-family:var(--font-mono);font-size:var(--text-mono);color:var(--color-muted);white-space:nowrap;flex:none}.hero-run[data-held] *,.hero-run[data-held] :before,.hero-run[data-held] :after{animation-play-state:paused!important}@container hero-run not (min-width:30rem){.hero-run-mark,.hero-run-sub,.hero-control-label,.hero-run-journey,.hero-run-step{display:none}.hero-control{padding:0}.hero-run-bar{padding-inline-start:calc(var(--spacing,.25rem) * 3)}.hero-run-foot{padding-inline:calc(var(--spacing,.25rem) * 3)}}@container hero-run not (min-width:41rem){.hero-graph{--hero-gy:calc(var(--spacing,.25rem) * 4)}.hero-canvas{padding:calc(var(--spacing,.25rem) * 2.5)}.hero-stage{padding:8px 12px 10px}.hero-stage-body{margin-top:8px}.hero-field[data-wide],.hero-ai-foot,.hero-rec-customer,.hero-out-sub{display:none}.hero-attach{margin-top:6px}}@container hero-run not (min-width:19rem){.hero-graph{--hero-axis:25px}.hero-stage{padding-inline:10px}.hero-stage-head,.hero-mail-line{gap:6px}.hero-pill svg{display:none}}@container hero-run (min-width:41rem){.hero-canvas{padding:calc(var(--spacing,.25rem) * 5)}.hero-graph{grid-template-columns:minmax(0, 1fr) var(--hero-gx) minmax(0, 1fr);row-gap:var(--hero-gy);grid-template-areas:"email c1 ai""erp c2 ai""approval c4 notify";display:grid}.hero-stage[data-stage=email]{grid-area:email}.hero-stage[data-stage=ai]{grid-area:ai}.hero-stage[data-stage=erp]{grid-area:erp}.hero-stage[data-stage=approval]{grid-area:approval}.hero-stage[data-stage=notify]{grid-area:notify}.hero-conn[data-conn="1"]{grid-area:c1}.hero-conn[data-conn="2"]{grid-area:c2}.hero-conn[data-conn="4"]{grid-area:c4}.hero-conn[data-conn="3"]{height:var(--hero-gy);margin-bottom:calc(-1 * var(--hero-gy));grid-area:erp;align-self:end}.hero-conn:not([data-conn="3"]){height:auto}.hero-conn:not([data-conn="3"]) :is(.hero-conn-line,.hero-conn-fill){top:calc(var(--hero-head-y) - .75px);width:auto;height:1.5px;bottom:auto;left:0;right:0}.hero-conn:not([data-conn="3"]) .hero-conn-fill{transform-origin:0;scale:0 1}.hero-conn[data-conn="2"] .hero-conn-fill{transform-origin:100%}.hero-conn:not([data-conn="3"]):is([data-state=flowing],[data-state=done]) .hero-conn-fill{scale:1}.hero-conn:not([data-conn="3"]) .hero-conn-head{top:calc(var(--hero-head-y) - 3.5px);bottom:auto;left:auto;right:2px;rotate:-45deg}.hero-conn[data-conn="2"] .hero-conn-head{left:2px;right:auto;rotate:135deg}.hero-conn:not([data-conn="3"]) .hero-token{top:var(--hero-head-y);left:0}.hero-conn:not([data-conn="3"])[data-state=flowing] .hero-token{animation-name:hero-token-x}.hero-conn[data-conn="2"][data-state=flowing] .hero-token{animation-name:hero-token-x-back}}@keyframes hero-in{0%{opacity:.35;translate:0 3px}to{opacity:1;translate:0}}@keyframes hero-val{0%{color:#0000;background-size:100% .75em}}@keyframes hero-after{0%{opacity:0;visibility:hidden}}@keyframes hero-tick{0%{opacity:0;scale:.6}to{opacity:1;scale:1}}@keyframes hero-untick{0%{opacity:1}to{opacity:0}}@keyframes hero-find{0%{border-left-color:var(--color-border);background-color:#0000}35%{border-left-color:var(--color-ai);background-color:var(--color-ai-soft)}to{border-left-color:color-mix(in oklab, var(--color-ai) 45%, transparent);background-color:#0000}}@keyframes hero-token-y{0%{opacity:0;top:0%}15%,85%{opacity:1}to{opacity:0;top:100%}}@keyframes hero-token-x{0%{opacity:0;left:0%}15%,85%{opacity:1}to{opacity:0;left:100%}}@keyframes hero-token-x-back{0%{opacity:0;left:100%}15%,85%{opacity:1}to{opacity:0;left:0%}}}