/* Illustrative product compositions. All visible data is synthetic. */
.visual-hero-stage,.visual-places-stage{position:relative;isolation:isolate;overflow:hidden;background:#e8ebe8;color:#283246;margin:0}
.visual-hero-stage{flex:1 0 465px;min-height:465px;max-height:none;display:grid;align-items:center;border-top:1px solid #dce0d9}
.visual-hero-stage:after,.visual-places-stage:after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:1px;background:#d4dad5}
.visual-devices{position:relative;width:min(1160px,calc(100% - 70px));height:465px;margin:auto}
.visual-stage-caption{position:absolute;z-index:3;top:17px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;line-height:1.4;color:#65716d;letter-spacing:.01em}
.visual-stage-caption>span:first-child{display:flex;align-items:center;gap:7px}
.visual-stage-caption>span:first-child:before{content:"";width:4px;height:4px;border-radius:50%;background:#75817a}
.visual-desktop-shell{position:absolute;top:53px;left:12px;width:calc(100% - 210px);height:433px;padding:8px;border:1px solid #687079;border-radius:15px 15px 0 0;background:#2e3541;box-shadow:0 38px 65px -38px #1f2c385e,0 9px 20px #27363c14;transform:translateY(0);animation:visual-desktop-in .95s cubic-bezier(.2,.65,.25,1) both}
.visual-desktop-screen{height:100%;overflow:hidden;border-radius:8px 8px 0 0;background:#fff}
.visual-app-topbar{height:44px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:10px}
.visual-brand{font-size:24px;font-weight:800;letter-spacing:-1.7px;line-height:1;color:#253044;white-space:nowrap}
.visual-brand i{font-style:normal;color:var(--blue)}
.visual-workspace-name{display:flex;align-items:center;gap:10px;color:#687485;font-size:10px}
.visual-workspace-name:before{content:"";width:17px;height:17px;border:1px solid #cdd3df;border-radius:4px;background:#f8f9fb}
.visual-topbar-meta{display:flex;align-items:center;gap:12px;color:#647084}
.visual-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eef1f8;color:#506084;font-size:9px;font-weight:700;flex:none}
.visual-app-body{display:grid;grid-template-columns:151px 1fr;height:calc(100% - 44px)}
.visual-app-sidebar{padding:27px 12px 18px;border-right:1px solid #e9ecef;background:#fbfcfd;display:flex;flex-direction:column;gap:7px;font-size:10px}
.visual-nav-label{font-size:7px;letter-spacing:.12em;color:#929baa;margin:0 12px 11px;font-weight:700}
.visual-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;line-height:1.3;color:#717c8e;border-radius:5px}
.visual-nav-item.visual-selected{background:#edf1ff;color:#294cce;font-weight:700}
.visual-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visual-sidebar-bottom{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 9px 0;color:#818b99;font-size:8px}
.visual-app-main{padding:24px 27px 0;min-width:0}
.visual-view-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.visual-view-heading h3{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.04em}
.visual-view-heading>span{font-size:9px;color:#727f90;white-space:nowrap}
.visual-metrics{display:flex;gap:39px;margin:23px 0 19px}
.visual-metric{display:flex;flex-direction:column;gap:2px}
.visual-metric strong{font-size:29px;line-height:1.1;font-weight:600;letter-spacing:-.055em;color:#273347;font-variant-numeric:tabular-nums}
.visual-metric span{font-size:9px;color:#748091}
.visual-metric:last-child strong{color:#a66b30}
.visual-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px;text-align:left}
.visual-table th{font-size:8px;font-weight:500;color:#7d8897;border-block:1px solid #edf0f3;padding:10px 0;line-height:1.35}
.visual-table td{border-bottom:1px solid #edf0f3;padding:10px 0;color:#465368;line-height:1.45;vertical-align:middle}
.visual-table th:first-child,.visual-table td:first-child{width:34%}
.visual-table th:nth-child(2),.visual-table td:nth-child(2){width:19%}
.visual-table th:nth-child(3),.visual-table td:nth-child(3){width:18%;font-variant-numeric:tabular-nums}
.visual-table tr:last-child td{border-bottom:0}
.visual-employee-cell{display:flex;align-items:center;gap:9px}
.visual-employee-cell .visual-avatar{width:24px;height:24px;background:#f0f2f5;color:#8894a6;font-size:8px}
.visual-row-state{display:inline-flex;align-items:center;gap:5px;font-size:8px;white-space:nowrap}
.visual-row-state:before{content:"";width:4px;height:4px;border-radius:50%;background:#638774;flex:none}
.visual-row-state.visual-pending{color:#986129}
.visual-row-state.visual-pending:before{background:#b58448}
.visual-phone{position:relative;width:228px;height:443px;padding:6px;border:1px solid #5a6470;border-radius:33px;background:#272f3b;box-shadow:0 32px 45px -26px #24323f66,0 10px 22px #2330421c,0 0 0 1px #ffffff80 inset;color:#243148;font-family:var(--font);font-variant-numeric:tabular-nums}
.visual-phone:before,.visual-phone:after{content:"";position:absolute;width:2px;background:#65707d;left:-3px;border-radius:2px}
.visual-phone:before{height:24px;top:90px}
.visual-phone:after{height:37px;top:124px}
.visual-phone-screen{height:100%;position:relative;overflow:hidden;border-radius:26px;background:#fff}
.visual-phone-status{height:37px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;position:relative}
.visual-phone-status:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:60px;height:17px;border-radius:20px;background:#222a34}
.visual-system-icons{display:flex;align-items:center;gap:4px}
.visual-signal{width:12px;height:9px;display:flex;gap:1px;align-items:flex-end}
.visual-signal i{width:2px;background:currentColor;border-radius:1px}
.visual-signal i:nth-child(1){height:3px}.visual-signal i:nth-child(2){height:5px}.visual-signal i:nth-child(3){height:7px}.visual-signal i:nth-child(4){height:9px}
.visual-battery{width:14px;height:7px;border:1px solid currentColor;border-radius:2px;position:relative}
.visual-battery:before{content:"";position:absolute;inset:1px;background:currentColor;border-radius:.5px}
.visual-battery:after{content:"";position:absolute;right:-3px;top:1px;width:1px;height:3px;border-radius:1px;background:currentColor}
.visual-phone-content{padding:6px 17px 12px}
.visual-phone-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.visual-phone-header .visual-brand{font-size:24px}
.visual-phone .visual-avatar{width:23px;height:23px;font-size:8px}
.visual-phone-title{font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.045em;margin:0 0 5px}
.visual-phone-subtitle{font-size:9px;color:#7b8796;line-height:1.45}
.visual-week{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:13px -2px 13px}
.visual-day{display:flex;align-items:center;flex-direction:column;gap:5px;padding:7px 0;font-size:8px;line-height:1.1;color:#8b95a1}
.visual-day strong{font-size:12px;line-height:1.2;font-weight:600;color:#37455a}
.visual-day.visual-today{background:#eef2ff;border-radius:8px;color:#3558cf}
.visual-day.visual-today strong{color:#264ddf}
.visual-shift-detail{border-left:2px solid var(--blue);padding:1px 0 2px 10px;margin-bottom:12px}
.visual-shift-label{display:block;font-size:7px;line-height:1;font-weight:700;letter-spacing:.08em;color:#7b8797;margin-bottom:3px}
.visual-shift-time{display:block;font-size:21px;letter-spacing:-.05em;line-height:1.1;font-weight:600}
.visual-shift-place{font-size:9px;line-height:1.45;color:#758195;margin-top:4px;display:block}
.visual-published{display:flex;align-items:center;gap:4px;font-size:7px;line-height:1.4;color:#657f70;margin-top:7px}
.visual-published .visual-icon{width:10px;height:10px}
.visual-next-shift{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #eef0f4;padding:9px 0;font-size:8px;color:#758194}
.visual-next-shift strong{font-size:9px;font-weight:600;color:#43516a}
.visual-hours{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid #e8edf3;margin-top:4px}
.visual-hours>span{font-size:8px;line-height:1.5;max-width:85px;color:#778397}
.visual-hours strong{font-size:22px;font-weight:600;letter-spacing:-.05em;line-height:1.2}
.visual-hours small{font-size:10px;font-weight:500;margin-left:3px}
.visual-home-indicator{position:absolute;bottom:6px;left:50%;width:70px;height:3px;border-radius:3px;background:#263144;transform:translateX(-50%)}
.visual-phone--employee{position:absolute;right:9px;top:25px;animation:visual-phone-in 1.1s .12s cubic-bezier(.2,.65,.25,1) both}
.visual-places-stage{min-height:690px;display:grid;place-items:center;padding:51px 25px 64px;background:#e5e9e6}
.visual-places-stage .visual-stage-caption{left:32px;right:32px;top:auto;bottom:21px;justify-content:center;text-align:center;font-size:9px}
.visual-phone--manager{width:293px;height:600px;border-radius:41px;padding:7px;box-shadow:0 42px 62px -35px #25333d75,0 12px 20px #2b393e14,0 0 0 1px #ffffff70 inset}
.visual-phone--manager .visual-phone-screen{border-radius:33px;background:#fff}
.visual-phone--manager .visual-phone-status{height:43px;padding:0 21px;font-size:11px}
.visual-phone--manager .visual-phone-status:before{top:10px;width:77px;height:20px}
.visual-phone--manager .visual-phone-content{padding:8px 22px 10px}
.visual-phone--manager .visual-phone-header{margin-bottom:16px}
.visual-phone--manager .visual-brand{font-size:28px}
.visual-phone--manager .visual-phone-title{font-size:23px}
.visual-phone--manager .visual-phone-subtitle{font-size:10px}
.visual-locations-summary{display:flex;align-items:baseline;gap:7px;padding:16px 0 14px}
.visual-locations-summary strong{font-size:39px;font-weight:600;line-height:1;letter-spacing:-.06em}
.visual-locations-summary strong>span{font-size:22px;color:#96a0ad;margin-left:3px;font-weight:500}
.visual-locations-summary>span{font-size:9px;color:#728094}
.visual-location-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e9edf0;padding:13px 0;font-size:10px}
.visual-location-name{display:flex;align-items:center;gap:7px;color:#485870}
.visual-location-name .visual-icon{width:13px;height:13px;color:#8a95a4}
.visual-location-count{display:flex;align-items:center;gap:7px;color:#5c6d82;font-size:10px}
.visual-location-count:after{content:"";width:5px;height:5px;border-radius:50%;background:#7c9a87}
.visual-location-count.visual-review:after{background:#b88b4f}
.visual-manager-alert{margin-top:14px;border:1px solid #e7e1d6;background:#faf8f3;border-radius:11px;padding:14px 13px;color:#42484e}
.visual-alert-topline{display:flex;gap:6px;align-items:center;color:#947348;font-size:8px;margin-bottom:10px}
.visual-alert-topline .visual-icon{width:12px;height:12px}
.visual-alert-topline time{margin-left:auto;color:#9b8b74;font-size:8px}
.visual-manager-alert h4{font-size:13px;line-height:1.4;letter-spacing:-.025em;font-weight:700;margin:0 0 5px}
.visual-alert-person{font-size:9px;line-height:1.6;color:#786f62}
.visual-alert-schedule{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e9e3d8;margin-top:12px;padding-top:9px;font-size:8px;color:#7d7468}
.visual-alert-schedule strong{font-size:10px;font-weight:600;color:#4b515b}
.visual-alert-note{font-size:9px;line-height:1.6;color:#7f8a98;margin:11px 0 0}
.visual-hero-stage p,.visual-places-stage p{max-width:none}
@keyframes visual-desktop-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes visual-phone-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.visual-hero-stage{flex-basis:510px;min-height:510px}.visual-devices{height:510px}.visual-desktop-shell{top:65px;height:452px}.visual-phone--employee{top:51px}}
@media(max-width:1050px) and (min-width:761px){.visual-devices{width:calc(100% - 46px)}.visual-desktop-shell{left:0;width:calc(100% - 164px)}.visual-app-body{grid-template-columns:116px 1fr}.visual-app-sidebar{padding-inline:7px}.visual-nav-item{padding-inline:7px;gap:6px;font-size:9px}.visual-app-main{padding:24px 19px 0}.visual-phone--employee{right:-7px;top:55px;width:213px;height:423px}.visual-metrics{gap:30px}.visual-table{font-size:9px}.visual-table td{padding:11px 0}.visual-employee-cell{gap:5px}.visual-employee-cell .visual-avatar{display:none}.visual-stage-caption>span:last-child{display:none}.visual-workspace-name{font-size:8px}.visual-topbar-meta>span:first-child{display:none}.visual-places-stage{padding-inline:12px}.visual-phone--manager{width:271px;height:600px}.visual-phone--manager .visual-phone-content{padding-inline:17px}}
@media(max-width:760px){.visual-hero-stage{min-height:470px;max-height:470px;flex-basis:470px}.visual-devices{width:100%;height:470px}.visual-stage-caption{top:15px;left:24px;right:24px;font-size:8px}.visual-stage-caption>span:last-child{display:none}.visual-desktop-shell{left:calc(50% - 425px);top:89px;width:560px;height:339px;padding:6px;border-radius:11px 11px 0 0;box-shadow:0 22px 40px -25px #293b4440;opacity:.86;animation:none}.visual-app-topbar{height:34px;padding:0 14px}.visual-app-body{grid-template-columns:113px 1fr;height:calc(100% - 34px)}.visual-app-topbar .visual-brand{font-size:20px}.visual-app-sidebar{padding:18px 7px;font-size:8px}.visual-nav-item{padding:8px 7px;gap:7px;font-size:8px}.visual-nav-label{font-size:6px}.visual-app-main{padding:19px 17px 0}.visual-view-heading h3{font-size:16px}.visual-view-heading>span{font-size:7px}.visual-metrics{gap:28px;margin:17px 0 15px}.visual-metric strong{font-size:25px}.visual-metric span{font-size:8px}.visual-table{font-size:8px}.visual-table th{font-size:7px}.visual-table td{padding:9px 0}.visual-employee-cell .visual-avatar{width:18px;height:18px;font-size:7px}.visual-row-state{font-size:7px}.visual-phone--employee{right:auto;left:calc(50% - 83px);top:25px;width:220px;height:443px;box-shadow:0 26px 50px -24px #28334080,0 5px 14px #26374926}.visual-phone--employee .visual-phone-content{padding:5px 15px 12px}.visual-phone--employee .visual-phone-header{margin-bottom:15px}.visual-phone--employee .visual-week{margin-top:13px;margin-bottom:13px}.visual-phone--employee .visual-next-shift{padding:8px 0}.visual-phone--employee .visual-hours{padding-top:9px}.visual-places-stage{min-height:650px;padding:35px 20px 57px}.visual-phone--manager{width:286px;height:600px}.visual-places-stage .visual-stage-caption{bottom:18px;left:20px;right:20px;font-size:8px}}
@media(max-width:370px){.visual-phone--employee{left:calc(50% - 90px)}.visual-places-stage{padding-inline:14px}.visual-phone--manager{width:274px;height:600px}.visual-phone--manager .visual-phone-content{padding-inline:19px}}
@media(prefers-reduced-motion:reduce){.visual-desktop-shell,.visual-phone--employee{animation:none}}

@media(min-width:761px){.visual-hero-stage{max-height:none;display:grid;align-items:center}}
@media(max-width:760px){.hero-copy{padding-top:24px;padding-bottom:22px}.hero-heading .eyebrow{margin-bottom:17px}.hero-aside{margin-top:18px}.hero-aside p{margin-bottom:16px}.visual-hero-stage{min-height:435px;max-height:435px;flex-basis:435px}.visual-devices{height:435px}.visual-phone--employee{top:20px;height:407px}.visual-phone--employee .visual-phone-header{margin-bottom:12px}.visual-phone--employee .visual-phone-content{padding-top:4px}.visual-phone--employee .visual-hours{padding-top:15px;margin-top:12px}}