/* A layered, code-rendered illustration of the three pihys applications. */
.app-graphic{width:100%;max-width:1060px;min-width:0;margin:0 auto;text-align:left;isolation:isolate;container-type:inline-size}
.graphic-canvas{--graphic-unit:calc(min(88vw,1060px) / 1060);height:calc(680 * var(--graphic-unit));position:relative}
.graphic-symbols{position:absolute;width:0;height:0;overflow:hidden}
.app-graphic svg:not(.graphic-connections):not(.graphic-chart-line):not(.graphic-symbols){width:calc(18 * var(--graphic-unit));height:calc(18 * var(--graphic-unit));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.graphic-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(calc(35 * var(--graphic-unit)));opacity:.65}
.glow-flow{width:58%;height:74%;left:-6%;top:7%;background:radial-gradient(ellipse,#dff1df,transparent 70%)}
.glow-pulse{width:58%;height:77%;right:-6%;top:-5%;background:radial-gradient(ellipse,#dcecfb,transparent 70%)}
.glow-dots{width:60%;height:58%;right:5%;bottom:-4%;background:radial-gradient(ellipse,#ffe5d6,transparent 70%)}
.graphic-connections{position:absolute;inset:0;width:100%;height:100%;stroke:#ccdbd5;stroke-width:1.3;stroke-dasharray:5 6}
.graphic-connections circle{fill:#fff;stroke:#92b8a5;stroke-dasharray:none}
.graphic-window{position:absolute;background:#fff;border:calc(1 * var(--graphic-unit)) solid #e1e7eb;border-radius:calc(17 * var(--graphic-unit));overflow:hidden;box-shadow:0 calc(6 * var(--graphic-unit)) calc(10 * var(--graphic-unit)) #24394b03,0 calc(24 * var(--graphic-unit)) calc(60 * var(--graphic-unit)) calc(-24 * var(--graphic-unit)) #24394b35;transform:translateY(var(--scene-y,calc(0 * var(--graphic-unit)))) rotate(var(--tilt));transform-origin:50% 50%;font-size:calc(12 * var(--graphic-unit));color:#273742}
.graphic-flow{width:57%;left:1%;top:calc(38 * var(--graphic-unit));--tilt:-2deg;z-index:2}
.graphic-pulse{width:39%;right:1%;top:calc(13 * var(--graphic-unit));--tilt:3deg;z-index:1}
.graphic-dots{width:56%;right:3%;top:calc(366 * var(--graphic-unit));--tilt:1.2deg;z-index:3}
.graphic-window-top{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--graphic-unit));padding:calc(15 * var(--graphic-unit)) calc(19 * var(--graphic-unit));border-bottom:calc(1 * var(--graphic-unit)) solid #edf0f3;background:linear-gradient(180deg,#fff,#fdfefe)}
.graphic-app{display:flex;align-items:center;gap:calc(9 * var(--graphic-unit));min-width:0}
.graphic-app img{width:calc(32 * var(--graphic-unit));height:calc(32 * var(--graphic-unit));object-fit:contain;border-radius:calc(8 * var(--graphic-unit))}
.graphic-app strong{font-size:calc(18 * var(--graphic-unit));font-weight:650;letter-spacing:calc(-.6 * var(--graphic-unit))}
.graphic-app>span{margin-left:calc(7 * var(--graphic-unit));color:#8a97a0;font-size:calc(8 * var(--graphic-unit));font-weight:550;letter-spacing:calc(1.1 * var(--graphic-unit))}
.graphic-menu{display:flex;gap:calc(4 * var(--graphic-unit));flex-shrink:0}
.graphic-menu i{width:calc(4 * var(--graphic-unit));height:calc(4 * var(--graphic-unit));border-radius:50%;background:#b9c3cb}
.graphic-workspace{display:flex}
.graphic-sidebar{width:calc(49 * var(--graphic-unit));flex-shrink:0;display:flex;align-items:center;flex-direction:column;gap:calc(22 * var(--graphic-unit));padding:calc(24 * var(--graphic-unit)) 0;background:#f8faf9;border-right:calc(1 * var(--graphic-unit)) solid #edf1ee;color:#a4b2a9}
.graphic-sidebar .selected{color:#519359;background:#e6f0e5;box-shadow:0 0 0 calc(7 * var(--graphic-unit)) #e6f0e5;border-radius:calc(2 * var(--graphic-unit))}
.graphic-flow-main{padding:calc(22 * var(--graphic-unit)) calc(21 * var(--graphic-unit)) 0;flex:1;min-width:0}
.graphic-page-heading{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--graphic-unit))}
.graphic-page-heading small{font-size:calc(8 * var(--graphic-unit));letter-spacing:calc(1 * var(--graphic-unit));color:#8d9aa4;font-weight:500}
.graphic-page-heading h3{font-size:calc(20 * var(--graphic-unit));letter-spacing:calc(-.7 * var(--graphic-unit));line-height:1.25;margin:calc(7 * var(--graphic-unit)) 0 calc(18 * var(--graphic-unit));font-weight:600}
.graphic-team{display:flex;padding-left:calc(7 * var(--graphic-unit));margin-top:calc(-13 * var(--graphic-unit))}
.graphic-team span{display:grid;place-items:center;width:calc(25 * var(--graphic-unit));height:calc(25 * var(--graphic-unit));border:calc(2 * var(--graphic-unit)) solid white;margin-left:calc(-7 * var(--graphic-unit));border-radius:50%;font-size:calc(7 * var(--graphic-unit));color:#55775c;background:#dfece1}
.graphic-team span:nth-child(2){background:#e6edf5;color:#6783a1}.graphic-team span:nth-child(3){background:#f0f3f5;color:#8999a5}
.graphic-project{display:flex;align-items:center;gap:calc(12 * var(--graphic-unit));padding:calc(14 * var(--graphic-unit));background:#f6faf5;border:calc(1 * var(--graphic-unit)) solid #e4eee2;border-radius:calc(9 * var(--graphic-unit));margin-bottom:calc(18 * var(--graphic-unit))}
.graphic-plan{height:calc(45 * var(--graphic-unit));width:calc(40 * var(--graphic-unit));color:#7aa27d;background:white;border-radius:calc(6 * var(--graphic-unit));display:grid;place-items:center;border:calc(1 * var(--graphic-unit)) solid #e2ebdf}
.app-graphic .graphic-plan svg{width:calc(27 * var(--graphic-unit));height:calc(27 * var(--graphic-unit));stroke-width:1.1}
.graphic-project-copy{flex:1;min-width:0}.graphic-project-copy strong{display:block;font-size:calc(12 * var(--graphic-unit));font-weight:600}.graphic-project-copy>span{display:block;margin:calc(5 * var(--graphic-unit)) 0 calc(9 * var(--graphic-unit));font-size:calc(8 * var(--graphic-unit));color:#889780}
.graphic-progress{height:calc(4 * var(--graphic-unit));background:#e1ebdc;border-radius:calc(9 * var(--graphic-unit));overflow:hidden}.graphic-progress i{display:block;width:75%;height:100%;background:linear-gradient(90deg,#9fc989,#59a86a);border-radius:calc(9 * var(--graphic-unit))}
.graphic-ring{width:calc(48 * var(--graphic-unit));height:calc(48 * var(--graphic-unit));border-radius:50%;background:conic-gradient(#72b875 0 75%,#e2ecdd 75% 100%);display:grid;place-items:center;flex-shrink:0}
.graphic-ring b{font-size:calc(14 * var(--graphic-unit));letter-spacing:calc(-.5 * var(--graphic-unit));font-weight:600;background:#f6faf5;border-radius:50%;width:calc(38 * var(--graphic-unit));height:calc(38 * var(--graphic-unit));display:grid;place-content:center;grid-auto-flow:column;align-items:baseline;color:#55845d}
.graphic-ring small{font-size:calc(8 * var(--graphic-unit))}
.graphic-task-head{display:flex;justify-content:space-between;font-weight:600;font-size:calc(10 * var(--graphic-unit));padding:0 0 calc(10 * var(--graphic-unit))}.graphic-task-head small{font-size:calc(8 * var(--graphic-unit));font-weight:400;color:#95a0a8}
.graphic-task{display:flex;align-items:center;gap:calc(9 * var(--graphic-unit));border-top:calc(1 * var(--graphic-unit)) solid #eff2f3;padding:calc(11 * var(--graphic-unit)) 0;font-size:calc(10 * var(--graphic-unit));white-space:nowrap}
.graphic-checkbox{width:calc(14 * var(--graphic-unit));height:calc(14 * var(--graphic-unit));flex-shrink:0;border:calc(1 * var(--graphic-unit)) solid #d5ddd6;border-radius:calc(4 * var(--graphic-unit));display:grid;place-items:center;color:white}
.graphic-task.completed .graphic-checkbox{background:#76b978;border-color:#76b978}
.app-graphic .graphic-checkbox svg{width:calc(10 * var(--graphic-unit));height:calc(10 * var(--graphic-unit));stroke-width:2.5}
.graphic-task b{font-size:calc(7 * var(--graphic-unit));font-weight:500;padding:calc(4 * var(--graphic-unit)) calc(6 * var(--graphic-unit));background:#eff6ed;color:#6c8e68;border-radius:calc(4 * var(--graphic-unit));margin-left:auto}.graphic-task b.neutral{background:#f4f5f7;color:#8e9ba6}
.graphic-task i{font-size:calc(7 * var(--graphic-unit));font-style:normal;color:#79958a;background:#eef3f0;display:grid;place-items:center;flex-shrink:0;width:calc(20 * var(--graphic-unit));height:calc(20 * var(--graphic-unit));border-radius:50%}
.graphic-flow-bottom{display:flex;align-items:center;gap:calc(6 * var(--graphic-unit));color:#8f9c98;font-size:calc(8 * var(--graphic-unit));border-top:calc(1 * var(--graphic-unit)) solid #edf1ee;padding:calc(11 * var(--graphic-unit)) 0}.app-graphic .graphic-flow-bottom svg{width:calc(12 * var(--graphic-unit));height:calc(12 * var(--graphic-unit))}.graphic-flow-bottom b{font-weight:500;margin-left:auto;color:#67846b}
.graphic-pulse-main{padding:calc(21 * var(--graphic-unit)) calc(23 * var(--graphic-unit)) calc(15 * var(--graphic-unit))}.graphic-pulse .graphic-page-heading h3{font-size:calc(20 * var(--graphic-unit));margin-bottom:calc(16 * var(--graphic-unit))}.graphic-heading-icon{color:#71a2c4;margin-top:calc(-7 * var(--graphic-unit))}
.graphic-finance-stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--graphic-unit));margin-bottom:calc(18 * var(--graphic-unit))}.graphic-finance-stats>div{border:calc(1 * var(--graphic-unit)) solid #e8eef4;background:#f8fbfd;border-radius:calc(8 * var(--graphic-unit));padding:calc(11 * var(--graphic-unit))}.graphic-finance-stats span{font-size:calc(8 * var(--graphic-unit));color:#92a0ac;display:block}.graphic-finance-stats strong{display:block;font-weight:600;font-size:calc(20 * var(--graphic-unit));letter-spacing:calc(-.6 * var(--graphic-unit));margin-top:calc(6 * var(--graphic-unit))}.graphic-finance-stats>div:last-child strong{color:#4287b7}
.graphic-chart{height:calc(115 * var(--graphic-unit));position:relative;padding-left:calc(24 * var(--graphic-unit));padding-bottom:calc(20 * var(--graphic-unit))}.graphic-chart-grid{position:absolute;inset:0 0 calc(20 * var(--graphic-unit));display:flex;flex-direction:column;justify-content:space-between;font-size:calc(7 * var(--graphic-unit));color:#b3bcc5}.graphic-chart-grid span{position:relative}.graphic-chart-grid span:after{content:'';position:absolute;top:calc(5 * var(--graphic-unit));left:calc(24 * var(--graphic-unit));right:0;border-top:calc(1 * var(--graphic-unit)) dashed #e5edf4}
.graphic-chart-bars{height:100%;display:flex;align-items:flex-end;justify-content:space-around;gap:calc(12 * var(--graphic-unit));position:relative;padding:0 calc(7 * var(--graphic-unit))}.graphic-chart-bars>div{height:100%;display:flex;align-items:flex-end;position:relative;flex:1;justify-content:center}.graphic-chart-bars i{width:100%;max-width:calc(29 * var(--graphic-unit));height:var(--bar);display:block;border-radius:calc(4 * var(--graphic-unit)) calc(4 * var(--graphic-unit)) 0 0;background:linear-gradient(180deg,#c5ddf0,#e2eef7)}.graphic-chart-bars>div:nth-last-child(-n+2) i{background:linear-gradient(180deg,#4d97c3,#84b5d5)}.graphic-chart-bars b{position:absolute;bottom:calc(-15 * var(--graphic-unit));font-weight:400;font-size:calc(6 * var(--graphic-unit));letter-spacing:calc(.3 * var(--graphic-unit));color:#a6b2bb}
.graphic-chart-line{position:absolute;left:calc(39 * var(--graphic-unit));right:calc(12 * var(--graphic-unit));top:calc(3 * var(--graphic-unit));width:calc(100% - calc(57 * var(--graphic-unit)));height:calc(80 * var(--graphic-unit));overflow:visible;stroke:#427da6;stroke-width:1.6;fill:none;stroke-linecap:round}.graphic-chart-line circle{fill:white;stroke:#427da6}
.graphic-finance-footer{display:flex;justify-content:space-between;align-items:center;border-top:calc(1 * var(--graphic-unit)) solid #eaf0f5;padding-top:calc(11 * var(--graphic-unit));margin-top:calc(5 * var(--graphic-unit));font-size:calc(7 * var(--graphic-unit));color:#94a6b4}.graphic-finance-footer>span{display:flex;gap:calc(5 * var(--graphic-unit));align-items:center}.graphic-finance-footer i{width:calc(5 * var(--graphic-unit));height:calc(5 * var(--graphic-unit));background:#79aacc;border-radius:calc(2 * var(--graphic-unit))}.app-graphic .graphic-finance-footer svg{width:calc(11 * var(--graphic-unit));height:calc(11 * var(--graphic-unit))}.graphic-finance-footer b{background:#edf4f8;color:#5e8faf;border-radius:calc(3 * var(--graphic-unit));padding:calc(2 * var(--graphic-unit)) calc(4 * var(--graphic-unit));font-size:calc(7 * var(--graphic-unit))}
.graphic-dots-main{padding:calc(20 * var(--graphic-unit)) calc(22 * var(--graphic-unit)) 0}.graphic-dots .graphic-page-heading h3{font-size:calc(19 * var(--graphic-unit));margin-bottom:calc(16 * var(--graphic-unit))}
.graphic-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--graphic-unit))}.graphic-pipeline-column{background:#fff9f5;border:calc(1 * var(--graphic-unit)) solid #f7e7dd;border-radius:calc(7 * var(--graphic-unit));padding:calc(9 * var(--graphic-unit)) calc(7 * var(--graphic-unit))}.graphic-stage{display:flex;gap:calc(4 * var(--graphic-unit));align-items:center;font-size:calc(8 * var(--graphic-unit));color:#8d796a;font-weight:550;margin-bottom:calc(10 * var(--graphic-unit));white-space:nowrap}.graphic-stage>i{width:calc(5 * var(--graphic-unit));height:calc(5 * var(--graphic-unit));background:#e9a780;border-radius:50%}.graphic-pipeline-column:nth-child(2) .graphic-stage>i{background:#de723c}.graphic-pipeline-column:nth-child(3) .graphic-stage>i{background:#79a583}.graphic-stage>b{font-size:calc(7 * var(--graphic-unit));margin-left:auto;color:#aa9c92;background:#fbede4;border-radius:calc(3 * var(--graphic-unit));padding:calc(2 * var(--graphic-unit)) calc(4 * var(--graphic-unit))}
.graphic-lead{display:flex;align-items:center;gap:calc(6 * var(--graphic-unit));padding:calc(10 * var(--graphic-unit)) calc(6 * var(--graphic-unit));background:#fff;border:calc(1 * var(--graphic-unit)) solid #efe9e2;border-radius:calc(5 * var(--graphic-unit));box-shadow:0 calc(3 * var(--graphic-unit)) calc(6 * var(--graphic-unit)) #84674905}.graphic-person{width:calc(23 * var(--graphic-unit));height:calc(23 * var(--graphic-unit));background:#fff0e6;color:#c56d40;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:calc(7 * var(--graphic-unit))}.graphic-lead strong{display:block;font-size:calc(8 * var(--graphic-unit));font-weight:550;white-space:nowrap}.graphic-lead div>span{display:block;font-size:calc(6 * var(--graphic-unit));color:#b3a69a;white-space:nowrap;margin-top:calc(4 * var(--graphic-unit))}.app-graphic .graphic-lead>svg{width:calc(10 * var(--graphic-unit));height:calc(10 * var(--graphic-unit));color:#bb9b83;margin-left:auto}.app-graphic .graphic-person svg{width:calc(12 * var(--graphic-unit));height:calc(12 * var(--graphic-unit));stroke-width:2}.graphic-pipeline-column:last-child .graphic-person{background:#eef4eb;color:#7f9f79}
.graphic-dots-footer{display:flex;align-items:center;justify-content:space-between;color:#af9b88;font-size:calc(8 * var(--graphic-unit));border-top:calc(1 * var(--graphic-unit)) solid #f6e4da;padding:calc(13 * var(--graphic-unit)) 0;margin-top:calc(14 * var(--graphic-unit))}.graphic-dots-footer>span,.graphic-property{display:flex;gap:calc(5 * var(--graphic-unit));align-items:center}.app-graphic .graphic-dots-footer svg{width:calc(12 * var(--graphic-unit));height:calc(12 * var(--graphic-unit))}
.graphic-day{position:absolute;left:5%;top:calc(483 * var(--graphic-unit));display:flex;align-items:center;gap:calc(12 * var(--graphic-unit));padding:calc(17 * var(--graphic-unit)) calc(19 * var(--graphic-unit));background:rgba(255,255,255,.95);border:calc(1 * var(--graphic-unit)) solid #e7ede8;border-radius:calc(12 * var(--graphic-unit));box-shadow:0 calc(14 * var(--graphic-unit)) calc(35 * var(--graphic-unit)) calc(-15 * var(--graphic-unit)) #3d5c4d25;transform:rotate(-2deg);z-index:2}
.graphic-day-icon{width:calc(36 * var(--graphic-unit));height:calc(36 * var(--graphic-unit));display:grid;place-items:center;border-radius:calc(11 * var(--graphic-unit));background:#eaf5e7;color:#78a96c}.graphic-day strong{font-size:calc(11 * var(--graphic-unit));font-weight:550;display:block}.graphic-day span{display:block;font-size:calc(8 * var(--graphic-unit));color:#9ba79c;margin-top:calc(5 * var(--graphic-unit))}.graphic-app-dots{display:flex;gap:calc(4 * var(--graphic-unit));margin-left:calc(7 * var(--graphic-unit))}.graphic-app-dots i{width:calc(5 * var(--graphic-unit));height:calc(5 * var(--graphic-unit));border-radius:50%;background:#83b870}.graphic-app-dots i:nth-child(2){background:#5b99c2}.graphic-app-dots i:nth-child(3){background:#de723c}
.app-graphic figcaption{text-align:center;font-size:8px;letter-spacing:1px;color:#a1aab1;margin:12px 0 0;text-transform:uppercase}
.motion-enabled .app-graphic.is-visible .graphic-progress i{animation:graphic-progress 2.4s var(--ease) both 0.6s;transform-origin:left}
.motion-enabled .app-graphic.is-visible .graphic-chart-bars i{animation:graphic-progress 2.4s var(--ease) both 0.8s;transform-origin:bottom;--axis:scaleY(0)}
@keyframes graphic-progress{from{transform:var(--axis,scaleX(0))}to{transform:scale(1)}}
.motion-off .graphic-window{--scene-y:calc(0 * var(--graphic-unit))!important}
@media(prefers-reduced-motion:reduce){.graphic-window{--scene-y:calc(0 * var(--graphic-unit))!important}}

/* Shared left navigation for the Pulse and Dots illustrations. */
.graphic-pulse-main,.graphic-dots-main{flex:1;min-width:0}
.graphic-pulse .graphic-sidebar{background:#f8fafc;border-right-color:#edf0f5;color:#a3b1be}
.graphic-pulse .graphic-sidebar .selected{color:#4287b7;background:#e6eff7;box-shadow:0 0 0 calc(7 * var(--graphic-unit)) #e6eff7}
.graphic-dots .graphic-sidebar{background:#fffaf7;border-right-color:#f6e4da;color:#c19c87}
.graphic-dots .graphic-sidebar .selected{color:#de723c;background:#ffeadf;box-shadow:0 0 0 calc(7 * var(--graphic-unit)) #ffeadf}

/* Scale the complete desktop composition instead of rearranging its windows. */
@supports(width:1cqw){.graphic-canvas{--graphic-unit:calc(100cqw / 1060)}}
@media(max-width:600px){.app-graphic figcaption{font-size:7px;letter-spacing:.5px}}

/* A subtle, one-way opening after the whole composition reveals together. */
.motion-enabled .app-graphic .graphic-window,.motion-enabled .app-graphic .graphic-day{transform:translate3d(var(--spread-x,0px),var(--spread-y,0px),0) rotate(var(--spread-tilt,0deg)) scale(var(--spread-scale,1));transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.motion-enabled .app-graphic .graphic-connections{opacity:1}
.motion-off .app-graphic .graphic-window{transform:rotate(var(--tilt));transition:none}
.motion-off .app-graphic .graphic-day{transform:rotate(-2deg);transition:none}
@media(prefers-reduced-motion:reduce){.app-graphic .graphic-window{transform:rotate(var(--tilt))!important}.app-graphic .graphic-day{transform:rotate(-2deg)!important}.app-graphic .graphic-connections{opacity:1!important}}