/* The three homepage stories are screen recreations using fictional data.
   Scope every rule to this component; the existing rotating phone is independent. */
.workflow-instruction{margin:-20px 0 23px!important;font-size:12px!important;color:#687391!important}
.workflow-tap-hint{display:none}
.workflow-grid{align-items:start;gap:28px}
.workflow-feature{min-width:0;position:relative;transition:border-color .2s}
.workflow-feature.is-open{border-top-color:#5856d6}
.workflow-grid .workflow-toggle{border:0;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;cursor:pointer;width:100%;padding:9px 12px;transition:background .2s,color .2s}
.workflow-toggle:hover,.workflow-toggle[aria-expanded=true]{background:#e5e5fa;color:#3634a3}
.workflow-toggle-icon{display:flex;align-items:center;gap:10px;color:#5856d6}
.workflow-toggle-icon svg{width:14px;height:14px}
.workflow-toggle-icon svg:last-child{width:12px;transform:rotate(90deg);transition:transform .25s}
.workflow-toggle[aria-expanded=true] .workflow-toggle-icon svg:last-child{transform:rotate(-90deg)}
.workflow-panel[hidden]{display:none}
.workflow-panel{overflow:hidden;animation:workflow-expand .4s cubic-bezier(.2,.75,.3,1) both}
.workflow-panel-inner{padding:19px 2px 2px}
.workflow-screen{height:490px;position:relative;border:1px solid #ddddea;border-radius:18px;overflow:hidden;background:#e9edf9;box-shadow:0 14px 30px -20px #34317b60;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#171821;line-height:1.3;isolation:isolate;container-type:inline-size}
.workflow-scene{position:absolute;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:#e8e5f8 url('assets/pencilled-background.png') center/cover;transition:opacity .4s,visibility .4s}
.workflow-scene.is-current{visibility:visible;opacity:1}
.workflow-scene:not(.is-current){pointer-events:none}
.native-nav{height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;color:#5856d6}
.native-nav>span:first-child{font-size:29px;font-weight:300;line-height:1}
.native-nav>span:last-child{font-size:10px;letter-spacing:1px}
.native-nav strong{font-size:13px;color:#171821;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.native-content{padding:8px 14px 12px;font-size:12px}
.native-card{padding:14px;margin-bottom:12px;border-radius:18px;background:#ffffffe0;border:1px solid #ffffffd0;box-shadow:0 2px 6px #2b264c03}
.native-job{display:flex;gap:11px;align-items:center;margin:2px 0 15px}
.native-avatar{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:12px;background:#dddafa;color:#5856d6;font-size:17px;font-weight:650}
.native-job>div{display:flex;flex-direction:column;min-width:0;gap:3px}
.native-job small,.native-job>div>span{font-size:10px;color:#73738b}
.native-job strong{font-size:17px;letter-spacing:-.5px;line-height:1.1}
.native-divider{height:1px;background:#d7d7e880;margin:12px 0}
.native-row{display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0}
.native-symbol{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:50%;background:#e5e5fa;color:#5856d6}
.native-symbol svg{height:17px;width:17px}
.native-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.native-row small{font-size:10px;color:#79798e;letter-spacing:.02em}
.native-row strong{font-size:12px;font-weight:650;line-height:1.35}
.native-notification{display:flex;align-items:center;gap:10px;background:#ffffffd9;border:1px solid white;border-radius:15px;padding:10px 12px;margin:0 0 13px;box-shadow:0 6px 12px #2e2a5610}
.native-notification svg{width:22px;height:22px;background:#5856d6;border-radius:7px;padding:4px;color:white;box-sizing:content-box}
.native-notification>div{display:flex;flex-direction:column;gap:4px}
.native-notification strong{font-size:11px}.native-notification span{color:#77758a;font-size:10px}
.native-question{font-weight:650;margin:13px 0 10px;font-size:13px}
.native-choice{border:1px solid #e0dfea;border-radius:10px;padding:9px 10px;margin-top:7px;font-size:11px;color:#858496;display:flex;align-items:center;gap:7px}
.native-choice.selected{background:#e5e5fa;border-color:#5856d633;color:#3634a3;font-weight:550}
.native-choice svg{width:14px;height:14px}
.native-action{position:relative;display:flex;justify-content:center;align-items:center;background:#5856d6;color:#fff;font-size:11px;font-weight:650;min-height:34px;padding:9px 7px;border-radius:10px;margin-top:13px;text-align:center}
.demo-tap{pointer-events:none;position:absolute;width:21px;height:21px;border:1.5px solid #fff9;border-radius:50%;background:#ffffff4f;box-shadow:0 0 0 5px #ffffff24;right:23%;top:calc(50% - 10px);opacity:0}
.workflow-scene.is-current .native-action .demo-tap,.workflow-scene.is-current .native-review-bar .demo-tap{animation:workflow-tap 1.1s 1.1s both}
.native-success-icon{margin:5px auto 12px;width:51px;height:51px;background:#d9f7e4;border-radius:50%;display:grid;place-items:center;color:#22974c}
.native-success-icon svg{width:25px;height:25px}.native-success-title{text-align:center;font-size:21px;font-weight:700;letter-spacing:-.5px}
.workflow-grid .native-center-copy{font-size:11px;text-align:center;margin:8px 0 22px;line-height:1.4;color:#737087}
.native-info{padding:11px 13px;border-radius:12px;background:#ffffff90;font-size:11px;line-height:1.5;color:#65607e}
.native-label{font-size:10px;color:#6f6b83}.native-price{font-size:32px;font-weight:700;letter-spacing:-1px;margin-top:4px}.native-price>span{font-size:14px;color:#6d687f;font-weight:500;letter-spacing:0}
.native-result{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:10px;background:#e2f7e9;color:#24854b;font-size:11px}
.native-result svg{width:16px;height:16px}
.workflow-scene.is-current .native-result{animation:workflow-reveal .45s 1.9s both}
.native-badge{display:flex;align-items:center;gap:4px;width:max-content;border-radius:20px;padding:4px 9px;font-size:10px;font-weight:650;background:#af52de25;color:#9842bf;margin:-5px 0 12px}
.native-badge svg{width:12px;height:12px}.native-badge.green{color:#258b49;background:#34c75923}.native-badge.grey{background:#efeff5;color:#777589;margin:0}
.workflow-grid .native-muted{font-size:11px;line-height:1.4;color:#747085;margin-top:5px}
.native-settle{position:relative;height:110px;margin-top:5px}.native-before,.native-after{position:absolute;inset:0}.native-after{opacity:0}
.native-secondary-action{display:block;text-align:center;margin-top:12px;color:#5856d6;font-size:10px}
.native-agreed{display:flex;align-items:center;justify-content:center;gap:7px;color:#258b49;background:#e2f7e9;padding:12px 5px;border-radius:10px;margin-top:12px}
.native-agreed svg{width:18px;height:18px}.native-agreed strong{font-size:14px}
.workflow-grid .native-after p{font-size:10px;text-align:center;line-height:1.45;margin-top:10px;color:#797387}
.workflow-scene.is-current .native-before{animation:workflow-before .3s 1.6s both}
.workflow-scene.is-current .native-after{animation:workflow-reveal .4s 1.8s both}
.native-email-from{display:flex;align-items:center;gap:9px}.native-email-from>div{display:flex;flex-direction:column;gap:4px}.native-email-from strong{font-size:12px}.native-email-from small{font-size:9px;color:#797489}
.workflow-grid .native-content h4{font-family:inherit;margin:17px 0 10px;font-size:14px;font-weight:650;line-height:1.35;letter-spacing:-.2px}
.workflow-grid .native-email p{font-size:12px;color:#4c465f;line-height:1.6;margin:11px 0}
.native-attachment{display:flex;align-items:center;gap:8px;border:1px solid #e2dfef;border-radius:12px;padding:12px 8px;background:#fbfaff;margin-top:15px}
.native-attachment svg{width:23px;height:27px;color:#5856d6;flex-shrink:0}
.native-attachment>div{display:flex;flex-direction:column;gap:4px;min-width:0}.native-attachment strong{font-size:11px;overflow-wrap:anywhere}.native-attachment small{font-size:9px;color:#81788d}
.native-segment{display:flex;background:#c8c4de72;border-radius:9px;padding:3px;margin-bottom:13px;font-size:11px;text-align:center}.native-segment>*{width:50%;padding:6px 0}.native-segment strong{background:#fffffff0;border-radius:7px;color:#5856d6;box-shadow:0 1px 3px #30254612}
.native-paper{padding:17px 15px;background:#fff;border:1px solid #e3dfec;box-shadow:0 3px 7px #382a5020;border-radius:3px}
.native-paper>small{font-size:8px;font-weight:700;letter-spacing:2px}.workflow-grid .native-paper h4{font-size:20px;letter-spacing:-.7px;margin:4px 0}
.workflow-grid .native-paper>p{font-size:8px;color:#666575;letter-spacing:.5px;margin:0;line-height:1.5}.native-paper-line{height:2px;background:#302843;margin:14px 0}
.native-paper-field{margin-top:11px;display:flex;flex-direction:column;gap:4px}.native-paper-field>small{font-size:8px;letter-spacing:.5px;color:#777285}
.native-picked{position:relative;padding:7px;border:1.5px solid #5856d6;border-radius:5px;display:flex;justify-content:space-between;font-size:12px;gap:5px}
.native-picked>span{color:#5856d6}.workflow-scene.is-current .native-picked{animation:workflow-pick .5s var(--pick-delay) both}
.native-review-bar{position:relative;display:flex;justify-content:space-between;padding:12px 3px;font-size:11px;color:#5856d6}.native-review-bar>span:first-child{color:#777183}.native-review-bar .demo-tap{right:13px;border-color:#5856d6;background:#5856d62d;box-shadow:0 0 0 5px #5856d615}
.workflow-grid .native-review-note{margin:0 0 16px}.native-review-items>div{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-bottom:1px solid #eae6f1}.native-review-items>div:first-child{padding-top:2px}.native-review-items>div:last-child{border:0;padding-bottom:2px}.native-review-items small{color:#5856d6;font-size:10px}.native-review-items strong{font-size:14px}.native-review-items span{font-size:10px;color:#857b91}
.native-details{padding:9px 13px;margin-bottom:8px}.native-added{border-radius:8px;padding-left:4px}.workflow-scene.is-current .native-added{animation:workflow-added 1.6s .2s both}
.native-filed{margin-top:0;background:#ffffffc7}.native-filed>svg:last-child{margin-left:auto;width:16px;color:#34a15a}
.native-route-title{display:flex;align-items:center;gap:8px;font-size:11px}.native-route-title svg{width:20px;height:20px;color:#5856d6}.native-route-card{padding:12px;overflow:hidden}
.native-map{height:137px;position:relative;overflow:hidden;background:#f0f1ee;border-radius:12px;margin:13px -3px 12px;background-image:linear-gradient(35deg,transparent 46%,#e2e8da 47%,#e2e8da 60%,transparent 61%)}
.native-map svg{width:100%;height:100%;position:absolute;inset:0;fill:none}.map-road{stroke:white;stroke-width:7;stroke-linejoin:round}.map-river{stroke:#c3dfef;stroke-width:17}.map-route{stroke:#5856d6;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.map-point{stroke:white;stroke-width:3;fill:#5856d6}.map-end{fill:#af52de}
.workflow-scene.is-current .map-route{stroke-dasharray:245;animation:workflow-route 1.4s .2s both}
.map-home,.map-shoot{position:absolute;font-size:9px;font-weight:600;padding:3px 6px;background:white;border-radius:5px;box-shadow:0 2px 4px #2221}.map-home{left:6%;bottom:10px}.map-shoot{right:8%;top:15px}
.native-route-stats{display:flex;justify-content:space-around;text-align:center}.native-route-stats>div{display:flex;flex-direction:column;gap:5px}.native-route-stats strong{font-size:15px;color:#5856d6}.native-route-stats small{font-size:9px;color:#857e91}
.native-subtitle{margin:4px 0 17px}.workflow-grid .native-mileage h4{margin:0 0 12px;font-size:16px}
.native-mileage>div,.native-fee-breakdown>div{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:11px;gap:5px}.native-mileage>div>span{color:#6f667e}.native-mileage-total{padding-top:11px;border-top:1px solid #e8e2ef}.native-mileage-total strong{color:#5856d6;font-size:16px}
.native-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.native-toggle-row>strong{font-size:11px;max-width:180px}
.native-switch{position:relative;flex-shrink:0;width:34px;height:21px;border-radius:20px;background:#d7d6de;display:block}.native-switch:before{content:'';position:absolute;left:2px;top:2px;border-radius:50%;width:17px;height:17px;background:white;box-shadow:0 1px 3px #23213730}.native-switch-on{background:#5856d6}.native-switch-on:before{transform:translateX(13px)}
.workflow-grid .native-toggle-help{color:#85788e;font-size:10px;line-height:1.4;margin:8px 0 0}
.workflow-scene.is-current .native-switch-on{animation:workflow-switch .25s .65s both}.workflow-scene.is-current .native-switch-on:before{animation:workflow-knob .25s .65s both}
.native-fee-breakdown{padding:10px 13px}.native-fee-breakdown>div{margin:7px 0}.native-fee-breakdown>div>span{color:#726a80}.native-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d7d7e8;padding-top:10px;margin-top:10px;font-weight:650}.native-total strong{font-size:19px;color:#5856d6}
.native-travel-added{color:#5856d6}.workflow-scene.is-current .native-fee-breakdown .native-travel-added{animation:workflow-reveal .35s .95s both}
.native-invoice-head{display:flex;justify-content:space-between;align-items:center;margin:0 3px 12px}.native-invoice-head>div{display:flex;flex-direction:column;gap:3px}.native-invoice-head small{font-size:9px;letter-spacing:1.4px;color:#787182}.native-invoice-head strong{font-size:21px;letter-spacing:-.8px}
.native-invoice{border-radius:9px;padding:14px}.native-invoice>small{display:block;font-size:8px;letter-spacing:1px;color:#88808e;margin:9px 0 4px}.native-invoice>small:first-child{margin-top:0}.native-invoice>strong{font-size:12px}
.native-invoice-line{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:14px 0}.native-invoice-line>div{display:flex;flex-direction:column;gap:4px}.native-invoice-line strong{font-size:11px}.native-invoice-line small{font-size:9px;color:#88808e}.native-invoice-line b{font-size:12px;white-space:nowrap}.native-invoice-subtotal{display:flex;justify-content:space-between;font-size:11px}
.native-invoice .native-vat{font-size:9px;letter-spacing:0}.native-pdf-action{display:flex;align-items:center;justify-content:center;gap:7px;color:#5856d6;font-size:11px;margin-top:10px}.native-pdf-action svg{width:16px;height:16px}
.workflow-steps{display:flex;gap:5px;margin-top:17px}.workflow-steps>button{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px;align-items:flex-start;border:0;border-top:2px solid #dce0ee;background:none;color:#717991;font-size:10px;font-weight:550;cursor:pointer;padding:8px 1px 6px;min-height:47px;text-align:left;white-space:nowrap}
.workflow-steps>button>span{font-size:9px;letter-spacing:.06em;opacity:.7}.workflow-steps>button[aria-pressed=true]{border-color:#5856d6;color:#4947c1}.workflow-steps>button:hover{color:#3634a3;border-color:#9c9be8}
.workflow-grid .workflow-caption{font-size:12px;color:#505c7c;line-height:1.55;min-height:38px;margin-top:7px}
.workflow-player{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:14px;border-top:1px solid #e4e7f0;padding-top:5px}.workflow-player>span{color:#9096a7;font-size:9px}.workflow-player>div{display:flex;gap:5px;align-items:center}.workflow-player button{border:0;background:none;color:#667399;font-size:10px;cursor:pointer;display:flex;align-items:center;gap:5px;min-height:35px;padding:5px}.workflow-player button:hover{color:#3634a3}.workflow-player svg{width:12px;height:12px}
.workflow-feature[data-playing=false] .workflow-scene *,.workflow-feature[data-playing=false] .workflow-scene *:before{animation-play-state:paused!important}
.workflow-feature[data-still=true] .workflow-scene *,.workflow-feature[data-still=true] .workflow-scene *:before{animation:none!important}
.workflow-feature[data-still=true] .native-before{display:none}
.workflow-feature[data-still=true] .native-after{opacity:1}
.workflow-feature[data-still=true] .native-picked{background:#e5e5fa}
.workflow-feature[data-still=true] .demo-tap{display:none}
@keyframes workflow-expand{from{max-height:0;opacity:0;transform:translateY(-8px)}to{max-height:750px;opacity:1;transform:translateY(0)}}
@keyframes workflow-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes workflow-before{to{opacity:0;visibility:hidden}}
@keyframes workflow-tap{0%,100%{opacity:0;transform:scale(1.3)}40%,65%{opacity:1;transform:scale(.8)}}
@keyframes workflow-pick{from{background:transparent;border-color:#bdbcf0}to{background:#e5e5fa;border-color:#5856d6}}
@keyframes workflow-added{0%,45%{background:#dddafa}100%{background:transparent}}
@keyframes workflow-route{from{stroke-dashoffset:245}to{stroke-dashoffset:0}}
@keyframes workflow-switch{from{background:#d7d6de}to{background:#5856d6}}
@keyframes workflow-knob{from{transform:translateX(0)}to{transform:translateX(13px)}}
@media(min-width:801px) and (max-width:1050px){.workflow-grid{gap:20px}.workflow-grid .native-content{padding-inline:10px}.workflow-grid .native-card{padding:11px}.workflow-grid .native-job strong{font-size:14px}.workflow-grid .native-job>div>span{font-size:9px}.workflow-grid .native-job{gap:8px}.workflow-grid .native-avatar{width:30px;height:30px;font-size:13px}.workflow-grid .native-toggle-row>strong{font-size:10px}}
@media(max-width:800px){.workflow-grid{gap:27px}.workflow-instruction{margin:-14px 0 26px!important}.workflow-grid .workflow-toggle{margin-top:17px;min-height:46px}.workflow-panel-inner{max-width:390px;margin:auto;padding-top:20px}.workflow-screen{height:510px}.workflow-grid .native-content{padding:11px 17px 12px}.workflow-grid .native-card{padding:16px}.workflow-grid .native-job strong{font-size:18px}.workflow-grid .native-job small,.workflow-grid .native-job>div>span{font-size:11px}.workflow-grid .native-row strong{font-size:13px}.workflow-steps>button{font-size:11px;min-height:51px}.workflow-grid .workflow-caption{font-size:13px}.workflow-player button{min-height:44px;font-size:11px}.workflow-hover-hint{display:none}.workflow-tap-hint{display:inline}}
@media(hover:none),(pointer:coarse){.workflow-hover-hint{display:none}.workflow-tap-hint{display:inline}}
@media(max-width:360px){.workflow-grid .native-content{padding-inline:12px}.workflow-grid .native-card{padding:13px}.workflow-grid .native-job strong{font-size:16px}.workflow-grid .native-job small,.workflow-grid .native-job>div>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.workflow-panel,.workflow-scene,.workflow-scene *,.workflow-scene *:before,.workflow-toggle,.workflow-toggle-icon svg{animation:none!important;transition:none!important}.native-before{display:none}.native-after{opacity:1}.native-picked{background:#e5e5fa}.native-result{opacity:1}.demo-tap{display:none}.workflow-hover-hint{display:none}.workflow-tap-hint{display:inline}}