/* Decorative vector scenes consume the shared palette and motion lifecycle. */
.sf-scene-art{display:block;width:100%;height:auto;overflow:visible;stroke-width:1.8}
.sf-scene-art-halo{fill:var(--sf-scene-wash,var(--sf-theme-raised));stroke:none}
.sf-scene-gradient-start{stop-color:var(--sf-theme-accent);stop-opacity:.22}
.sf-scene-gradient-end{stop-color:var(--sf-theme-accent);stop-opacity:.025}
.sf-scene-art-panel{fill:var(--sf-theme-surface);stroke:var(--sf-theme-control-border)}
.sf-scene-art-soft{fill:var(--sf-theme-hover);stroke:var(--sf-theme-border)}
.sf-scene-art-rule{stroke:var(--sf-theme-control-border);stroke-width:2.5}
.sf-scene-art-grid{stroke:var(--sf-theme-border);stroke-width:1}
.sf-scene-art-ink{stroke:var(--sf-theme-text)}
.sf-scene-art-accent,.sf-scene-art-check,.sf-scene-art-progress,.sf-scene-art-chart-line{stroke:var(--sf-theme-accent);stroke-width:3}
.sf-scene-art-accent-fill{fill:var(--sf-theme-accent);stroke:none}
.sf-scene-art-on-accent{stroke:var(--sf-theme-surface);stroke-width:2}
.sf-scene-art-sparks{stroke:var(--sf-theme-accent);opacity:.5}
.sf-scene-art-route{stroke:var(--sf-theme-accent);stroke-dasharray:4 7;opacity:.65}
.sf-scene-art-chart-line{stroke:var(--sf-theme-text)}
.sf-scene-art-scene{position:relative;padding:1.25rem;isolation:isolate;border:1px solid var(--sf-theme-border);border-radius:1.75rem;background:linear-gradient(145deg,var(--sf-theme-surface),color-mix(in srgb,var(--sf-theme-raised) 55%,transparent));box-shadow:inset 0 1px color-mix(in srgb,var(--sf-theme-text) 5%,transparent)}
.sf-scene-art-scene:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 85% 15%,color-mix(in srgb,var(--sf-theme-accent) 12%,transparent),transparent 60%)}
.sf-hero-art .sf-scene-art-panel{filter:drop-shadow(0 5px 5px color-mix(in srgb,var(--sf-theme-text) 7%,transparent))}
.sf-scene-art-map{fill:var(--sf-theme-raised);stroke:var(--sf-theme-control-border)}
.sf-scene-art-street{stroke:var(--sf-theme-surface);stroke-width:8}
.sf-scene-art-courier{fill:var(--sf-theme-accent);stroke:var(--sf-theme-surface);stroke-width:2;opacity:0;offset-rotate:0deg;offset-distance:0%}
.sf-preview-chart-tracker{fill:var(--sf-theme-accent);stroke:var(--sf-public-preview-text,#fff);stroke-width:1.5;opacity:0;offset-rotate:0deg;offset-distance:0%}
.sf-hero-art{width:min(100%,29rem);margin:0 auto}
.sf-article-illustration{margin:2rem auto;max-width:27rem}
.sf-page-hero.sf-hero--illustrated>.sf-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:2.5rem}
.sf-hero--illustrated .sf-head{margin:0;max-width:none;text-align:left}
.sf-hero--illustrated .sf-head .sf-actions{justify-content:flex-start}
.sf-hero--illustrated .sf-contact-channels{grid-column:1/-1}
.sf-preview-scene{max-width:19rem;margin:.5rem auto -.25rem}
.sf-preview-scene .sf-scene-art{max-height:9rem}
.sf-flow-illustration{display:block;width:100%;max-width:12rem;margin:0 auto .5rem}
.sf-flow-illustration .sf-scene-art{max-height:7.5rem}
.sf-workflow-demo .sf-flow li{padding:0;overflow:visible}
.sf-workflow-demo .sf-flow .sf-story-select{gap:.25rem}
.sf-workflow-demo .sf-flow li:after{display:none}
.sf-workflow-demo .sf-flow .sf-story-select:after{content:'';display:block;align-self:end;width:100%;height:3px;margin-top:.65rem;border-radius:2px;background:var(--sf-theme-border);transition:background var(--sf-motion-story) var(--sf-motion-ease)}
.sf-workflow-demo .sf-flow li.is-story-current .sf-story-select:after{background:var(--sf-theme-accent)}
.sf-content-demo-heading{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;color:var(--sf-theme-muted);font-size:.8125rem}
.sf-content-demo-heading .sf-scene-art{width:7.5rem;flex:none}
.sf-content-demo-heading strong{display:block;color:var(--sf-theme-text);font-size:1rem;margin-bottom:.3rem}
.sf-demo-caption [hidden]{display:none!important}
@keyframes sf-scene-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sf-scene-art-send{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(13px,-9px) rotate(3deg)}}
@keyframes sf-scene-art-lead{0%,10%,100%{transform:translateX(0)}35%,45%{transform:translateX(67px)}70%,80%{transform:translateX(134px)}}
@keyframes sf-scene-art-sign{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-7px,3px) rotate(-7deg)}}
@keyframes sf-scene-art-bars{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1)}}
@keyframes sf-scene-art-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes sf-scene-art-route{to{stroke-dashoffset:-22}}
@keyframes sf-scene-art-write{0%,10%{stroke-dashoffset:1;opacity:.4}40%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.4}}
@keyframes sf-scene-art-row{0%,75%,100%{box-shadow:none}35%{box-shadow:inset 3px 0 color-mix(in srgb,var(--sf-theme-accent) 60%,var(--sf-public-preview-text,#fff))}}
@keyframes sf-scene-art-delivery{0%{offset-distance:0%;opacity:0}12%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes sf-scene-art-pin{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-7px)}}
@keyframes sf-scene-art-page{0%,20%,100%{transform:scaleX(1)}55%{transform:scaleX(.06)}75%{transform:scaleX(1)}}
@keyframes sf-scene-art-person{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes sf-scene-art-plan{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sf-scene-art-plan-coin{0%,12%,100%{transform:translate(0,0)}38%{transform:translate(82px,-42px) rotate(180deg)}48%{transform:translate(82px,-34px) rotate(180deg)}72%{transform:translate(164px,-76px) rotate(360deg)}82%{transform:translate(164px,-68px) rotate(360deg)}}
@keyframes sf-scene-art-envelope{0%,15%,100%{transform:translate(0,0) rotate(-5deg);opacity:1}45%{transform:translate(80px,-23px) rotate(5deg);opacity:1}60%,75%{transform:translate(92px,-23px) rotate(5deg);opacity:0}}
@keyframes sf-scene-art-answer{0%,100%{transform:translateY(4px);opacity:.65}35%,75%{transform:translateY(-5px);opacity:1}}
@keyframes sf-scene-art-curtain{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.35)}}
@keyframes sf-scene-art-sound{0%,100%{opacity:.2;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes sf-scene-art-ticket{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-7px,-8px) rotate(3deg)}}
@media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-courier{animation:sf-scene-art-delivery 7s linear infinite}
  html:not([data-motion=off]) .sf-preview[data-preview-ambient] .sf-preview-chart .sf-preview-chart-tracker{animation:sf-scene-art-delivery 9s linear 1.5s infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-pin{animation:sf-scene-art-pin 4s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-pin--late{animation-delay:-2s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-page{transform-box:fill-box;transform-origin:right center;animation:sf-scene-art-page 8s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-person,.sf-scene-art-sprout){transform-box:fill-box;transform-origin:bottom center;animation:sf-scene-art-person 5s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-person--1{animation-delay:-2s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-plan{animation:sf-scene-art-plan 6s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-plan--middle{animation-delay:-2s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-plan--top{animation-delay:-4s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-plan-coin{transform-box:fill-box;transform-origin:center;animation:sf-scene-art-plan-coin 9s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-envelope{animation:sf-scene-art-envelope 8s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-question,.sf-scene-art-answer){animation:sf-scene-art-answer 6s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-answer{animation-delay:-3s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-curtain-left,.sf-scene-art-curtain-right){transform-box:fill-box;animation:sf-scene-art-curtain 9s ease-in-out infinite}
  .sf-scene-art-curtain-left{transform-origin:left center}.sf-scene-art-curtain-right{transform-origin:right center}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-sound{transform-box:fill-box;transform-origin:center;animation:sf-scene-art-sound 3s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-ticket{transform-box:fill-box;transform-origin:center;animation:sf-scene-art-ticket 6s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-confetti{animation:sf-scene-art-float 4s ease-in-out infinite alternate}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-float{animation:sf-scene-art-float 6s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-float-late{animation:sf-scene-art-float 7s ease-in-out -2s infinite reverse}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-send{transform-box:fill-box;transform-origin:center;animation:sf-scene-art-send 5s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-lead{animation:sf-scene-art-lead 7s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-sign,.sf-scene-art-tool){transform-box:fill-box;transform-origin:center;animation:sf-scene-art-sign 5s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-bars rect,.sf-preview-chart rect){transform-box:fill-box;transform-origin:bottom;animation:sf-scene-art-bars 4s ease-in-out infinite alternate}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-bars rect,.sf-preview-chart rect):nth-child(2n){animation-delay:-1s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-typing circle,.sf-scene-art-schedule rect,.sf-scene-art-coin,.sf-scene-art-sparks){animation:sf-scene-art-pulse 3s ease-in-out infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-typing circle,.sf-scene-art-schedule rect):nth-child(2){animation-delay:-1s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-typing circle,.sf-scene-art-schedule rect):nth-child(3){animation-delay:-2s}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) .sf-scene-art-route{animation:sf-scene-art-route 2s linear infinite}
  html:not([data-motion=off]) :is([data-preview-ambient],[data-motion-story]) :is(.sf-scene-art-check,.sf-scene-art-progress,.sf-scene-art-chart-line){stroke-dasharray:1;animation:sf-scene-art-write 5s ease-in-out infinite}
  html:not([data-motion=off]) [data-preview-ambient] .sf-preview-list li{animation:sf-scene-art-row 6s ease-in-out infinite}
  html:not([data-motion=off]) [data-preview-ambient] .sf-preview-list li:nth-child(2n){animation-delay:-3s}
  html:not([data-motion=off]) [data-preview-ambient] .sf-preview-board>div>span{animation:sf-scene-art-float 6s ease-in-out infinite}
  html:not([data-motion=off]) [data-preview-ambient] .sf-preview-board>div:nth-child(2n)>span{animation-delay:-3s}
  [data-preview-ambient]:not(.is-preview-moving) *,[data-motion-story]:not(.is-story-playing) .sf-scene-art *,[data-motion-story] [data-story-step]:not(.is-story-current) .sf-scene-art *,html[data-motion-paused=true] :is([data-preview-ambient],[data-motion-story]) *{animation-play-state:paused!important}
}
@media(max-width:63.999rem){
  .sf-page-hero.sf-hero--illustrated>.sf-wrap{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .sf-hero-art{width:min(100%,24rem)}
  .sf-workflow-demo .sf-flow .sf-story-select{grid-template-columns:6.5rem minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:1rem}
  .sf-flow-illustration{grid-row:1/4;margin:0}
  .sf-workflow-demo .sf-flow .sf-story-select:after{grid-column:2}
}
@media(max-width:39.999rem){.sf-hero-art{max-width:20rem}.sf-content-demo-heading .sf-scene-art{width:5.5rem}.sf-workflow-demo .sf-flow .sf-story-select{grid-template-columns:5rem minmax(0,1fr)}}