/* Conceptual diagrams only. These are not application screenshots or sample data. */
@media (min-width:901px){
  .revamp-inner .page-hero:has(>.hero-explainer),
  .revamp-inner .practice-hero:has(>.hero-explainer){min-height:570px;padding-right:48vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .revamp-inner .page-hero:has(>.hero-explainer) h1,
  .revamp-inner .practice-hero:has(>.hero-explainer) h1{font-size:clamp(42px,4.5vw,68px);max-width:780px}
  .revamp-inner .page-hero:has(>.hero-explainer) .lead,
  .revamp-inner .practice-hero:has(>.hero-explainer) .lead{max-width:690px}
}
.revamp-inner .hero-explainer{position:absolute;right:5vw;top:50%;width:min(38vw,550px);min-height:378px;padding:31px 35px 25px;transform:translateY(-50%) perspective(1100px) rotateY(-7deg) rotateX(2deg);border:1px solid #4e7780;background:linear-gradient(145deg,#173640,#0b1b21 74%);box-shadow:18px 24px 0 #2a66701f,0 35px 80px #0006;overflow:hidden;animation:hero-explainer-float 8s ease-in-out infinite}
.revamp-inner .hero-explainer:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#a7e8ec0d 1px,transparent 1px),linear-gradient(#a7e8ec0d 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to right,transparent,#000);pointer-events:none}
.revamp-inner .hero-explainer-kicker{position:relative;display:block;color:#a7e8ec;font-size:10px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;padding-bottom:18px;border-bottom:1px solid #486a72}
.revamp-inner .hero-explainer-path{position:relative;margin:19px 0 25px 10px;border-left:1px solid #6babb3}
.revamp-inner .hero-explainer-step{display:flex;align-items:center;gap:19px;min-height:65px;position:relative;padding-left:25px}
.revamp-inner .hero-explainer-step:before{content:"";position:absolute;left:-5px;top:28px;width:9px;height:9px;background:#a7e8ec;box-shadow:0 0 0 5px #a7e8ec1c,0 0 20px #75d4df80;border-radius:50%}
.revamp-inner .hero-explainer-step>span{color:#79bdc5;font-size:10px;font-weight:800;letter-spacing:.13em}
.revamp-inner .hero-explainer-step strong{color:#f2f7f7;font:600 clamp(15px,1.65vw,22px)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.03em}
.revamp-inner .hero-explainer-outcome{position:relative;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#b9edf0;font-size:10px;font-weight:800;letter-spacing:.15em;border-top:1px solid #486a72;padding-top:18px}
.revamp-inner .hero-explainer-outcome b{font-size:20px;font-weight:400}
@keyframes hero-explainer-float{50%{transform:translateY(calc(-50% - 8px)) perspective(1100px) rotateY(-3deg) rotateX(0)}}
@media(max-width:900px){.revamp-inner .hero-explainer{position:relative;top:auto;right:auto;width:100%;max-width:570px;min-height:0;margin-top:42px;transform:none;animation:none}.revamp-inner .page-hero:has(>.hero-explainer),.revamp-inner .practice-hero:has(>.hero-explainer){padding-bottom:70px}}
@media(max-width:600px){.revamp-inner .hero-explainer{padding:24px;box-shadow:10px 14px 0 #2a66701f}.revamp-inner .hero-explainer-step strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.revamp-inner .hero-explainer{animation:none;transform:translateY(-50%) perspective(1100px) rotateY(-7deg)}@media(max-width:900px){.revamp-inner .hero-explainer{transform:none}}}