/* Five illustration systems with different geometry and information hierarchy. */
.ob .pi{width:100%;position:relative;min-width:0;color:#3f354a;font-size:12px;line-height:1.5}.ob .pi h3{font-size:25px;line-height:1.15;letter-spacing:-.04em;margin:10px 0 16px}.ob .pi h4{font-size:11px;font-weight:600;margin:20px 0 10px;color:#7c6a8c}.ob .pi header{display:flex;align-items:center;justify-content:space-between;gap:12px}.ob .pi small{font-size:8px;letter-spacing:.1em}.ob .pi footer{font-size:10px;display:flex;align-items:center;gap:8px;line-height:1.6}.ob .pi :is(article,aside){min-width:0}.ob .pi label{font-size:10px;color:#8c7c99}.ob .pi svg{width:18px;height:18px}
.ob .pi-ledger{border:1px solid #d8d9e9;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 20px 40px #1b2b9310}.ob .pi-ledger header{padding:20px;border-bottom:1px solid #e6e7ee;font-size:13px}.ob .pi-ledger header span{font-size:10px;color:var(--pv-accent-ink)}.ob .pi-ledger-columns,.ob .pi-ledger-row{display:grid;grid-template-columns:1fr .8fr 1fr;gap:10px;padding:16px}.ob .pi-ledger-columns{font-size:8px;color:#8c82a0;background:#f7f7fb}.ob .pi-ledger-row{font-size:10px;border-top:1px solid #eeedf5;align-items:center}.ob .pi-ledger-row b{font-weight:500}.ob .pi-ledger-row i{font-style:normal;font-size:9px;color:#6677a7;background:#edf0ff;padding:4px 6px;border-radius:4px}.ob .pi-ledger-row i.warn{background:#fff0e6;color:var(--pv-accent-ink)}.ob .pi-ledger footer{padding:17px;background:#f7f8fd;color:var(--pv-accent-ink)}
.ob .pi-formula{background:#fff;border:1px solid #dbddeb;border-radius:15px;padding:26px;box-shadow:0 18px 35px #1b2b9310}.ob .pi-number-pair{display:flex;align-items:center;justify-content:space-around;margin:30px 0;gap:15px}.ob .pi-number-pair>div{display:flex;flex-direction:column;align-items:center;gap:8px}.ob .pi-number-pair>div>span{font-size:10px;color:#8a7a9a}.ob .pi-number-pair b{font-size:64px;font-weight:500;line-height:1;letter-spacing:-.07em;color:var(--pv-accent-ink)}.ob .pi-number-pair b small{font-size:20px;letter-spacing:0;margin-left:4px}.ob .pi-number-pair>i{font-size:30px;color:#c59075;font-style:normal}.ob .pi-equation-result{display:flex;flex-direction:column;gap:7px;padding:18px;background:#fff0e6;border-left:3px solid var(--pv-accent-ink)}.ob .pi-equation-result b{color:var(--pv-accent-ink);font-size:14px}.ob .pi-equation-result span{font-size:10px;color:#8f776c}.ob .pi-human-line{display:flex;gap:8px;align-items:center;margin-top:22px;font-size:9px;color:#8b7f9c}
.ob .pi-reconciliation{border:1px solid #dadbe8;border-radius:14px;background:#fff;overflow:hidden}.ob .pi-reconciliation header{padding:20px;align-items:flex-start;flex-direction:column}.ob .pi-recon-head,.ob .pi-recon-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:19px;border-top:1px solid #e7e6ef;font-size:11px}.ob .pi-recon-head{font-size:9px;color:#8f859d;background:#faf9fc}.ob .pi-recon-row>b{font-size:10px;font-weight:500;color:#798293}.ob .pi-recon-row.alert{background:#fff5ed;border-left:3px solid var(--pv-accent-ink)}.ob .pi-recon-row.alert>b{color:var(--pv-accent-ink)}.ob .pi-review-note{display:flex;gap:9px;align-items:center;padding:20px;background:#f2f3fc;font-size:10px;color:#62709c}
.ob .pi-exception-inbox{display:grid;grid-template-columns:90px minmax(0,1fr);border:1px solid #dedbea;border-radius:13px;background:#fff;overflow:hidden;min-height:310px}.ob .pi-exception-inbox aside{display:flex;flex-direction:column;gap:15px;background:#f8f7fb;border-right:1px solid #e3e1ec;padding:18px 9px;font-size:9px;color:#93869e}.ob .pi-exception-inbox aside>b{font-size:10px;color:#535282}.ob .pi-exception-inbox aside>span{padding:7px 4px}.ob .pi-exception-inbox aside .selected{color:var(--pv-accent-ink);background:#e9edff;border-radius:5px}.ob .pi-exception-inbox aside i{font-size:8px;font-style:normal;margin-left:5px}.ob .pi-exception-inbox article{padding:23px 16px}.ob .pi-exception-inbox h3{font-size:24px}.ob .pi-inbox-evidence{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;border-block:1px solid #e9e5f1;padding:17px 0;margin:18px 0}.ob .pi-inbox-evidence b{font-size:22px;color:var(--pv-accent-ink)}.ob .pi-inbox-evidence span{font-size:10px;color:#9888a6;align-self:center}.ob .pi-assignee{display:flex;align-items:center;gap:9px}.ob .pi-assignee .pv-avatar{width:30px;height:30px;font-size:9px}.ob .pi-assignee>div{display:flex;flex-direction:column;gap:3px}.ob .pi-assignee b{font-size:9px}.ob .pi-assignee small{font-size:7px;letter-spacing:0}
.ob .pi-approval-document{position:relative;padding:35px 25px 20px;background:#fff;box-shadow:0 16px 30px #1b2b9315;border:1px solid #dedbea;border-radius:3px;max-width:86%;margin:auto}.ob .pi-document-fold{position:absolute;right:0;top:0;border-left:25px solid #e8ebf7;border-top:25px solid var(--pv-tint)}.ob .pi-signoff-grid{display:grid;gap:13px;margin:23px 0}.ob .pi-signoff-grid>div{display:flex;justify-content:space-between;gap:13px;border-bottom:1px solid #edeaf3;padding-bottom:12px;font-size:10px}.ob .pi-signoff-grid span{color:#95869e}.ob .pi-signoff-grid b{font-weight:500;text-align:right}.ob .pi-signature{border:1px dashed #9ca6cc;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f7f8ff}.ob .pi-signature span{font-size:8px;letter-spacing:.1em;color:#7f8ab4}.ob .pi-signature i{font-style:normal;font-size:20px;color:#a9b2d1}.ob .pi-approval-document>p{font-size:9px;color:#95879e}
.ob .pi-file-transfer{display:flex;flex-direction:column;align-items:center;gap:20px}.ob .pi-file-source{display:flex;align-items:center;gap:20px}.ob .pi-file-icon{padding:18px;border:1px solid #dedbea;border-radius:4px;background:white;box-shadow:0 8px 20px #1b2b9309;display:flex;flex-direction:column;gap:8px}.ob .pi-file-icon svg{color:var(--pv-accent-ink)}.ob .pi-file-icon b{font-size:11px}.ob .pi-file-icon small{letter-spacing:0}.ob .pi-transfer-channel{display:flex;align-items:center;gap:8px;width:100%;font-size:9px;color:#6471a9}.ob .pi-transfer-channel>span{padding:10px 8px;background:#ffffffb0;border:1px solid #fff;border-radius:20px;text-align:center}.ob .pi-transfer-channel i{flex:1;border-top:2px dotted #9aa8cc;min-width:8px}.ob .pi-file-target{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.ob .pi-file-target>small{width:100%;text-align:center;letter-spacing:0}
.ob .pi-itinerary{position:relative;padding-top:30px}.ob .pi-itinerary-date{position:absolute;top:0;right:5px;background:var(--pv-accent-ink);border:4px solid #fff7ef;border-radius:13px;color:#fff;z-index:2;padding:12px 20px;display:flex;flex-direction:column;gap:6px;text-align:center;transform:rotate(6deg)}.ob .pi-itinerary-date small{color:#ffe7d8;font-size:7px}.ob .pi-itinerary-date>b{font-size:32px;line-height:1}.ob .pi-itinerary-paper{background:#fff;padding:28px 22px;border:1px solid #eedaca;border-radius:14px;box-shadow:0 16px 28px #b2603410}.ob .pi-itinerary-paper h3{font-size:26px;max-width:85%;color:var(--pv-accent-ink);margin:20px 0}.ob .pi-schedule{display:grid;grid-template-columns:55px 1fr;gap:8px;border-top:1px solid #efdfd1;padding:15px 0;font-size:11px}.ob .pi-schedule>b{color:var(--pv-accent-ink);font-size:10px}
.ob .pi-passport{background:#fff;border:1px solid #e8daca;border-radius:18px;padding:24px;box-shadow:0 16px 35px #b260340d}.ob .pi-passport-head{display:flex;align-items:center;gap:15px}.ob .pi-passport-head h3{font-size:22px;margin:5px 0}.ob .pi-passport-head>div>span{font-size:10px;color:#9e8177}.ob .pi-profile-tags{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.ob .pi-profile-tags>span{background:#fff4ea;border:1px solid #f1dfd0;border-radius:20px;padding:6px 10px;font-size:9px;color:#9b694d}.ob .pi-route-choice{border-top:1px solid #efdfd1;padding-top:20px}.ob .pi-route-choice>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.ob .pi-route-choice>div>span{background:#fff8f2;border-top:3px solid #dba481;padding:15px 7px;border-radius:7px;text-align:center;font-size:10px;color:#ad7250}
.ob .pi-folder{position:relative;padding:42px 0 0 8%;min-height:340px}.ob .pi-folder-tab{position:absolute;top:11px;left:4%;padding:10px 15px 45px;background:#e7ba94;border-radius:15px 15px 0 0;font-size:8px;letter-spacing:.1em;color:#865636;transform:rotate(-6deg)}.ob .pi-paper{border:1px solid #e7dacd;border-radius:10px;background:#fffaf6;padding:22px;box-shadow:0 12px 25px #b2603412}.ob .pi-paper-back{position:absolute;top:28px;left:4%;width:76%;height:250px;transform:rotate(-7deg);padding-top:25px}.ob .pi-paper-back>b{display:block;font-size:18px;margin-top:12px;color:#ad8061}.ob .pi-paper-lines{height:70px;margin-top:23px;background:repeating-linear-gradient(transparent 0,transparent 14px,#ecdfd3 14px,#ecdfd3 15px)}.ob .pi-paper-front{position:relative;background:#fff;width:94%;min-height:290px;transform:rotate(3deg)}.ob .pi-paper-front h3{font-size:23px;color:var(--pv-accent-ink)}.ob .pi-document-check{display:flex;justify-content:space-between;gap:9px;border-bottom:1px solid #f0e5dc;padding:11px 0;font-size:10px}.ob .pi-document-check>b{font-size:9px;font-weight:500;color:#af8060}
.ob .pi-team-relay header{flex-direction:column;align-items:flex-start}.ob .pi-team-relay h3{font-size:27px;max-width:70%;color:var(--pv-accent-ink)}.ob .pi-relay-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.ob .pi-relay-lanes>div{display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center}.ob .pi-relay-lanes b{font-size:12px}.ob .pi-relay-lanes small{font-size:8px;letter-spacing:0}.ob .pi-relay-lanes i{height:45px;border-left:2px dotted #c49b7c}.ob .pi-task-chip{font-size:9px;line-height:1.5;background:#fff;border:1px solid #eddfd3;padding:13px 6px;border-radius:10px;box-shadow:0 8px 15px #b260340b;min-height:55px;display:grid;place-items:center;width:100%}
.ob .pi-welcome-letter{background:#fffaf5;border:1px solid #fff;border-radius:16px;padding:25px;box-shadow:0 12px 30px #b2603414}.ob .pi-letter-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.ob .pi-letter-top small{font-size:7px}.ob .pi-letter-top>b{font-size:9px;margin-left:auto;color:var(--pv-accent-ink)}.ob .pi-welcome-letter h3{font-size:34px;color:var(--pv-accent-ink);margin:27px 0 20px}.ob .pi-welcome-letter>p{max-width:90%;color:#9c8070}.ob .pi-letter-appointment{display:flex;gap:14px;border-block:1px solid #eddcca;padding:18px 0;margin:23px 0}.ob .pi-letter-appointment>b{font-size:11px;color:var(--pv-accent-ink)}.ob .pi-letter-appointment>div{display:flex;flex-direction:column;gap:5px}.ob .pi-letter-appointment strong{font-size:11px;font-weight:500}.ob .pi-letter-appointment span{font-size:9px;color:#a38675}.ob .pi-letter-footer{display:flex;gap:10px;align-items:center;font-size:9px;color:#a38675}.ob .pi-letter-footer .pv-avatar{width:30px;height:30px;font-size:8px}
.ob .pi-desk-kit{padding-top:20px}.ob .pi-laptop{position:relative;width:91%;margin:auto}.ob .pi-laptop>div{aspect-ratio:1.5;background:linear-gradient(140deg,#fff9f0,#f6e6d5);border:9px solid #c7ac94;border-bottom-width:16px;border-radius:15px 15px 6px 6px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:18px}.ob .pi-laptop .brand-symbol{width:40px;height:40px}.ob .pi-laptop b{font-size:15px;font-weight:500;color:#98613e;text-align:center}.ob .pi-laptop small{font-size:8px;letter-spacing:0;text-align:center}.ob .pi-laptop>i{display:block;height:10px;background:#d9c1a9;border-radius:0 0 40px 40px;margin:0 -12px;box-shadow:0 12px 20px #b2603412}.ob .pi-kit-task{position:relative;margin:-10px 0 22px 24%;display:flex;gap:10px;padding:14px;background:white;border:1px solid #ebdbcc;border-radius:12px;box-shadow:0 10px 20px #b2603412}.ob .pi-kit-task>div{display:flex;flex-direction:column;gap:4px}.ob .pi-kit-task b{font-size:11px}.ob .pi-kit-task small{font-size:8px;letter-spacing:0}.ob .pi-kit-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ob .pi-pipeline-mini{background:#f5f6ff;border:1px solid #fff;border-radius:13px;padding:18px}.ob .pi-pipeline-labels{display:flex;gap:7px;justify-content:space-between;padding-bottom:20px}.ob .pi-pipeline-labels span{font-size:9px;color:#8b8eae;padding:7px;border-bottom:2px solid #dce0f1}.ob .pi-pipeline-labels .selected{color:var(--pv-accent-ink);border-color:var(--pv-accent-ink)}.ob .pi-candidate-ticket{background:#fff;border:1px solid #e0e3f0;border-radius:12px;padding:22px;max-width:90%;margin:auto;box-shadow:0 15px 25px #6371a912}.ob .pi-candidate-ticket>b{display:block;font-size:20px;margin-top:13px}.ob .pi-candidate-ticket>small{display:block;font-size:9px;letter-spacing:0;margin:8px 0 20px}.ob .pi-candidate-next{display:flex;gap:10px;align-items:center;border-top:1px solid #e9eaf5;padding-top:16px;color:var(--pv-accent-ink);font-size:10px}
.ob .pi-job-brief{padding:24px;background:#fff;border:1px solid #dfe1ee;border-radius:13px;box-shadow:0 12px 30px #6371a910}.ob .pi-job-label{font-size:8px;letter-spacing:.13em;color:#929bbd}.ob .pi-job-brief h3{font-size:31px;color:var(--pv-accent-ink);margin:20px 0 10px}.ob .pi-job-field{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e7e9f3;padding:13px 0;font-size:10px}.ob .pi-job-field span{color:#9a95ae}.ob .pi-job-field b{font-weight:500;text-align:right}.ob .pi-criteria{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}.ob .pi-criteria small{width:100%;margin-bottom:7px;font-size:7px}.ob .pi-criteria>span{font-size:8px;padding:5px 8px;background:#edf0ff;color:var(--pv-accent-ink);border-radius:6px}.ob .pi-job-brief footer{color:#939bbd;font-size:9px}
.ob .pi-cv-review{position:relative;padding-right:16%;padding-bottom:30px}.ob .pi-cv-review article{border:1px solid #dedfed;background:#fff;padding:25px;border-radius:4px;box-shadow:0 10px 25px #6371a911;min-height:340px}.ob .pi-cv-name{display:flex;align-items:center;gap:12px;margin:20px 0}.ob .pi-cv-name h3{font-size:23px;margin:0 0 5px}.ob .pi-cv-name span{font-size:10px;color:#8a829c}.ob .pi-cv-line{height:7px;background:#f0f0f6;border-radius:2px;width:95%;margin:9px 0}.ob .pi-cv-line.short{width:67%}.ob .pi-cv-chips{display:flex;gap:6px;font-size:8px;color:#8790b9}.ob .pi-cv-chips span{padding:5px 9px;background:#f3f5ff;border-radius:4px}.ob .pi-cv-doc{font-size:9px;display:flex;align-items:center;gap:8px;color:#9892a5}.ob .pi-cv-review aside{position:absolute;right:0;top:42%;background:#edf0ff;border:1px solid #d8def5;border-radius:12px;width:48%;padding:18px;box-shadow:0 10px 20px #6371a915}.ob .pi-cv-review aside>b{display:block;margin:13px 0;font-size:12px;color:var(--pv-accent-ink)}.ob .pi-cv-review aside p{font-size:10px}.ob .pi-cv-review aside>small{font-size:8px;letter-spacing:0}
.ob .pi-scheduler{background:#fff;border:1px solid #dedfed;border-radius:15px;padding:22px}.ob .pi-scheduler header{justify-content:flex-start}.ob .pi-scheduler h3{font-size:24px;margin:6px 0 0}.ob .pi-calendar-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.ob .pi-calendar-pair>div{display:flex;flex-direction:column;gap:10px;background:#f8f8fd;border:1px solid #edeef7;border-radius:10px;padding:15px}.ob .pi-calendar-pair b{font-size:12px}.ob .pi-calendar-pair small{font-size:7px}.ob .pi-calendar-pair span{border:1px solid #dfe3f5;border-radius:6px;padding:9px 5px;font-size:9px;text-align:center;background:white;color:#8985a2}.ob .pi-calendar-pair span.match{background:#edf0ff;color:var(--pv-accent-ink);border-color:#b5c0e7}.ob .pi-scheduler-result{background:#f3f5ff;color:#7c86b1;padding:16px;font-size:10px;border-radius:8px}.ob .pi-scheduler-result b{display:block;font-size:11px;color:var(--pv-accent-ink);margin-top:5px}
.ob .pi-feedback{border-radius:15px;background:white;border:1px solid #dedfed;padding:24px}.ob .pi-feedback header{display:block}.ob .pi-feedback-person{display:flex;align-items:center;gap:10px;padding:14px 0;border-block:1px solid #eeedf5;margin:20px 0}.ob .pi-feedback-person b{font-size:10px}.ob .pi-feedback label{display:block;margin:15px 0 8px}.ob .pi-feedback-box{padding:14px;border:1px solid #e2e4f1;border-radius:7px;font-size:11px;color:#81758e;min-height:60px}.ob .pi-feedback-box.muted{color:#b2aaba;background:#faf9fc}.ob .pi-feedback footer{margin-top:20px;color:#929bbd;font-size:9px}
.ob .pi-hiring-bridge{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.ob .pi-hiring-origin{border:1px solid #e0e3f0;border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:13px;padding:20px}.ob .pi-hiring-origin>b{font-size:14px}.ob .pi-hiring-origin>span{font-size:10px;color:#9a90a6}.ob .pi-decision-gate{border:1px dashed #b3bfde;background:#f4f6ff;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;gap:12px;color:var(--pv-accent-ink)}.ob .pi-decision-gate b{font-size:12px}.ob .pi-decision-gate small{font-size:8px;letter-spacing:0}.ob .pi-hiring-destination{grid-column:1/-1;display:flex;align-items:center;gap:17px;border:1px solid #e0e3f0;border-radius:12px;background:#fff;padding:20px}.ob .pi-hiring-destination>div{display:flex;flex-direction:column;gap:6px}.ob .pi-hiring-destination b{font-size:13px}.ob .pi-hiring-destination span{font-size:9px;color:#9a90a6}
.ob .pi-week-sheet{border:1px solid #dce1d4;background:#fff;border-radius:14px;padding:23px;box-shadow:0 16px 30px #5060400b}.ob .pi-week-sheet header{align-items:flex-start;flex-direction:column;font-size:15px;margin-bottom:25px}.ob .pi-week-days{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.ob .pi-week-days>div{display:flex;flex-direction:column;gap:16px;align-items:center;background:#f8faf5;border:1px solid #e8ede1;padding:12px 2px;border-radius:7px}.ob .pi-week-days b{font-size:24px;font-weight:500;color:#68785c}.ob .pi-week-days>div>span{font-size:8px;padding:7px 3px}.ob .pi-week-days .leave{background:#e2ebd9;border-radius:4px;color:#6a7f57}.ob .pi-week-sheet footer{border-top:1px solid #e3e9dc;padding-top:20px;margin-top:25px;font-size:10px;color:#78876e}
.ob .pi-leave-policy{border:1px solid #d9e1cd;background:#fff;border-radius:14px;padding:25px}.ob .pi-leave-type h3{color:#5f7251;font-size:28px}.ob .pi-leave-type>span{font-size:12px;color:#929c86}.ob .pi-day-counter{display:flex;justify-content:space-between;gap:12px;margin:25px 0}.ob .pi-day-counter>span{background:#e8efe0;border-radius:10px;padding:15px;flex:1;text-align:center;font-size:8px;color:#849576}.ob .pi-day-counter b{display:block;font-size:34px;font-weight:500;line-height:1.3;color:#687c55}.ob .pi-policy-route{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1px solid #e6eadf;padding-top:20px;margin-bottom:20px}.ob .pi-policy-route>div{display:flex;align-items:center;gap:10px;font-size:9px}.ob .pi-policy-route i{font-size:11px;border:1px solid #ccd7c1;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-style:normal;color:#829671}.ob .pi-policy-route b{font-size:8px;font-weight:500;color:#9ca48e}.ob .pi-leave-policy>small{font-size:8px;letter-spacing:0}
.ob .pi-timesheet{border:1px solid #dce1d4;background:white;border-radius:13px;overflow:hidden}.ob .pi-timesheet header{padding:22px;align-items:flex-start;flex-direction:column}.ob .pi-time-row{display:grid;grid-template-columns:1.1fr .8fr .8fr 1fr;gap:7px;font-size:9px;padding:16px 12px;border-top:1px solid #e7ebdf}.ob .pi-time-row b{font-weight:500}.ob .pi-time-head{font-size:8px;background:#f6f8f1;color:#a0a78f}.ob .pi-time-row.alert{background:#fff4ea;color:#b18a62}.ob .pi-timesheet footer{padding:20px;background:#f6f8f1;color:#8c997c;font-size:9px}
.ob .pi-clock-check{position:relative;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.ob .pi-clock-face{position:relative;aspect-ratio:1;border:9px solid #d1ddc5;border-radius:50%;background:#fafff6;box-shadow:0 10px 20px #6e805317;max-width:190px;width:100%;margin:auto}.ob .pi-clock-face>span{position:absolute;font-size:10px;color:#93a083}.ob .pi-clock-face>span:nth-child(1){top:7px;left:45%}.ob .pi-clock-face>span:nth-child(2){top:46%;right:10px}.ob .pi-clock-face>span:nth-child(3){bottom:7px;left:47%}.ob .pi-clock-face>span:nth-child(4){top:46%;left:10px}.ob .pi-clock-face>i,.ob .pi-clock-face>b{position:absolute;left:49%;top:26%;height:25%;width:3px;border-radius:3px;background:#7c8f67;transform-origin:bottom}.ob .pi-clock-face>b{transform:rotate(120deg);top:20%;height:31%;background:#b2bea3;width:2px}.ob .pi-clock-record{border-left:1px solid #cfd9c3;padding-left:18px}.ob .pi-clock-record>div{display:flex;flex-direction:column;gap:5px;margin-top:20px;font-size:9px;color:#99a18e}.ob .pi-clock-record b{font-size:21px;font-weight:500;color:#718460}.ob .pi-clock-record .missing b{font-size:15px;color:#b79a7d}.ob .pi-clock-callout{grid-column:1/-1;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #dce3d1;border-radius:12px;padding:20px;margin-top:15px}.ob .pi-clock-callout>div{display:flex;flex-direction:column;gap:6px}.ob .pi-clock-callout b{font-size:13px;color:#728662}.ob .pi-clock-callout span{font-size:10px;color:#99a18e}
.ob .pi-team-planning{background:#fff;border:1px solid #d9e1cd;border-radius:15px;padding:22px}.ob .pi-team-planning header{display:block}.ob .pi-team-planning h3{font-size:26px;color:#718460}.ob .pi-planning-head,.ob .pi-planning-row{display:grid;grid-template-columns:65px repeat(5,1fr);gap:5px;padding:12px 0;align-items:center}.ob .pi-planning-head span{font-size:8px;text-align:center;color:#a4ae9a}.ob .pi-planning-row{border-top:1px solid #edf0e7}.ob .pi-planning-row b{font-size:9px;font-weight:500}.ob .pi-planning-row>span{height:22px;border-radius:3px}.ob .pi-planning-row .work{background:#edf1e6}.ob .pi-planning-row .leave{background:#bdcfaa}.ob .pi-planning-key{display:flex;gap:18px;justify-content:flex-end;font-size:8px;color:#9caa8f;margin:15px 0}.ob .pi-planning-key>span::before{content:'';display:inline-block;width:7px;height:7px;background:#edf1e6;margin-right:4px}.ob .pi-planning-key>span+span::before{background:#bdcfaa}.ob .pi-manager-decision{border:1px dashed #c4d2b5;border-radius:8px;padding:15px;font-size:11px;margin-top:20px}.ob .pi-manager-decision b{display:block;font-size:9px;font-weight:500;color:#99aa89;margin-top:7px}
.ob .pi-daily-totals{padding:22px;background:#ffffffb8;border:1px solid #fff;border-radius:12px}.ob .pi-daily-totals>div{display:grid;grid-template-columns:75px 1fr;gap:12px;align-items:center;margin-top:19px;font-size:10px;color:#95a185}.ob .pi-daily-totals i{display:block;height:13px;background:#b9cda3;width:var(--length);border-radius:3px}.ob .pi-daily-totals>div:nth-of-type(2) i{background:#cddbbd}.ob .pi-daily-totals>div:nth-of-type(3) i{background:#e1dac9}.ob .pi-export-batch{display:flex;gap:13px;background:#fff;border:1px solid #d7e0ca;border-radius:11px;padding:20px;width:90%;margin:20px auto;box-shadow:0 8px 20px #697d5010}.ob .pi-export-batch>div{display:flex;flex-direction:column;gap:6px}.ob .pi-export-batch b{font-size:13px}.ob .pi-export-batch span{font-size:9px;color:#a1a98f}.ob .pi-export-destinations{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.ob .pi-absence-export>small{display:block;text-align:center;font-size:8px;letter-spacing:0;margin-top:20px}
.ob .pi-exit-stage{background:#fff;border:1px solid #e1dcea;border-radius:16px;padding:25px}.ob .pi-exit-stamp{background:#ecedf5;border:1px solid #d7d9e9;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;margin-bottom:23px;color:#7e85ad}.ob .pi-exit-stamp svg{width:26px;height:26px}.ob .pi-exit-stage h3{color:#656c9a;font-size:26px;margin:15px 0 22px}.ob .pi-receipt-line{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #e9e5f0;font-size:10px}.ob .pi-receipt-line b{font-size:9px;font-weight:500;color:#9298b7;text-align:right}
.ob .pi-permissions{background:#fff;border:1px solid #dfd9e9;border-radius:14px;padding:24px}.ob .pi-permissions header{justify-content:flex-start;gap:15px}.ob .pi-permissions h3{font-size:23px;margin:5px 0}.ob .pi-permissions header>div>span{font-size:9px;color:#a095ae}.ob .pi-permission-tree{padding-left:17px;margin:25px 0 0 17px;border-left:2px dotted #c4b9d4;display:grid;gap:14px}.ob .pi-permission-tree>div{position:relative;display:grid;grid-template-columns:35px 1fr;gap:5px 11px;border:1px solid #ebe6f1;border-radius:10px;padding:12px}.ob .pi-permission-tree>div::before{content:'';position:absolute;top:50%;left:-20px;width:18px;border-top:2px dotted #c4b9d4}.ob .pi-permission-tree .pv-icon{grid-row:span 2;width:32px;height:32px;align-self:center}.ob .pi-permission-tree b{font-size:11px}.ob .pi-permission-tree small{font-size:8px;letter-spacing:0}
.ob .pi-equipment{position:relative}.ob .pi-device-drawing{width:68%;margin:5px auto 25px}.ob .pi-device-drawing>div{aspect-ratio:1.5;display:grid;place-items:center;background:#e9e7f0;border:8px solid #8d91af;border-bottom-width:13px;border-radius:9px}.ob .pi-device-drawing .brand-symbol{width:30px;height:30px}.ob .pi-device-drawing>i{display:block;height:8px;background:#babbd0;margin:0 -10px;border-radius:0 0 50px 50px}.ob .pi-asset-tag{position:relative;width:83%;background:white;border:1px solid #ded8e9;border-radius:12px;padding:18px;margin:-35px 0 18px 17%;box-shadow:0 12px 20px #40345b10}.ob .pi-asset-tag h3{font-size:23px;margin:10px 0}.ob .pi-asset-tag>span{font-size:9px;color:#a299af}.ob .pi-receipt{border:1px dashed #c5bdd4;padding:20px;background:#faf8fe;border-radius:10px;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:10px}.ob .pi-receipt>b,.ob .pi-receipt>i{text-align:right;font-weight:500;font-style:normal;color:#8e85a7}.ob .pi-receipt>i{color:#b19c87}
.ob .pi-exit-countdown{border-radius:15px;overflow:hidden;border:1px solid #ded8e9;background:white}.ob .pi-exit-countdown header{padding:22px;background:var(--pv-accent-ink);align-items:flex-start;flex-direction:column;color:#fff}.ob .pi-exit-countdown header small{color:#c7c9df}.ob .pi-exit-countdown header b{font-size:58px;line-height:1;font-weight:500;letter-spacing:-.06em}.ob .pi-exit-countdown header b>span{font-size:12px;letter-spacing:.12em;margin-left:12px;font-weight:400}.ob .pi-deadlines{padding:12px 20px}.ob .pi-deadlines>div{display:grid;grid-template-columns:45px 1fr 42px;gap:10px;align-items:center;border-bottom:1px solid #ece8f2;padding:16px 0;font-size:9px}.ob .pi-deadlines b{font-size:10px;font-weight:500}.ob .pi-deadlines i{font-style:normal;text-align:right;color:#a09ab5}.ob .pi-exit-countdown footer{padding:17px 20px;background:#f7f6fb;font-size:8px;color:#a59ab3}
.ob .pi-handover-board header{display:block}.ob .pi-handover-board h3{font-size:28px;color:#74799e;max-width:80%}.ob .pi-handover-column{display:flex;align-items:center;gap:12px;margin:28px 0}.ob .pi-handover-column>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;background:#fff;border:1px solid #e2dceb;border-radius:13px;padding:20px 13px;min-height:173px;justify-content:center}.ob .pi-handover-column b{font-size:11px}.ob .pi-handover-column small{font-size:8px;letter-spacing:0}.ob .pi-handover-column>i{color:#b5adca}.ob .pi-handover-note{background:#f9f8fe;border-left:3px solid #bfc0d9;padding:18px;display:flex;flex-direction:column;gap:7px}.ob .pi-handover-note b{font-size:11px;color:#9294b1}.ob .pi-handover-note>span{font-size:10px;color:#a8a1b5}
.ob .pi-access-audit{padding:22px;background:white;border:1px solid #dfd9e9;border-radius:15px}.ob .pi-access-audit header{justify-content:flex-start;gap:12px;margin-bottom:24px}.ob .pi-access-audit h3{font-size:24px;margin:7px 0 0}.ob .pi-access-app{display:flex;align-items:center;gap:15px;padding:17px 0;border-top:1px solid #eee8f4}.ob .pi-access-app>div{display:flex;flex-direction:column;gap:6px}.ob .pi-access-app b{font-size:11px}.ob .pi-access-app div>span{font-size:9px;color:#a99ab8}.ob .pi-audit-trail{background:#f5f3fa;border:1px solid #e7e1ef;border-radius:8px;padding:16px;margin-top:20px}.ob .pi-audit-trail p{font-size:11px}.ob .pi-audit-trail>span{font-size:8px;color:#aaa0b8}
/* Visual rhythm and colour clearly vary between pages, with the same brand type. */
.ob.pv-page.pv-paie{background:#fbfbff}.ob.pv-page.pv-onboarding{background:#fffbf5}.ob.pv-page.pv-recrutement{background:#fafaff}.ob.pv-page.pv-absences{background:#fafcf6}.ob.pv-page.pv-offboarding{background:#fbf9fd}
.ob.pv-page.pv-paie .ob-hero{background:linear-gradient(135deg,#edf0ff00,#edf0ff);border-radius:0 0 48px 48px;padding-inline:20px}.ob.pv-page.pv-onboarding .ob-hero{background:#fff0e6;padding-inline:25px;border-radius:0 0 80px 24px}.ob.pv-page.pv-recrutement .ob-hero>.pv-hero{background:#e6eafd}.ob.pv-page.pv-absences .ob-hero{border-bottom:1px solid #dce6cf}.ob.pv-page.pv-offboarding .ob-hero>.pv-hero{background:#e6e5f0}.ob.pv-page.pv-recrutement .ob-feature{border-top:3px solid #d3daf1}.ob.pv-page.pv-offboarding .ob-feature{border:1px solid #dfd8e9}
/* Each business process has an appropriate animated detail. All stop offscreen. */
@keyframes pi-recon{0%,100%{background:#fff5ed}45%,65%{background:#ffe6d3}}@keyframes pi-relay{0%,15%,100%{border-color:#eddfd3;box-shadow:none}35%,65%{border-color:#c58f65;box-shadow:0 5px 16px #b2603418}}@keyframes pi-slot{0%,20%,100%{background:#edf0ff}45%,70%{background:#dce4ff}}@keyframes pi-clock{0%,20%{transform:rotate(120deg)}70%,100%{transform:rotate(150deg)}}@keyframes pi-audit{0%,100%{border-left-color:#e7e1ef}35%,65%{border-left-color:#9a8aae}}
.ob .pi-recon-row.alert{animation:pi-recon 7s infinite paused}.ob .pi-relay-lanes>div:nth-child(1) .pi-task-chip{animation:pi-relay 6s infinite paused}.ob .pi-relay-lanes>div:nth-child(2) .pi-task-chip{animation:pi-relay 6s 1s infinite paused}.ob .pi-relay-lanes>div:nth-child(3) .pi-task-chip{animation:pi-relay 6s 2s infinite paused}.ob .pi-calendar-pair .match{animation:pi-slot 6s infinite paused}.ob .pi-clock-face>b{animation:pi-clock 8s ease-in-out infinite paused}.ob .pi-audit-trail{border-left:3px solid #e7e1ef;animation:pi-audit 7s infinite paused}
.ob .pv-scene[data-visible=true] .pi :is(.alert,.pi-task-chip,.match,.pi-clock-face>b,.pi-audit-trail){animation-play-state:running}.ob.motion-paused .pi *{animation-play-state:paused!important}body.motion-paused .ob .pi *{animation-play-state:paused!important}
@media(max-width:1050px){.ob .pi h3{font-size:22px}.ob .pi-number-pair b{font-size:52px}.ob .pi :is(.pi-job-brief,.pi-leave-policy,.pi-feedback,.pi-access-audit,.pi-permissions,.pi-team-planning){padding:18px}.ob .pi-relay-lanes{gap:7px}.ob .pi-exception-inbox{grid-template-columns:73px 1fr}.ob .pi-exception-inbox article{padding:20px 12px}.ob .pi-cv-review{padding-right:10%}.ob .pi-cv-review aside{width:49%;padding:13px}.ob .pi-calendar-pair>div{padding:10px}.ob .pi-day-counter>span{padding:12px 5px}}
@media(max-width:850px){.ob .pi{max-width:540px;margin:auto}.ob.pv-page.pv-onboarding .ob-hero,.ob.pv-page.pv-paie .ob-hero{padding-inline:18px}.ob .pi .pi-relay-lanes{gap:15px}.ob .pi-cv-review{padding-right:19%}.ob .pi-cv-review aside{width:45%;padding:20px}.ob .pi-number-pair b{font-size:64px}.ob .pi-clock-face{max-width:175px}.ob .pi-stages{width:100%}}
@media(max-width:520px){.ob.pv-page.pv-onboarding .ob-hero,.ob.pv-page.pv-paie .ob-hero{padding-inline:0;background:transparent}.ob .pi h3{font-size:23px}.ob .pi-number-pair b{font-size:50px}.ob .pi-formula{padding:20px}.ob .pi-human-line{font-size:8px}.ob .pi-exception-inbox{grid-template-columns:65px 1fr}.ob .pi-exception-inbox aside{padding:15px 6px;font-size:8px}.ob .pi-exception-inbox aside>b{font-size:9px}.ob .pi-exception-inbox h3{font-size:21px}.ob .pi-exception-inbox article{padding:18px 12px}.ob .pi-assignee b{font-size:8px}.ob .pi-assignee small{font-size:7px}.ob .pi-approval-document{max-width:93%;padding:28px 18px 18px}.ob .pi-transfer-channel{font-size:8px;gap:5px}.ob .pi-transfer-channel>span{padding:8px 5px}.ob .pi-file-source{gap:13px}.ob .pi-passport{padding:18px}.ob .pi-passport-head{gap:10px}.ob .pi-passport-head h3{font-size:20px}.ob .pi-route-choice>div{gap:5px}.ob .pi-route-choice>div>span{font-size:9px;padding:12px 5px}.ob .pi-folder{padding-left:7%;min-height:320px}.ob .pi-paper{padding:18px}.ob .pi-paper-front h3{font-size:21px}.ob .pi-document-check{font-size:9px}.ob .pi .pi-relay-lanes{gap:7px}.ob .pi-team-relay h3{max-width:90%}.ob .pi-relay-lanes b{font-size:10px}.ob .pi-relay-lanes small{font-size:7px}.ob .pi-task-chip{font-size:8px;padding:10px 5px}.ob .pi-welcome-letter{padding:20px}.ob .pi-welcome-letter h3{font-size:31px}.ob .pi-laptop>div{padding:13px;border-width:7px;border-bottom-width:13px}.ob .pi-laptop b{font-size:12px}.ob .pi-kit-task{margin-left:14%;padding:12px}.ob .pi-job-brief h3{font-size:28px}.ob .pi-cv-review{padding-right:15%;padding-bottom:45px}.ob .pi-cv-review article{padding:20px 15px}.ob .pi-cv-name{gap:8px}.ob .pi-cv-name h3{font-size:20px}.ob .pi-cv-review aside{width:49%;top:44%;padding:13px}.ob .pi-cv-review aside p{font-size:9px}.ob .pi-scheduler{padding:18px}.ob .pi-scheduler h3{font-size:22px}.ob .pi-calendar-pair{gap:8px}.ob .pi-calendar-pair>div{padding:10px 7px}.ob .pi-calendar-pair span{font-size:8px;padding:8px 3px}.ob .pi-feedback-box{font-size:10px}.ob .pi-hiring-bridge{gap:12px}.ob .pi-hiring-origin{padding:15px}.ob .pi-hiring-origin>b{font-size:12px}.ob .pi-hiring-origin>span{font-size:9px}.ob .pi-decision-gate{padding:16px 10px;gap:8px}.ob .pi-decision-gate b{font-size:10px}.ob .pi-decision-gate small{font-size:7px}.ob .pi-hiring-destination{padding:16px;gap:12px}.ob .pi-hiring-destination b{font-size:11px}.ob .pi-week-sheet{padding:18px 12px}.ob .pi-week-days{gap:4px}.ob .pi-week-days b{font-size:22px}.ob .pi-week-days small{font-size:7px}.ob .pi-week-days>div>span{font-size:7px}.ob .pi-policy-route{gap:8px}.ob .pi-policy-route>div{font-size:8px;gap:7px}.ob .pi-policy-route i{width:22px;height:22px;flex-shrink:0}.ob .pi-timesheet header{padding:20px 14px}.ob .pi-time-row{font-size:8px;gap:5px;padding:15px 9px}.ob .pi-clock-check{gap:12px}.ob .pi-clock-face{border-width:7px}.ob .pi-clock-record{padding-left:13px}.ob .pi-clock-record .missing b{font-size:13px}.ob .pi-clock-callout{padding:15px;gap:10px}.ob .pi-clock-callout span{font-size:9px}.ob .pi-team-planning{padding:18px 13px}.ob .pi-planning-head,.ob .pi-planning-row{grid-template-columns:55px repeat(5,1fr);gap:4px}.ob .pi-planning-row b{font-size:8px}.ob .pi-permissions{padding:18px 14px}.ob .pi-permission-tree{padding-left:13px;margin-left:11px}.ob .pi-permission-tree>div{gap:5px 8px;padding:10px}.ob .pi-permission-tree>div::before{width:14px;left:-16px}.ob .pi-permission-tree b{font-size:10px}.ob .pi-permission-tree small{font-size:7px}.ob .pi-asset-tag h3{font-size:21px}.ob .pi-receipt{padding:17px;font-size:9px}.ob .pi-deadlines>div{grid-template-columns:36px 1fr 35px;gap:7px}.ob .pi-deadlines b{font-size:9px}.ob .pi-handover-board h3{font-size:25px;max-width:95%}.ob .pi-handover-column{gap:8px}.ob .pi-handover-column>div{padding:16px 9px}.ob .pi-handover-column b{font-size:10px}.ob .pi-handover-column small{font-size:7px}.ob .pi-access-app{gap:10px}.ob .pi-access-app b{font-size:10px}.ob .pi-access-app div>span{font-size:8px}.ob .pi-ledger header{padding:17px 14px}.ob .pi-ledger-columns,.ob .pi-ledger-row{padding:14px 11px;gap:7px}.ob .pi-ledger-row{font-size:9px}}
@media(prefers-reduced-motion:reduce){.ob .pi *{animation:none!important}}
.ob .pi-payroll-chain{background:#fff;border:1px solid #d9ddf1;border-radius:14px;padding:24px}.ob .pi-payroll-chain header{display:block}.ob .pi-payroll-chain h3{color:var(--pv-accent-ink)}.ob .pi-payroll-chain>div{display:grid;gap:10px;margin-top:22px}.ob .pi-payroll-chain article{display:grid;grid-template-columns:38px 1fr;gap:3px 13px;align-items:center;padding:15px;background:#f7f8fe;border:1px solid #e5e8f5;border-radius:9px}.ob .pi-payroll-chain article>b{grid-row:span 2;color:#bec6e5;font-size:26px;font-weight:500}.ob .pi-payroll-chain article>span{font-size:12px}.ob .pi-payroll-chain article>small{font-size:8px;letter-spacing:0}.ob .pi-payroll-chain article.gate{border-style:dashed;border-color:#a9b5de;background:#fff}
.ob .pi-arrival-trigger{background:#fff;border:1px solid #ead6c4;border-radius:15px;padding:22px;width:72%;margin:auto;display:flex;align-items:center;flex-direction:column;gap:10px}.ob .pi-arrival-trigger>b{font-size:19px;color:var(--pv-accent-ink)}.ob .pi-arrival-trigger small{font-size:8px;letter-spacing:0}.ob .pi-arrival-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px;position:relative}.ob .pi-arrival-paths::before{content:'';position:absolute;left:16%;right:16%;top:-20px;height:19px;border:2px dotted #c69e7c;border-bottom:0}.ob .pi-arrival-paths>span{position:relative;text-align:center;padding:20px 8px;background:#fff7ee;border:1px solid #e5cdb9;border-radius:10px;font-size:9px;color:#ba967e}.ob .pi-arrival-paths b{display:block;font-size:12px;font-weight:500;color:var(--pv-accent-ink);margin-top:7px}.ob .pi-arrival-outcome{text-align:center;font-size:11px;color:#b68b70;border-top:1px solid #e4ccba;margin-top:25px;padding-top:20px}
.ob .pi-recruit-log{border:1px solid #dee2f5;border-radius:12px;background:#fff;padding:24px}.ob .pi-recruit-log header{display:block}.ob .pi-recruit-log>div{position:relative;display:flex;flex-direction:column;gap:7px;border-left:1px solid #ccd3ec;padding:8px 0 24px 22px;margin-left:6px}.ob .pi-recruit-log>div>i{position:absolute;left:-5px;top:12px;border:2px solid #c1cbea;background:white;width:9px;height:9px;border-radius:50%}.ob .pi-recruit-log>div>b{font-size:13px;font-weight:500;color:var(--pv-accent-ink)}.ob .pi-recruit-log>div>small{font-size:7px;color:#a8aec9}.ob .pi-recruit-log footer{border-top:1px solid #edeff9;padding-top:17px;color:#a0a8c5;font-size:9px}
.ob .pi-leave-swimlanes{display:grid;gap:12px}.ob .pi-leave-swimlanes>div{display:grid;grid-template-columns:95px 1fr;gap:6px 16px;align-items:center;background:#fff;border:1px solid #d7e1c9;border-radius:12px;padding:22px 18px}.ob .pi-leave-swimlanes>div>span{grid-row:span 2;font-size:7px;letter-spacing:.08em;border-right:1px solid #dce5d1;color:#97a884;padding-right:12px}.ob .pi-leave-swimlanes>div>b{font-size:13px;color:#74895f;font-weight:500}.ob .pi-leave-swimlanes>div>small{font-size:8px;letter-spacing:0;color:#a1af92}
.ob .pi-exit-identity{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:#ffffffa0;border:1px solid #fff;border-radius:15px;width:75%;margin:auto}.ob .pi-exit-identity>b{font-size:18px;color:#74799e}.ob .pi-exit-identity>small{font-size:8px;letter-spacing:0}.ob .pi-exit-tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.ob .pi-exit-tasks>span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border:1px solid #dfd8e9;background:white;padding:18px 9px;border-radius:10px;font-size:9px;color:#9285a5}.ob .pi-exit-security{display:flex;gap:12px;align-items:center;padding:20px;border:1px dashed #b7abc9;border-radius:10px;background:#f9f7fe;color:#9d91ad}.ob .pi-exit-security>div{display:flex;flex-direction:column;gap:6px}.ob .pi-exit-security b{font-size:11px}.ob .pi-exit-security small{font-size:8px;letter-spacing:0}
@media(max-width:520px){.ob .pi-payroll-chain,.ob .pi-recruit-log{padding:19px 15px}.ob .pi-leave-swimlanes>div{grid-template-columns:78px 1fr;gap:5px 11px;padding:18px 13px}.ob .pi-leave-swimlanes>div>b{font-size:11px}.ob .pi-exit-tasks>span{font-size:8px;padding:15px 7px}}