/* Microsoft 365 service page: an organised workspace with original app artwork. */
.m365-page{background:#f7f8f2;color:#293e23}
.m365-page main h1,.m365-page main h2,.m365-page main h3{font-family:Manrope,sans-serif}
.m365-page main h2{font-size:clamp(34px,3.6vw,49px);line-height:1.16;letter-spacing:-2px;font-weight:550;margin:0 0 23px}
.m365-page main h2>span{color:#63883d}
.m365-page .eyebrow.dark{font-size:11px;letter-spacing:1.1px;line-height:1.7;color:#667b53}
.m365-intro{padding-top:30px;padding-bottom:60px;background:radial-gradient(ellipse at 85% 55%,#dce8cb88,transparent 60%),#f2f4ec}
.m365-intro-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding-top:42px}
.m365-intro h1{font-size:clamp(44px,4.7vw,69px);line-height:1.08;letter-spacing:-3px;font-weight:600;margin:20px 0 28px}
.m365-intro h1>span{color:#5a842f}
.m365-lead,.m365-body{font-size:17px;line-height:1.9;color:#556c48;max-width:540px}
.m365-lead{margin:0 0 27px}
.m365-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.m365-actions .button{font-size:15px;padding:17px 20px}
.m365-actions .button>span{margin-left:16px}
.m365-actions .text-link{font-size:14px}
.m365-trust{list-style:none;padding:0;margin:27px 0 0;display:flex;gap:10px 17px;flex-wrap:wrap;font-size:14px;color:#637c50;line-height:1.8}
.m365-trust li:before{content:'✓';color:#7d9c59;margin-right:6px;font-size:12px}
.m365-workspace{margin:0;min-width:0;--m365-progress:1}
.m365-orbit{position:relative;width:100%;aspect-ratio:500/420;isolation:isolate}
.m365-orbit:before{content:'';position:absolute;inset:12%;background:radial-gradient(ellipse,#d0e1bc88,transparent 70%);border:1px solid #ceddbe66;border-radius:50%}
.m365-orbit:after{content:'';position:absolute;inset:25%;border:1px solid #c5d5b733;border-radius:50%;z-index:-1}
.m365-connections{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#afc596;stroke-width:1;opacity:1;transition:opacity .7s}
.m365-app{position:absolute;width:15%;aspect-ratio:1;display:grid;place-items:center;border-radius:20%;background:linear-gradient(140deg,#fff,#eff3e9);border:1px solid #fff;box-shadow:3px 5px 0 #c2d0b7,0 17px 24px #41612916;transform:translate(-50%,-50%) perspective(700px) rotateX(8deg) rotateY(-12deg) rotateZ(var(--app-tilt));transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .7s}
.m365-app img{width:65%;height:65%;display:block}
.m365-app-outlook{left:17%;top:18%;--app-tilt:-12deg;--loose-x:-10px;--loose-y:10px}
.m365-app-teams{left:84%;top:18%;--app-tilt:11deg;--loose-x:18px;--loose-y:-10px}
.m365-app-sharepoint{left:12%;top:53%;--app-tilt:-8deg;--loose-x:-12px;--loose-y:16px}
.m365-app-onedrive{left:88%;top:53%;--app-tilt:10deg;--loose-x:15px;--loose-y:12px}
.m365-app-word{left:25%;top:85%;--app-tilt:-11deg;--loose-x:-16px;--loose-y:-2px}
.m365-app-excel{left:77%;top:85%;--app-tilt:9deg;--loose-x:14px;--loose-y:18px}
.m365-hub{position:absolute;left:50%;top:49%;width:44%;height:43%;transform:translate(-50%,-50%);background:#fafcf5;border:1px solid #fff;border-radius:14px;box-shadow:0 6px 0 #c2d1b3,0 22px 35px #3c5d2520;overflow:hidden;transition:transform .8s,opacity .8s}
.m365-window-bar{height:16%;display:flex;align-items:center;gap:3px;padding:0 9px;background:#edf3e5;border-bottom:1px solid #d8e4cc}
.m365-window-bar>i{width:4px;height:4px;border-radius:50%;background:#b6c7a3}
.m365-window-bar>span{flex:1;text-align:right;font-size:clamp(7px,.7vw,10px);color:#81976d}
.m365-hub-heading{display:flex;align-items:center;gap:7px;padding:10% 8% 7%}
.m365-hub-heading img{width:22px;height:22px}
.m365-hub-heading strong{font-size:clamp(9px,1vw,14px);letter-spacing:-.2px;font-weight:600;color:#3e5a2e}
.m365-hub-rows{display:grid;gap:8px;padding:0 9%}
.m365-hub-rows>span{display:flex;justify-content:space-between;align-items:center;font-size:clamp(7px,.8vw,11px);color:#798c67;border-bottom:1px solid #e0e8d8;padding-bottom:4px}
.m365-hub-rows b{font-size:10px;font-weight:500;color:#7c9d4e;transition:opacity .5s}
.m365-workspace[data-frame="0"] .m365-connections{opacity:0}
.m365-workspace[data-frame="0"] .m365-hub{opacity:.3;transform:translate(-50%,-50%) scale(.86)}
.m365-workspace[data-frame="0"] .m365-app{transform:translate(calc(-50% + var(--loose-x)),calc(-50% + var(--loose-y))) perspective(700px) rotateX(15deg) rotateY(-20deg) rotateZ(var(--app-tilt)) scale(.9)}
.m365-workspace[data-frame="0"] .m365-hub-rows b{opacity:0}
.m365-workspace[data-frame="1"] .m365-hub-rows>span:not(:first-child) b{opacity:0}
.m365-workspace[data-frame="2"] .m365-hub-rows>span:last-child b{opacity:0}
@media(hover:hover) and (pointer:fine){.m365-workspace:hover .m365-app{transform:translate(-50%,-50%) perspective(700px) rotateX(0) rotateY(0) rotateZ(0)}}
.m365-workspace figcaption{padding:12px 6% 0}
.m365-scene-status{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.6;color:#4d6e35}
.m365-scene-status strong{font-weight:500}
.m365-status-dot{width:6px;height:6px;background:#88a75a;border-radius:50%;flex-shrink:0}
.m365-animation-track{height:2px;background:#d4e0c7;margin:15px 0 12px;overflow:hidden;border-radius:2px}
.m365-animation-track>span{display:block;height:100%;background:#7d9d54;transform:scaleX(var(--m365-progress,1));transform-origin:left}
.m365-animation-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#7e916c}
.m365-animation button[data-animation-toggle],.m365-animation button[data-animation-restart]{border:0;background:transparent;padding:6px 0;color:#5c7945;font-family:inherit;font-size:12px;cursor:pointer}
.m365-animation button[hidden]{display:none}
.m365-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:38px}
.m365-section-head h2{margin-bottom:0!important}
.m365-section-head>p{max-width:370px;font-size:17px;line-height:1.9;color:#5a7050;margin:0}
.m365-services{background:#f8f9f3}
.m365-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.m365-service{border:1px solid #d9e3cd;border-radius:17px;overflow:hidden;background:#fdfef9;transition:border-color .3s,box-shadow .3s}
.m365-service:hover{border-color:#a6bb90;box-shadow:0 12px 28px #34512110}
.m365-service>div:last-child{padding:30px}
.m365-service .eyebrow{font-size:10px!important}
.m365-service h3{font-size:28px;font-weight:550;letter-spacing:-.9px;line-height:1.22;margin:0 0 19px}
.m365-service p:not(.eyebrow){font-size:17px;line-height:1.85;color:#566e47;margin:0 0 22px}
.m365-service ul{list-style:none;padding:0;margin:0;border-top:1px solid #e0e8d7}
.m365-service li{font-size:15px;line-height:1.75;color:#647a54;padding:12px 0 0 20px;position:relative}
.m365-service li:before{content:'✓';position:absolute;left:0;color:#8ba365;font-size:12px}
.m365-service-art{height:165px;padding:25px 32px;display:flex;align-items:center;justify-content:center;gap:26px;position:relative;overflow:hidden}
.m365-mail .m365-service-art{background:#e6eef3}
.m365-files .m365-service-art{background:#e2eee7;gap:16px}
.m365-teams .m365-service-art{background:#eae9f2}
.m365-devices .m365-service-art{background:#e9efdf}
.m365-service-art>img{filter:drop-shadow(0 9px 6px #33557b12);transform:rotate(-7deg);transition:transform .4s}
.m365-service:hover .m365-service-art>img{transform:rotate(0) translateY(-3px)}
.m365-mail-lines{background:#f8fcff;width:42%;border:1px solid #fff;box-shadow:4px 5px 0 #c6d5e1;border-radius:8px;padding:16px;transform:rotate(4deg)}
.m365-mail-lines i{display:block;height:4px;background:#c6d8e7;margin-bottom:10px;border-radius:2px}.m365-mail-lines i:first-child{width:60%;background:#8aaac6}.m365-mail-lines i:last-child{margin-bottom:0;width:75%}
.m365-mail .m365-service-art>span{position:absolute;bottom:20px;font-size:10px;color:#7390a6;letter-spacing:.3px}
.m365-file-path{display:flex;align-items:center;gap:7px;font-size:10px;padding:13px 12px;background:#f6fcf7;border-radius:6px;border:1px solid #fff;box-shadow:0 5px 0 #bfd6c9;color:#5e8a77;white-space:nowrap}
.m365-file-path i{font-style:normal;color:#92b7a7}
.m365-team-preview{width:45%;background:#f8f8fd;border-radius:8px;border:1px solid #fff;box-shadow:3px 5px 0 #cecede;padding:13px;transform:rotate(3deg)}
.m365-team-preview span{display:flex;justify-content:space-between;font-size:11px;color:#77799b;margin-bottom:12px}.m365-team-preview span i{font-style:normal;color:#ada3cb;font-size:7px}
.m365-team-preview b{display:block;font-weight:400;font-size:10px;border-top:1px solid #e4e3f1;padding:8px 0 0;margin-top:6px;color:#7f7d9f}
.m365-laptop{width:175px;height:103px;border:5px solid #75866a;border-radius:9px;position:relative;transform:rotate(-5deg);box-shadow:0 13px 17px #4f683c17}
.m365-laptop:after{content:'';position:absolute;bottom:-12px;left:-17px;right:-17px;height:9px;background:#a5b69b;border-radius:2px 2px 9px 9px}
.m365-laptop>div{height:100%;background:#f4f8ee;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.m365-laptop span{font-size:9px;color:#869c73}.m365-laptop b{height:25px;width:25px;background:#dfebcc;color:#709244;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:400}.m365-laptop i{width:48px;height:3px;background:#c9d8b6;border-radius:2px}
.m365-device-tag{position:absolute;right:12%;bottom:25px;padding:8px 11px;background:#f8fbf1;border:1px solid #fff;border-radius:6px;transform:rotate(5deg);font-size:10px;color:#7f9769}
.m365-license-note{font-size:13px;color:#738763;line-height:1.9;margin:25px 0 0}
.m365-example{background:#eaf0e1;scroll-margin-top:25px}
.m365-onboarding{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:65px;--m365-progress:1}
.m365-demo-panel{background:#fafcf5;border:1px solid #fff;border-radius:16px;box-shadow:0 15px 30px #36512512;padding:26px;min-width:0}
.m365-demo-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#859a71;letter-spacing:1px;border-bottom:1px solid #dfE8d5;padding-bottom:20px}
.m365-demo-top>span:last-child{font-size:17px}
.m365-colleague{display:flex;gap:15px;align-items:center;padding:27px 0}
.m365-colleague>span{width:47px;height:47px;border-radius:50%;background:#dfeace;color:#6d8c4e;display:grid;place-items:center;font-size:21px}
.m365-colleague h3{font-size:22px;letter-spacing:-.7px;font-weight:550;margin:0 0 6px}
.m365-colleague p{font-size:13px;color:#82946e;margin:0}
.m365-demo-tasks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.m365-demo-tasks li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid #e3eadb;padding:15px 12px;border-radius:8px;background:#f5f8ef;transition:background .4s,border-color .4s}
.m365-demo-tasks li.is-current{background:#e6eedb;border-color:#b8cda3}
.m365-demo-tasks li.is-complete{background:#f1f6e9;border-color:#d8e5c8}
.m365-demo-tasks strong{display:block;font-size:14px;font-weight:550;color:#526f3f;line-height:1.5}
.m365-demo-tasks small{display:block;font-size:11px;color:#8b9c7c;line-height:1.7;margin-top:4px}
.m365-task-icon{width:28px;height:28px;border:1px solid #c8d9b8;border-radius:8px;display:grid;place-items:center;color:#9cb17e;background:#e8efdd;font-size:16px}
.m365-task-state{font-size:10px;color:#9baa8f}
.is-current .m365-task-state{color:#719345}.is-complete .m365-task-state{color:#739350}
.m365-demo-result{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:#73914f;line-height:1.6}
.m365-demo-result strong{font-weight:500}
.m365-demo-result>span{height:21px;width:21px;background:#e0ebcf;border-radius:50%;display:grid;place-items:center;font-size:11px}
.m365-demo-explanation{min-width:0}
.m365-example-steps{display:grid;gap:9px;margin-top:19px}
.m365-example-steps button{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid transparent;background:transparent;padding:13px;border-radius:10px;font-family:inherit;cursor:pointer}
.m365-example-steps button[aria-pressed=true]{background:#f5f9ee;border-color:#cddcbf}
.m365-example-steps button>span{height:29px;width:29px;flex-shrink:0;border:1px solid #b8cba3;color:#8ba373;border-radius:50%;display:grid;place-items:center;font-size:11px}
.m365-example-steps button[aria-pressed=true]>span{background:#577a38;border-color:#577a38;color:#f4f9eb}
.m365-example-steps strong{display:block;font-size:16px;font-weight:550;line-height:1.5;color:#526e3f}
.m365-example-steps small{font-size:13px;line-height:1.8;color:#81956d;display:block;margin-top:4px}
.m365-demo-controls{display:flex;gap:22px}
.m365-demo-controls button{font-size:13px!important}
.m365-demo-note{font-size:12px;line-height:1.9;color:#859771;margin:18px 0 0}
.m365-process{background:#f8f9f3}
.m365-process-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}
.m365-process-list li{border-top:1px solid #c4d3b4;padding-top:23px}
.m365-process-list li>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e7efdb;color:#7b9959;font-size:14px;margin-bottom:25px}
.m365-process-list h3{font-size:22px;line-height:1.3;font-weight:550;letter-spacing:-.6px;margin:0 0 16px}
.m365-process-list p{font-size:16px;line-height:1.85;color:#5b724d;margin:0}
.m365-agreements{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center;background:#e9efdf}
.m365-agreements .m365-body{margin:0 0 27px}
.m365-agreement-list article{display:flex;gap:20px;padding:25px 0;border-top:1px solid #c3d2b2}
.m365-agreement-list article:first-child{padding-top:0;border:0}.m365-agreement-list article:last-child{padding-bottom:0}
.m365-agreement-list article>span{font-size:12px;color:#91a778;margin-top:5px}
.m365-agreement-list h3{font-size:21px;font-weight:550;letter-spacing:-.6px;margin:0 0 13px}
.m365-agreement-list p{font-size:16px;line-height:1.9;color:#58704a;margin:0}
.m365-faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;background:#f8f9f3}
.m365-faq .m365-body{max-width:370px}
.m365-faq .faq-list{min-width:0}
.m365-faq .faq-list summary{font-size:17px;line-height:1.65;color:#405f30}
.m365-faq .faq-list details>p{font-size:16px;line-height:1.9;color:#5d744f}
.m365-faq details a{text-decoration:underline;text-underline-offset:3px;color:#45652f}
.m365-final p:not(.eyebrow){font-size:17px;line-height:1.85;max-width:600px}
.m365-final h2{color:#f2f7e9}.m365-final h2>span{color:#bddb8e!important}
@media(max-width:1050px) and (min-width:761px){.m365-intro-grid{gap:30px}.m365-intro h1{font-size:48px;letter-spacing:-2px}.m365-section-head{gap:35px}.m365-section-head>p{max-width:310px}.m365-service>div:last-child{padding:25px}.m365-service h3{font-size:25px}.m365-service-art{padding-inline:22px}.m365-file-path{font-size:8px;gap:5px;padding:11px 8px}.m365-files .m365-service-art{gap:12px}.m365-files .m365-service-art img{width:43px;height:43px}.m365-onboarding,.m365-agreements,.m365-faq{gap:40px}.m365-demo-panel{padding:20px}.m365-demo-tasks li{padding:13px 9px;gap:9px}.m365-demo-tasks strong{font-size:13px}.m365-demo-tasks small{font-size:10px}.m365-task-state{font-size:9px}.m365-example-steps button{padding:12px 8px;gap:11px}.m365-process-list{gap:20px}.m365-process-list h3{font-size:20px}}
@media(max-width:760px){.m365-page main h2{font-size:35px;letter-spacing:-1.5px}.m365-intro{padding-top:23px;padding-bottom:38px}.m365-intro-grid{grid-template-columns:1fr;gap:35px;padding-top:30px}.m365-intro h1{font-size:clamp(43px,11vw,65px);letter-spacing:-2px;margin:16px 0 24px}.m365-lead,.m365-body{font-size:17px;line-height:1.85}.m365-actions{gap:20px}.m365-actions .button{font-size:15px}.m365-trust{font-size:14px;gap:8px 15px}.m365-workspace{width:100%;max-width:460px;justify-self:center}.m365-hub-heading{padding-top:11%;gap:5px}.m365-hub-heading img{width:18px;height:18px}.m365-hub-heading strong{font-size:9px}.m365-hub-rows{gap:7px}.m365-hub-rows>span{font-size:7px}.m365-app{box-shadow:2px 4px 0 #c2d0b7,0 12px 18px #41612916}.m365-workspace figcaption{padding-inline:0}.m365-scene-status{font-size:14px}.m365-section-head{display:block;margin-bottom:30px}.m365-section-head>p{max-width:none;font-size:17px;margin-top:23px}.m365-service-grid{grid-template-columns:1fr;gap:24px}.m365-service>div:last-child{padding:26px}.m365-service h3{font-size:27px}.m365-service p:not(.eyebrow){font-size:17px}.m365-service li{font-size:15px}.m365-service-art{height:160px;padding-inline:25px;gap:20px}.m365-files .m365-service-art{gap:12px}.m365-files .m365-service-art>img{width:43px;height:43px}.m365-file-path{font-size:8px;padding:11px 8px;gap:5px}.m365-license-note{font-size:13px}.m365-onboarding{grid-template-columns:1fr;gap:29px}.m365-demo-panel{padding:20px}.m365-colleague h3{font-size:22px}.m365-demo-tasks li{grid-template-columns:28px minmax(0,1fr);padding:14px 10px;gap:10px}.m365-demo-tasks strong{font-size:14px}.m365-demo-tasks small{font-size:12px}.m365-task-state{grid-column:2;font-size:11px;margin-top:-4px}.m365-demo-result{font-size:14px}.m365-example-steps{grid-template-columns:1fr 1fr;gap:8px}.m365-example-steps button{padding:11px 8px;gap:9px;align-items:flex-start;border-color:#d5e1c9}.m365-example-steps button>span{height:23px;width:23px;font-size:10px}.m365-example-steps strong{font-size:13px}.m365-example-steps small{font-size:11px}.m365-demo-note{font-size:12px}.m365-process-list{grid-template-columns:1fr 1fr;gap:30px 22px}.m365-process-list h3{font-size:20px}.m365-process-list p{font-size:16px}.m365-process-list li>span{margin-bottom:20px}.m365-agreements,.m365-faq{grid-template-columns:1fr;gap:33px}.m365-agreement-list h3{font-size:21px}.m365-faq .faq-list summary{font-size:16px}.m365-final p:not(.eyebrow){font-size:17px}}
@media(max-width:380px){.m365-process-list{grid-template-columns:1fr}.m365-service>div:last-child{padding:23px}.m365-file-path{font-size:7px}.m365-service h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.m365-app,.m365-hub,.m365-connections,.m365-hub-rows b,.m365-service,.m365-service-art>img,.m365-demo-tasks li{transition:none}}
.m365-app-intune{left:50%;top:12%;--app-tilt:-3deg;--loose-x:4px;--loose-y:-18px}
/* Four workplace areas, including device management with Intune. */
.m365-hub{height:48%}
.m365-workspace[data-frame="2"] .m365-hub-rows>span:nth-last-child(2) b{opacity:0}