/* Scalable HTML/SVG mobile concepts. No simulated controls or animation. */
.pvl-section .section-heading { align-items:end; gap:45px; }
.pvl-section .section-heading h2 { max-width:650px; }
.pvl-intro { max-width:330px; font-size:14px; line-height:1.9; padding-bottom:4px; }
.pvl-concept-label { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:650; color:var(--ink); margin-top:17px; }
.pvl-concept-label i { width:5px; height:5px; border-radius:50%; background:#738d82; }
.pvl-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; list-style:none; margin:43px 0 0; padding:0; }
.pvl-stage { min-width:0; display:flex; flex-direction:column; --scene:#e2eae3; --screen:#f8faf6; --accent:#1a5345; --tint:#dcebdc; }
.pvl-stage-work { --scene:#e2e8ef; --screen:#f7f9fc; --accent:#3055b4; --tint:#e4eafa; }
.pvl-stage-grow { --scene:#e8e4ed; --screen:#fbf9fd; --accent:#6f528c; --tint:#ebe1f2; }
.pvl-stage-leave { --scene:#eee8df; --screen:#fcfaf6; --accent:#86633a; --tint:#efe5d2; }
.pvl-stage-label { display:flex; align-items:center; gap:10px; margin-bottom:17px; font-size:11px; font-weight:650; }
.pvl-stage-label>span:first-child { color:var(--blue); font-size:9px; font-weight:650; }
.pvl-stage-label i { height:1px; background:#cbd5cb; flex:1; margin-left:4px; }
.pvl-device-scene { display:flex; justify-content:center; align-items:center; margin:0; padding:27px 15px 30px; background:var(--scene); border:1px solid #203c2910; border-radius:18px; overflow:hidden; }
.pvl-phone { width:100%; max-width:252px; aspect-ratio:1/2.18; padding:5px; border:1px solid #718078; border-radius:33px; background:#20332e; box-shadow:0 16px 24px -12px #20332e55,0 2px 3px #10251c40,inset 0 0 0 2px #4c5b55; container-type:inline-size; }
.pvl-screen { height:100%; border-radius:27px; overflow:hidden; background:var(--screen); display:flex; flex-direction:column; color:#203b34; font-family:Arial,Helvetica,sans-serif; line-height:1.35; letter-spacing:0; }
.pvl-screen b,.pvl-screen strong { font-weight:650; }.pvl-screen small { font-size:3.4cqw; }
.pvl-icon { width:5.8cqw; height:5.8cqw; flex-shrink:0; display:block; }
.pvl-status { display:flex; align-items:center; justify-content:space-between; height:11cqw; flex-shrink:0; padding:0 6.5cqw; position:relative; }
.pvl-status>b { font-size:3.5cqw; }.pvl-island { width:24cqw; height:6cqw; background:#20332e; border-radius:12px; position:absolute; left:38cqw; top:2cqw; }
.pvl-device-signals { display:flex; gap:1cqw; align-items:end; height:3cqw; }.pvl-device-signals i { width:1.2cqw; background:#203b34; height:70%; border-radius:1px; }.pvl-device-signals i:first-child { height:45%; }.pvl-device-signals i:nth-child(3) { height:100%; }.pvl-device-signals em { width:6cqw; height:3cqw; border:1px solid #203b34; border-radius:2px; margin-left:1cqw; background:linear-gradient(90deg,#203b34 75%,transparent 75%); }
.pvl-appbar { display:flex; align-items:center; justify-content:space-between; padding:2cqw 6cqw 4cqw; flex-shrink:0; }
.pvl-appbrand { font-weight:750; font-size:6.7cqw; letter-spacing:-.4cqw; }.pvl-appbrand>span { color:var(--accent); font-size:6cqw; margin-left:.3cqw; }
.pvl-avatar { display:grid; place-items:center; width:10cqw; height:10cqw; border-radius:50%; background:var(--tint); border:1px solid #28463712; font-size:3.6cqw; color:var(--accent); font-weight:650; }
.pvl-screen-body { flex:1; min-height:0; padding:3cqw 6cqw 4cqw; }
.pvl-greeting>span { display:block; font-size:3cqw; letter-spacing:.45cqw; font-weight:600; color:var(--accent); }
.pvl-greeting>strong { display:block; font-size:9.2cqw; line-height:1.1; letter-spacing:-.5cqw; margin:3.5cqw 0 3cqw; font-weight:550; }
.pvl-greeting>p { font-size:3.7cqw; color:#62726b; line-height:1.5; margin:0 0 5cqw; }
.pvl-firstday { display:flex; align-items:center; justify-content:space-between; gap:3cqw; background:var(--accent); color:white; padding:5.5cqw 5cqw; border-radius:4cqw; }
.pvl-firstday>div { display:flex; flex-direction:column; gap:2cqw; }.pvl-firstday>div>small { font-size:2.7cqw; letter-spacing:.35cqw; color:#d7e5dc; }.pvl-firstday>div>b { font-size:4.2cqw; }.pvl-firstday>div>span { font-size:3.2cqw; color:#e1eae4; }
.pvl-calendar-tile { background:#f6f7ed; border-radius:2cqw; width:17cqw; text-align:center; flex-shrink:0; overflow:hidden; color:#254438; }.pvl-calendar-tile>small { display:block; font-size:2.8cqw; letter-spacing:.5cqw; background:#dde8d9; padding:1cqw 0; }.pvl-calendar-tile>b { font-size:8cqw; display:block; padding:1cqw; }
.pvl-list-heading { display:flex; justify-content:space-between; align-items:center; font-size:3.8cqw; margin:6cqw 0 3.2cqw; }.pvl-list-heading>span { font-size:3cqw; color:#6c7b72; }.pvl-list-heading>.pvl-icon { width:4.5cqw; height:4.5cqw; color:var(--accent); }
.pvl-progress { height:1.8cqw; background:#253c2914; border-radius:2cqw; overflow:hidden; }.pvl-progress>i { display:block; width:75%; height:100%; background:var(--accent); border-radius:2cqw; }.pvl-progress-join>i { width:66.66%; }
.pvl-task-list { margin:2cqw 0 0; }.pvl-task { display:flex; align-items:center; gap:3cqw; min-height:17.5cqw; border-bottom:1px solid #203b3410; }.pvl-task>span:nth-child(2) { flex:1; min-width:0; }.pvl-task b { display:block; font-size:3.8cqw; }.pvl-task small { display:block; font-size:3cqw; color:#67756e; margin-top:1cqw; }.pvl-task>.pvl-icon { width:4cqw; height:4cqw; color:var(--accent); }
.pvl-task-icon { display:grid; place-items:center; width:9cqw; height:9cqw; border-radius:50%; background:var(--tint); color:var(--accent); flex-shrink:0; }.pvl-task-icon .pvl-icon { width:4.2cqw; height:4.2cqw; }.pvl-task-icon.is-done { color:#557a61; background:#e8eee5; }.pvl-done-dot { width:1.5cqw; height:1.5cqw; border-radius:50%; background:#6c8d6a; }
.pvl-ui-action { display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:white; border-radius:3cqw; padding:3.5cqw 5cqw; margin-top:4cqw; font-size:3.8cqw; font-weight:600; }.pvl-ui-action>.pvl-icon { width:4.5cqw; height:4.5cqw; }
.pvl-small-avatar { display:grid; place-items:center; width:10cqw; height:10cqw; border-radius:50%; font-size:3.2cqw; background:#e7e8dd; color:#5b6650; flex-shrink:0; }.pvl-review b,.pvl-learning b { display:block; font-size:3.5cqw; }.pvl-review small,.pvl-learning small { display:block; font-size:3cqw; color:#6b776e; margin-top:.8cqw; }
.pvl-screen-row { display:flex; align-items:center; justify-content:space-between; gap:2cqw; }.pvl-screen-row>b { font-size:3.8cqw; }.pvl-chip { font-size:2.6cqw; padding:1.3cqw 2.5cqw; border-radius:3cqw; background:#ffffff90; color:var(--accent); font-weight:600; }
.pvl-shift { background:white; border:1px solid #d9e1ea; border-radius:4cqw; padding:5cqw; }.pvl-shift .pvl-chip { background:var(--tint); }.pvl-shift>strong { font-size:8cqw; letter-spacing:-.4cqw; display:block; margin:4cqw 0 2cqw; }.pvl-shift>strong>span { color:#9aa8b2; font-size:5cqw; }.pvl-shift>small { display:flex; align-items:center; gap:1.5cqw; color:#697a82; font-size:3cqw; }.pvl-shift>small .pvl-icon { width:3.7cqw; height:3.7cqw; }
.pvl-shift-line { display:flex; gap:1.2cqw; margin-top:5cqw; }.pvl-shift-line i { height:2.6cqw; background:#758ccc; border-radius:1cqw; flex:1; }.pvl-shift-line i:nth-child(5) { background:#e5eaf2; }
.pvl-payslip { display:flex; gap:3cqw; align-items:center; padding:5cqw; margin-top:3cqw; background:var(--tint); border-radius:4cqw; color:var(--accent); }.pvl-payslip>span { flex:1; }.pvl-payslip b { display:block; font-size:3.8cqw; }.pvl-payslip small { display:block; font-size:3cqw; margin-top:1cqw; color:#667b9c; }.pvl-payslip>.pvl-icon:last-child { width:4cqw; height:4cqw; }
.pvl-work-tiles { display:grid; grid-template-columns:1fr 1fr; gap:3cqw; margin-top:3cqw; }.pvl-work-tiles>div { border:1px solid #dce3e9; border-radius:4cqw; background:#fff; padding:4cqw; }.pvl-work-tiles .pvl-icon { width:5cqw; height:5cqw; color:#697f90; }.pvl-work-tiles strong { display:block; font-size:8.5cqw; margin:2cqw 0 1cqw; letter-spacing:-.4cqw; }.pvl-work-tiles strong small { font-size:3.4cqw; font-weight:400; letter-spacing:0; }.pvl-work-tiles>div>span { font-size:2.9cqw; color:#697a82; }
.pvl-growth-card { background:var(--tint); padding:5cqw; border-radius:4cqw; }.pvl-growth-card>.pvl-screen-row>.pvl-icon { color:var(--accent); }.pvl-growth-card>b { font-size:6.2cqw; line-height:1.15; letter-spacing:-.2cqw; display:block; margin:4cqw 0; }.pvl-goal-total { display:flex; align-items:center; gap:4cqw; margin:3cqw 0; }.pvl-goal-total>strong { font-size:13cqw; line-height:1; letter-spacing:-.7cqw; font-weight:500; color:var(--accent); }.pvl-goal-total>strong>span { font-size:7cqw; color:#9984a8; }.pvl-goal-total>span { font-size:3.2cqw; line-height:1.5; color:#72667e; }
.pvl-review { display:flex; align-items:center; gap:3cqw; padding:1cqw 0 4cqw; }.pvl-review .pvl-small-avatar { background:var(--tint); color:var(--accent); }.pvl-learning { display:flex; align-items:center; gap:3cqw; background:white; border:1px solid #e7e0ec; border-radius:3cqw; padding:4cqw; }.pvl-learning>.pvl-icon { color:var(--accent); }
.pvl-handover { border:1px solid #e3d6c4; background:#f2ecdf; border-radius:4cqw; padding:5cqw; }.pvl-handover>.pvl-screen-row { color:var(--accent); font-size:2.7cqw; letter-spacing:.25cqw; }.pvl-handover>.pvl-screen-row>.pvl-icon { width:4.4cqw; height:4.4cqw; }.pvl-handover>b { display:block; font-size:5.4cqw; margin:3cqw 0 5cqw; letter-spacing:-.2cqw; }.pvl-handover-progress { display:flex; justify-content:space-between; font-size:3cqw; margin-bottom:2cqw; color:#776b57; }.pvl-handover-progress strong { color:#645239; }
.pvl-departure-note { display:flex; align-items:center; gap:2cqw; color:#7d6c50; font-size:3.2cqw; margin-top:5cqw; }.pvl-departure-note .pvl-icon { width:5cqw; height:5cqw; }
.pvl-appnav { display:flex; justify-content:space-around; padding:3.5cqw 2cqw 1cqw; border-top:1px solid #203b3410; margin-top:auto; flex-shrink:0; background:#ffffffa0; }.pvl-appnav>span { display:flex; align-items:center; flex-direction:column; gap:1.4cqw; color:#86928d; min-width:16cqw; }.pvl-appnav>span.is-current { color:var(--accent); }.pvl-appnav .pvl-icon { width:5.3cqw; height:5.3cqw; }.pvl-appnav small { font-size:2.7cqw; font-weight:600; }.pvl-homebar { display:flex; justify-content:center; padding:3cqw 0 2cqw; background:#ffffffa0; flex-shrink:0; }.pvl-homebar>i { width:31cqw; height:1.4cqw; border-radius:2cqw; background:#20332e; }
.pvl-copy { display:flex; flex-direction:column; align-items:start; flex:1; padding-top:24px; }.pvl-copy h3 { font-size:23px; letter-spacing:-.8px; line-height:1.2; margin:0 0 13px; }.pvl-copy>p { font-size:12px; line-height:1.85; color:var(--muted); margin:0 0 24px; }
.pvl-copy>a { display:flex; align-items:baseline; gap:9px; font-size:10px; font-weight:650; line-height:1.7; margin-top:auto; text-decoration:none; border-bottom:1px solid #b9c4b4; padding-bottom:3px; }.pvl-copy>a:hover { color:var(--blue); border-color:var(--blue); }.pvl-copy>a span { font-size:15px; }
.pvl-summary { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:27px 31px; margin-top:38px; border:1px solid #d8dfd4; border-radius:11px; }.pvl-summary p { font-size:12px; line-height:1.85; }.pvl-summary strong { color:var(--ink); font-weight:650; }.pvl-summary a { flex-shrink:0; font-size:11px; }
.pvl-image-note { font-size:10px; color:var(--muted); margin:14px 0 0; }
@media(max-width:1100px) { .pvl-stages { gap:16px; }.pvl-device-scene { padding:24px 10px; }.pvl-phone { border-radius:28px; }.pvl-screen { border-radius:22px; }.pvl-copy h3 { font-size:20px; }.pvl-copy>p { font-size:11px; }.pvl-copy>a { font-size:9px; gap:6px; } }
@media(max-width:960px) {
 .pvl-section .section-heading { display:block; }.pvl-intro { max-width:520px; margin-top:23px; }.pvl-stages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px; margin-top:32px; }.pvl-device-scene { padding:30px 20px; }.pvl-phone { border-radius:33px; }.pvl-screen { border-radius:27px; }
 .pvl-copy h3 { font-size:26px; }.pvl-copy>p { font-size:13px; max-width:350px; margin-bottom:18px; }.pvl-copy>a { font-size:11px; }.pvl-copy { padding-top:21px; }
}
@media(max-width:540px) {
 .pvl-section .section-heading h2 { font-size:37px; letter-spacing:-1.7px; }.pvl-intro { font-size:13px; margin-top:22px; }.pvl-stages { grid-template-columns:1fr; gap:36px; }.pvl-device-scene { padding:29px 23px; }.pvl-phone { max-width:252px; }
 .pvl-stage-label { margin-bottom:13px; }.pvl-copy { padding-top:20px; }.pvl-copy h3 { font-size:27px; margin-bottom:12px; }.pvl-copy>p { font-size:13px; margin-bottom:16px; }.pvl-summary { display:block; padding:24px; margin-top:32px; }.pvl-summary a { display:inline-block; margin-top:20px; font-size:11px; }.pvl-image-note { font-size:9px; }
}