/* Agency stories extend the existing compact illustrations, using native motion. */
[data-as-ready] { --as-ink:#423451; --as-accent:#6b5795; --as-line:#e8e1ed; --as-green:#4b7657; }
[data-as-ready] .motion-drawing, [data-as-ready] .mm-scene-drawing { width:100%; height:100%; transform:none; }
[data-as-ready] .motion-art, .motion-site [data-as-ready] .motion-art { height:380px; }
[data-as-ready].motion-scene--hero .motion-art { height:350px; }
[data-as-ready].motion-scene--mobile .motion-art { height:420px; }
[data-as-ready] .motion-scene-label { top:23px; left:20px; max-width:calc(100% - 158px); font-size:7px; }
.as-controls { position:absolute; z-index:6; top:12px; right:13px; display:flex; gap:5px; align-items:center; }
[data-as-ready] .as-controls .motion-toggle { position:static; font-size:9px; min-height:34px; padding:7px 9px; }
.as-replay { display:grid; place-items:center; width:34px; height:34px; border:1px solid #cfc4dc; border-radius:50%; background:#ffffff80; color:#5d4e70; cursor:pointer; }
.as-replay:hover { background:white; }
.as-replay svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.as-controls [hidden] { display:none!important; }
.as-window { position:absolute; inset:57px 20px 61px; display:flex; flex-direction:column; min-width:0; border:1px solid #fff; border-radius:14px; background:#fffdfd; box-shadow:0 14px 35px -23px #4b365951; overflow:hidden; }
.as-window-bar { display:flex; flex:none; align-items:center; gap:10px; height:34px; padding:0 13px; border-bottom:1px solid var(--as-line); background:#fcfafc; }
.as-window-bar > b { font-size:10px; color:var(--as-ink); letter-spacing:0; }
.as-window-dots { display:flex; gap:3px; }
.as-window-dots i { width:4px; height:4px; border-radius:50%; background:#d3c8dc; }
.as-live-dot { margin-left:auto; width:6px; height:6px; background:#6e9774; border-radius:50%; }
.as-content { position:relative; flex:1; min-height:0; padding:13px; font:400 11px/1.4 var(--body); color:var(--as-ink); }
.as-content *, .as-timeline * { box-sizing:border-box; }
.as-content svg { width:16px; height:16px; flex-shrink:0; }
.as-content b { font-weight:600; }
.as-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.as-heading > b { font-size:13px; letter-spacing:-.025em; }
.as-heading > span { font-size:8px; color:#81748c; text-align:right; }
.as-reveal { opacity:.12; transform:translateY(8px); transition:opacity .48s ease,transform .55s cubic-bezier(.2,.75,.2,1); }
.as-reveal.is-visible { opacity:1; transform:translateY(0); }
.as-avatar { width:29px; height:29px; border-radius:50%; background:#e7def0; color:#65507e; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-size:8px; font-weight:650; border:2px solid white; }
.as-avatar-1 { background:#dce9dd; color:#4f6d56; }
.as-avatar-2 { background:#f6dfce; color:#97613d; }
.as-done { display:flex; gap:5px; align-items:center; font-size:9px; color:var(--as-green); }
.as-timeline { position:absolute; bottom:8px; left:20px; right:20px; z-index:4; }
.as-status { display:block; font:500 10px/1.4 var(--body); color:var(--as-ink); text-align:left; }
.as-step-group { display:flex; gap:6px; }
.as-step { position:relative; flex:1; height:26px; border:0; padding:10px 0; background:transparent; cursor:pointer; }
.as-step::before,.as-step i { content:''; position:absolute; top:11px; left:0; right:0; height:3px; border-radius:5px; background:#d9cfe3; }
.as-step i { background:var(--as-accent); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.as-step.is-complete i,.as-step[aria-pressed=true] i { transform:scaleX(1); }
.as-step[aria-pressed=true]::after { content:''; position:absolute; top:8px; right:0; width:8px; height:8px; border-radius:50%; background:var(--as-accent); box-shadow:0 0 0 3px #eee9f4; }
.as-step:hover::before { background:#b7a3cb; }
.as-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; height:100%; padding:2px 5px 12px; }
.as-flow-card { display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; gap:9px; min-width:0; padding:10px 5px; border:1px solid var(--as-line); border-radius:11px; background:#faf8fc; transition:transform .5s,background .5s,border-color .5s; }
.as-flow-card.is-active { border-color:#c8b8d9; background:#f0eaf5; transform:translateY(-3px); }
.as-flow-card > small { font-size:7px; letter-spacing:.09em; color:#81708e; }
.as-flow-card > b { font-size:14px; letter-spacing:-.03em; }
.as-flow-foot { font-size:8px; color:#786883; text-align:center; }
.as-big-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#e6dcf0; color:var(--as-accent); }
.as-big-icon svg { width:22px; height:22px; }
.as-mini-week { display:flex; gap:3px; }
.as-mini-week i { display:grid; place-items:center; font-style:normal; width:17px; height:17px; border-radius:4px; background:#eee7f4; color:#8d7c9b; font-size:7px; }
.as-mini-week .as-day-active { background:var(--as-accent); color:white; }
.as-avatar-stack { display:flex; padding:5px; }
.as-avatar-stack .as-avatar { margin-left:-5px; width:34px; height:34px; }
.as-team-count { font-size:9px; }
.as-report-bars { height:36px; display:flex; align-items:flex-end; gap:5px; }
.as-report-bars i { width:12px; height:17px; border-radius:3px 3px 0 0; background:#d0c1df; transform:scaleY(.35); transform-origin:bottom; transition:transform .6s; }
.as-report-bars i:nth-child(2) { height:25px; background:#a48cbf; transition-delay:.08s; }
.as-report-bars i:nth-child(3) { height:34px; background:#6b5795; transition-delay:.16s; }
[data-as-step='3'] .as-report-bars i { transform:scaleY(1); }
.as-travel-track { position:absolute; bottom:9px; left:13px; right:13px; height:2px; background:#ebe3f2; }
.as-travel-track i { position:absolute; width:8px; height:8px; top:-3px; left:0; border-radius:50%; background:#bd865e; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
[data-as-step='1'] .as-travel-track i { transform:translateX(calc((100cqw - 100px)*.35)); }
[data-as-step='2'] .as-travel-track i { transform:translateX(calc((100cqw - 100px)*.65)); }
[data-as-step='3'] .as-travel-track i { transform:translateX(calc(100cqw - 100px)); }
[data-as-ready] { container-type:inline-size; }
.as-week { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.as-week > div { min-width:0; }
.as-week > div > small { display:block; padding:0 5px 8px; font-size:9px; color:#85768e; }
.as-empty-slot { height:88px; border:1px dashed #e0d6e7; border-radius:8px; padding:12px 6px; color:#a99ab5; font-size:9px; }
.as-shift { min-height:88px; border-radius:8px; background:#ede5f5; padding:10px; transition:background .5s,transform .5s; }
.as-shift > b,.as-shift > span { display:block; font-size:10px; }
.as-shift > span { font-size:8px; margin-top:3px; color:#83718f; }
[data-as-step='2'] .as-shift,[data-as-step='3'] .as-shift { background:#ded0ec; transform:translateY(-2px); }
.as-assigned { display:flex; align-items:center; margin-top:6px; }
.as-assigned .as-avatar { width:22px; height:22px; font-size:6px; margin-left:-3px; }
.as-assigned > span:last-child { margin-left:4px; font-size:8px; }
.as-planning-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:10px; }
.as-ready-person { display:flex; align-items:center; gap:5px; font-size:9px; }
.as-filters { display:flex; gap:5px; margin-bottom:10px; }
.as-filters > span { display:flex; align-items:center; gap:5px; border:1px solid #e0d6e9; border-radius:20px; padding:4px 9px; font-size:8px; transition:background .5s; }
.as-filters svg { width:10px; height:10px; }
[data-as-step='1'] .as-filters > span,[data-as-step='2'] .as-filters > span,[data-as-step='3'] .as-filters > span { background:#e9dff2; }
.as-person-list { display:grid; gap:5px; }
.as-person { display:flex; align-items:center; gap:7px; border:1px solid var(--as-line); border-radius:8px; padding:5px 8px; background:white; }
.as-person > div { min-width:0; }
.as-person b,.as-person small { display:block; font-size:9px; }
.as-person small { font-size:7px; color:#96899e; margin-top:2px; }
.as-person > i { margin-left:auto; color:#608064; opacity:0; transition:opacity .5s; }
[data-as-step='3'] .as-person:first-child > i,[data-as-step='3'] .as-kind-opportunities .as-person:last-child > i { opacity:1; }
.as-profile-peek { position:absolute; bottom:45px; right:12px; width:155px; background:#eee5f7; border:1px solid #d6c7e4; padding:10px; border-radius:9px; box-shadow:0 8px 25px #5940711a; }
.as-profile-peek > b,.as-profile-peek > span { display:block; font-size:9px; }
.as-profile-peek > span { font-size:7px; margin-top:4px; color:#877393; }
.as-profile-peek > svg { position:absolute; top:9px; right:7px; width:13px; }
.as-toast { position:absolute; left:13px; right:13px; bottom:10px; display:flex; align-items:center; gap:6px; padding:8px 10px; background:#e7eee5; color:#426348; font-size:9px; border-radius:7px; }
.as-map { position:relative; height:75px; overflow:hidden; border-radius:9px; background:#eef1e9; }
.as-map > svg { position:absolute; inset:0; width:100%; height:100%; stroke:#fff; stroke-width:8px; }
.as-map-radius { position:absolute; width:70px; height:70px; border:1px solid #a6b89d; border-radius:50%; left:calc(50% - 35px); top:3px; background:#cbd9be59; }
.as-map-pin { position:absolute; left:calc(50% - 13px); top:24px; color:#6b5795; }
.as-map-pin > svg { width:25px; height:25px; }
.as-map-worker { position:absolute; left:15%; top:40px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#6b5795; color:white; font-size:7px; transition:transform 1s; }
[data-as-step='1'] .as-map-worker,[data-as-step='2'] .as-map-worker,[data-as-step='3'] .as-map-worker { transform:translateX(calc(35cqw - 32px)) translateY(-20px); }
.as-map-label { position:absolute; right:9px; top:9px; background:#ffffffbb; border-radius:5px; padding:4px 6px; font-size:7px; }
.as-attendance-records { display:grid; gap:4px; margin-top:7px; }
.as-record { display:flex; align-items:center; gap:7px; min-height:29px; border-bottom:1px solid var(--as-line); font-size:9px; }
.as-record > span { margin-left:auto; color:#756680; font-size:9px; }
.as-record > svg:last-child { color:#608064; width:12px; height:12px; }
.as-duration { display:flex; justify-content:space-between; align-items:center; margin-top:7px; font-size:9px; color:#608064; }
.as-duration > b { font-size:13px; }
.as-ledger { border:1px solid var(--as-line); border-radius:9px; overflow:hidden; }
.as-ledger-row { display:flex; align-items:center; gap:8px; min-height:33px; padding:6px 10px; background:white; border-bottom:1px solid var(--as-line); }
.as-ledger-row:last-child { border:0; }
.as-ledger-row > svg { color:#9a86ac; width:14px; height:14px; }
.as-ledger-row > span { font-size:9px; }
.as-ledger-row > b { margin-left:auto; font-size:11px; }
.as-total { display:flex; align-items:center; justify-content:space-between; padding:11px 10px; margin-top:8px; border-radius:9px; background:#eae1f3; font-size:11px; }
.as-total small { display:block; font-size:8px; color:#7e6d8a; margin-top:3px; }
.as-total > b { font-size:22px; letter-spacing:-.05em; }
.as-finance-note { display:flex; gap:5px; align-items:center; font-size:7px; color:#897a95; margin-top:7px; }
.as-finance-note svg { width:11px; height:11px; }
.as-worker-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:15px; height:100%; max-width:400px; margin:auto; }
.as-phone { position:relative; height:221px; border:4px solid #655674; border-radius:22px; padding:13px 10px; background:#fcfafc; box-shadow:0 12px 23px -14px #51405f55; }
.as-phone-top { display:flex; align-items:center; gap:3px; margin-bottom:19px; }
.as-phone-top img { width:26px; height:22px; object-fit:contain; }
.as-phone-top b { font-size:8px; }
.as-phone-top i { width:5px; height:5px; border-radius:50%; background:#819f72; margin-left:auto; }
.as-phone > small { display:block; font-size:6px; color:#a28fad; letter-spacing:.09em; }
.as-phone > b { display:block; font-size:12px; margin-top:4px; }
.as-phone-shift { padding:10px; margin-top:13px; border-radius:9px; background:#ece3f4; }
.as-phone-shift > svg { width:18px; height:18px; margin-bottom:6px; }
.as-phone-shift > b,.as-phone-shift > span { display:block; font-size:9px; }
.as-phone-shift > span { font-size:7px; margin-top:4px; }
.as-phone-shift .as-reveal { font-size:6px; margin-top:6px; }
.as-phone-shift .as-reveal svg { width:9px; height:9px; vertical-align:middle; }
.as-phone-dots { display:flex; justify-content:center; gap:14px; margin-top:13px; }
.as-phone-dots i { width:6px; height:6px; border-radius:2px; background:#d9cce3; }
.as-worker-cards { display:grid; gap:12px; }
.as-agenda,.as-payment { border:1px solid #e3d9ea; border-radius:10px; padding:11px; background:white; }
.as-agenda > span,.as-payment > span { display:flex; align-items:center; gap:5px; font-size:9px; }
.as-agenda > span svg,.as-payment > span svg { width:13px; height:13px; }
.as-agenda > div:not(.as-reveal) { display:flex; gap:3px; margin-top:11px; }
.as-agenda i { display:grid; place-items:center; flex:1; height:23px; font-style:normal; font-size:7px; border-radius:5px; background:#f2edf6; transition:background .5s,color .5s; }
[data-as-step='1'] .as-agenda i:nth-child(odd),[data-as-step='2'] .as-agenda i:nth-child(odd),[data-as-step='3'] .as-agenda i:nth-child(odd) { background:#6b5795; color:white; }
.as-agenda .as-done { margin-top:8px; font-size:7px; }
.as-payment small { display:block; margin-top:9px; color:#8c7c98; font-size:7px; }
.as-payment b { display:block; font-size:16px; letter-spacing:-.04em; margin-top:2px; }
.as-payment .as-reveal > b { color:#4b7657; }
.as-metrics { display:flex; gap:8px; margin:18px 0; }
.as-metric { flex:1; background:#f2edf6; border:1px solid var(--as-line); border-radius:8px; padding:12px 8px; }
.as-metric small { display:block; font-size:6px; color:#96859f; }
.as-metric b { display:block; font-size:24px; margin-top:5px; letter-spacing:-.04em; }
.as-supplier-warning { display:flex; align-items:center; justify-content:space-between; padding:9px; margin-top:9px; border-radius:7px; background:#fae9da; font-size:8px; color:#8a5c37; }
.as-form-field { padding:12px; background:#f2ecf6; border-radius:8px; margin-bottom:9px; }
.as-form-field small { display:block; color:#97849f; font-size:6px; letter-spacing:.06em; }
.as-form-field b { display:block; margin-top:9px; font-size:13px; }
.as-document { display:flex; align-items:center; gap:7px; padding:11px 6px; border-bottom:1px solid var(--as-line); font-size:9px; }
.as-document > svg { width:13px; height:13px; color:#6a845e; }
.as-document > svg:last-child { margin-left:auto; }
.as-portal-request { display:flex; gap:10px; align-items:center; padding:12px; border-radius:9px; background:#eee5f5; font-size:8px; }
.as-portal-request > svg { width:25px; height:25px; }
.as-portal-request b { display:block; margin-top:4px; font-size:12px; }
.as-portal-result { display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:8px; margin-top:9px; background:#e7eee5; color:#4b7657; font-size:9px; }
/* Keep module previews small; the same story is not scaled as a screenshot. */
.mm-preview[data-as-ready] { padding-bottom:58px; }
.mm-preview[data-as-ready] .motion-art { height:auto; }
.mm-preview[data-as-ready] .mm-canvas { height:286px; }
.mm-preview[data-as-ready] .mm-scene-drawing { width:100%; height:100%; transform:none; }
.mm-preview[data-as-ready] .as-window { inset:12px 0 3px; }
.mm-preview[data-as-ready] .mm-steps { display:none; }
.mm-preview[data-as-ready] .as-timeline { bottom:8px; left:16px; right:16px; }
.mm-preview[data-as-ready] .as-controls { top:13px; right:15px; }
.mm-preview[data-as-ready] .mm-preview-top > span { max-width:calc(100% - 123px); font-size:11px; }
.mm-preview[data-as-ready] .mm-preview-note { margin-top:7px; }
.mm-preview[data-as-ready] .as-controls .motion-toggle { min-height:30px; font-size:8px; }
.mm-preview[data-as-ready] .as-replay { width:30px; height:30px; }
[data-as-ready][data-motion-state=paused] .as-content * { transition:none; }
@media(min-width:761px) { .motion-scene--hero[data-as-ready] .as-window { inset-inline:8%; } .motion-scene--hero[data-as-ready] .as-overview { gap:28px; } .motion-scene--hero[data-as-ready] .as-flow-card > b { font-size:18px; } }
@media(max-width:760px) {
  [data-as-ready] .motion-art,.motion-site [data-as-ready] .motion-art { height:380px; }
  [data-as-ready].motion-scene--hero .motion-art { height:350px; }
  [data-as-ready].motion-scene--mobile .motion-art { height:420px; }
  .as-window { inset-inline:12px; }
  .as-content { padding:11px; }
  .as-timeline { left:13px; right:13px; }
  .as-overview { gap:6px; padding-inline:0; }
  .as-flow-card { gap:9px; padding-inline:3px; }
  .as-flow-card > b { font-size:11px; }
  .as-flow-card > small { font-size:6px; letter-spacing:0; }
  .as-flow-foot { font-size:6px; }
  .as-flow-card .as-done { font-size:7px; gap:2px; }
  .as-flow-card .as-done svg { width:10px; height:10px; }
  .as-avatar-stack .as-avatar { width:25px; height:25px; font-size:6px; }
  .as-mini-week i { width:12px; height:15px; font-size:6px; }
  .as-team-count { font-size:7px; }
  .as-heading > b { font-size:11px; }
  .as-heading > span { font-size:7px; max-width:95px; }
  .as-worker-layout { gap:9px; }
  .as-agenda,.as-payment { padding:9px; }
  .as-agenda > span,.as-payment > span { font-size:8px; }
  .as-week { gap:4px; }
  .as-shift { padding:8px 5px; }
  .as-empty-slot { padding-inline:4px; font-size:7px; }
  .as-planning-bottom > .as-done { font-size:7px; }
  .as-planning-bottom .as-ready-person { font-size:7px; gap:3px; }
  .mm-preview[data-as-ready] .as-content { padding:11px; }
  .mm-preview[data-as-ready] .as-controls { right:10px; top:12px; }
  .mm-preview[data-as-ready] .mm-preview-top > span { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { [data-as-ready] *,[data-as-ready] *::before,[data-as-ready] *::after { animation:none!important; transition:none!important; } }

.as-profile-peek.as-reveal:not(.is-visible),.as-toast.as-reveal:not(.is-visible) { opacity:0; }

@media(max-width:380px) {
  .as-metrics { margin:11px 0; gap:6px; }
  .as-metric { padding:9px 6px; }
  .as-metric small { font-size:5px; }
  .as-supplier-warning { flex-direction:column; align-items:flex-start; gap:3px; padding:7px; font-size:7px; }
  .as-kind-portal .as-document { padding-block:8px; font-size:8px; }
  .as-portal-request { padding:9px; }
  .as-portal-request b { font-size:10px; }
  .as-portal-result { padding:8px; font-size:8px; }
}
@media(max-width:380px) {
  .as-kind-suppliers .as-heading { margin-bottom:8px; }
  .as-kind-suppliers .as-heading > b { font-size:10px; }
  .as-kind-suppliers .as-metrics { margin:8px 0; }
  .as-kind-suppliers .as-metric { padding:7px 6px; }
  .as-kind-suppliers .as-metric b { font-size:21px; }
}
@media(max-width:480px) {
  .as-worker-layout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .as-phone { height:238px; padding:10px 6px; }
  .as-phone-top { margin-bottom:12px; gap:1px; }
  .as-phone-top img { width:20px; height:20px; }
  .as-phone-top b { font-size:7px; }
  .as-phone > small { font-size:5px; }
  .as-phone > b { font-size:10px; }
  .as-phone-shift { padding:8px 6px; margin-top:8px; }
  .as-phone-shift > b { font-size:8px; }
  .as-phone-shift > span { font-size:6px; }
  .as-phone-shift .as-reveal { font-size:5px; }
}