/* PMOS steps, integration page (C08). Generated from mockup/sections/appfolio/04-we-packaged-everything-above-into-a-prov.html and css/appfolio.css. */
@keyframes a-pop {from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.gx-pmosstepsapp .gm-dark a:focus-visible,.gx-pmosstepsapp.gm-dark a:focus-visible,.gx-pmosstepsapp .gm-dark button:focus-visible,.gx-pmosstepsapp.gm-dark button:focus-visible,.gx-pmosstepsapp #contact a:focus-visible,.gx-pmosstepsapp footer a:focus-visible {outline-color:#FFFFFF}
.gx-pmosstepsapp .i-kick {margin:0;font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#5834C7}
.gx-pmosstepsapp .i-kick-d {color:#18C7C3}
.gx-pmosstepsapp .i-h2 {margin:0;font-family:'Jost',Arial,sans-serif;font-weight:700;font-size:64px;line-height:1.1;letter-spacing:-.02em;color:#19152F}
.gx-pmosstepsapp .i-lede {margin:0;max-width:680px;font-size:20px;line-height:1.6;color:#655B77}
.gx-pmosstepsapp .i-steps {position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.gx-pmosstepsapp .i-steps::before {content:"";position:absolute;left:0;right:0;top:32px;border-top:1.5px solid #665483}
.gx-pmosstepsapp .i-step {position:relative;display:flex;flex-direction:column;gap:12px}
.gx-pmosstepsapp .i-dot {display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#302544;margin-bottom:12px}
.gx-pmosstepsapp .i-step h3 {margin:0;font-family:'Jost',Arial,sans-serif;font-weight:600;font-size:24px;line-height:1.15;color:#FFFFFF}
.gx-pmosstepsapp .i-step p {margin:0;font-size:16px;line-height:1.55;color:#C9C2DA}
.gx-pmosstepsapp .i-band {display:flex;justify-content:space-between;align-items:center;gap:40px;padding:32px;background:#EFECF8;color:#5834C7;font-family:'Jost',Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.35}
.gx-pmosstepsapp .i-band a:focus-visible {outline-color:#5834C7!important}
.gx-pmosstepsapp .gm-dark .i-opt,.gx-pmosstepsapp.gm-dark .i-opt {border-color:#FFFFFF}
.gx-pmosstepsapp .gm-dark .i-opt-feat,.gx-pmosstepsapp.gm-dark .i-opt-feat {border-color:#18C7C3}
.gx-pmosstepsapp .gm-dark .i-crumb:hover,.gx-pmosstepsapp.gm-dark .i-crumb:hover,.gx-pmosstepsapp .gm-dark .i-crumb:focus-visible,.gx-pmosstepsapp.gm-dark .i-crumb:focus-visible {color:#FFFFFF!important}
.gx-pmosstepsapp .i-steps-light .i-step h3 {color:#19152F}
.gx-pmosstepsapp .i-steps-light .i-step p {color:#655B77}
.gx-pmosstepsapp .i-steps-light .i-dot {background:#FFFFFF!important;box-shadow:inset 0 0 0 1px #D9D4E6;-webkit-backdrop-filter:none;backdrop-filter:none}
.gx-pmosstepsapp .i-dot,.gx-pmosstepsapp .i-glass {background:rgba(255,255,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);-webkit-backdrop-filter:blur(2px) saturate(160%);backdrop-filter:blur(2px) saturate(160%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .gx-pmosstepsapp .i-dot,.gx-pmosstepsapp .i-glass {background:#2A2346!important}
}
.gx-pmosstepsapp .i-opt.i-glass:not(.i-opt-feat) {border:0}
.gx-pmosstepsapp .i-prow-l.i-glass {box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.gx-pmosstepsapp .i-glass .i-list li {color:#FFFFFF;border-color:rgba(255,255,255,.24)}
.gx-pmosstepsapp .i-glass .i-list li:last-child {border-bottom-color:rgba(255,255,255,.24)}
.gx-pmosstepsapp .i-glass .i-list a {color:#FFFFFF}
@media (prefers-reduced-motion: no-preference) {
  .gx-pmosstepsapp .i-steps.is-wait .i-dot {opacity:0;transform:scale(.4)}
  .gx-pmosstepsapp .i-steps.is-wait.is-in .i-dot {animation:a-pop .5s cubic-bezier(.2,.7,.2,1) both}
  .gx-pmosstepsapp .i-steps.is-in .i-step:nth-child(2) .i-dot {animation-delay:.15s}
  .gx-pmosstepsapp .i-steps.is-in .i-step:nth-child(3) .i-dot {animation-delay:.3s}
  .gx-pmosstepsapp .i-steps.is-in .i-step:nth-child(4) .i-dot {animation-delay:.45s}
  .gx-pmosstepsapp .i-steps.is-in .i-step:nth-child(5) .i-dot {animation-delay:.6s}
}
.gx-pmosstepsapp-s1.gx-pmosstepsapp-s1 { display: grid;grid-template-columns: minmax(0, 1fr) 440px;gap: 80px;align-items: end }
.gx-pmosstepsapp-s2.gx-pmosstepsapp-s2 { display: flex;flex-direction: column;gap: 24px }
.gx-pmosstepsapp-s3.gx-pmosstepsapp-s3 { align-self: flex-start;display: inline-flex }
.gx-pmosstepsapp-s4.gx-pmosstepsapp-s4 { color: #FFFFFF }
.gx-pmosstepsapp-s5.gx-pmosstepsapp-s5 { color: #18C7C3 }
.gx-pmosstepsapp-s6.gx-pmosstepsapp-s6 { color: #C9C2DA }
.gx-pmosstepsapp-s7.gx-pmosstepsapp-s7 { margin: 0;display: flex;flex-direction: column;gap: 16px;padding: 32px;border-left: 0 }
.gx-pmosstepsapp-s8.gx-pmosstepsapp-s8 { margin: 0;font-family: 'Jost', Arial, sans-serif;font-weight: 500;font-size: 22px;line-height: 1.35;color: #FFFFFF }
.gx-pmosstepsapp-s9.gx-pmosstepsapp-s9 { font-size: 15px;color: #C9C2DA }
.gx-pmosstepsapp-s10.gx-pmosstepsapp-s10 { font-weight: 600;color: #FFFFFF }
.gx-pmosstepsapp-s11.gx-pmosstepsapp-s11 { display: flex;flex-direction: column;gap: 80px }
.gx-pmosstepsapp-s12.gx-pmosstepsapp-s12 { margin: 0 }
.gx-pmosstepsapp-s13.gx-pmosstepsapp-s13 { display: flex;align-items: center;gap: 28px;flex-shrink: 0 }
.gx-pmosstepsapp-s14.gx-pmosstepsapp-s14 { display: inline-flex;align-items: center;height: 56px;padding: 0 28px;background: #5834C7;color: #FFFFFF;text-decoration: none;font-family: 'Epilogue', Arial, sans-serif;font-size: 17px;font-weight: 600 }
.gx-pmosstepsapp-s15.gx-pmosstepsapp-s15 { font-family: 'Epilogue', Arial, sans-serif;font-size: 17px;font-weight: 600;color: #19152F;text-decoration: underline;text-underline-offset: 7px;text-decoration-thickness: 2px;text-decoration-color: #5834C7 }
.gx-pmosstepsapp-s16.gx-pmosstepsapp-s16 { display: flex;flex-direction: column;gap: 56px }
@media (max-width: 1100px) {
  .gx-pmosstepsapp-s1.gx-pmosstepsapp-s1 { grid-template-columns:minmax(0,1fr)!important }
  .gx-pmosstepsapp-s13.gx-pmosstepsapp-s13 { flex-wrap:wrap;flex-shrink:1;min-width:0 }
  .gx-pmosstepsapp .i-steps { grid-template-columns:minmax(0,1fr)!important }
  .gx-pmosstepsapp .i-steps { grid-template-columns:minmax(0,1fr)!important }
  .gx-pmosstepsapp .i-steps { grid-template-columns:minmax(0,1fr)!important }
}
@media (max-width: 640px) {
  .gx-pmosstepsapp-s8.gx-pmosstepsapp-s8 { font-size:20px!important }
}
