/* An interactive, readable service journey for private and business customers. */
.qh-customer-flow{--cf-bg:#102b40;--cf-blue:#8abaff;--cf-line:#49617a;position:relative;isolation:isolate;background:var(--cf-bg);color:#f8fbff;padding-block:76px 70px;scroll-margin-top:28px}
.qh-customer-flow,.qh-customer-flow *{box-sizing:border-box}
.qh-customer-flow [hidden]{display:none!important}
.qh-customer-flow .cf-heading{display:flex;align-items:center;justify-content:space-between;gap:32px}
.qh-customer-flow .cf-controls{display:grid;justify-items:end;gap:10px;flex-shrink:0}
.qh-customer-flow h2{font-size:clamp(38px,4vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1.13;margin:0;text-wrap:balance;color:#fff}
.qh-customer-flow .cf-switch{display:flex;padding:5px;gap:4px;border:1px solid #526b81;border-radius:5px;background:#0b2335;flex-shrink:0}
.qh-customer-flow button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qh-customer-flow .cf-switch button{min-width:110px;min-height:46px;border:0;background:transparent;color:#c9d8e7;font-size:17px;line-height:1.4;font-weight:600;padding:11px 19px;border-radius:2px;transition:background-color .18s,color .18s}
.qh-customer-flow .cf-switch button[aria-pressed=true]{background:#f5f8fc;color:#15334c}
.qh-customer-flow .cf-switch button[aria-pressed=false]:hover{background:#284b65;color:#fff}
.qh-customer-flow .cf-motion{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 12px;border:1px solid #526b81;border-radius:3px;background:transparent;color:#d2e1ed;font-size:16px;line-height:1.5;white-space:nowrap}
.qh-customer-flow .cf-motion:hover{background:#284b65;color:#fff}
.qh-customer-flow .cf-motion:disabled{cursor:default;color:#c8d8e5;background:transparent}
.qh-customer-flow .cf-motion svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qh-customer-flow .cf-intro{font-size:19px;line-height:1.65;color:#c8d8e5;max-width:760px;margin:24px 0 0;min-height:32px}
.qh-customer-flow .cf-diagram{position:relative;padding-block:45px 36px;margin-top:12px;background-image:radial-gradient(circle,#6485a232 .8px,transparent 1px);background-size:12px 12px;background-position:center;isolation:isolate}
.qh-customer-flow .cf-connection{position:absolute;left:12.5%;right:12.5%;top:94px;height:2px;background:repeating-linear-gradient(to right,#6686a6 0 3px,transparent 3px 8px);z-index:-1;overflow:hidden}
.qh-customer-flow .cf-connection span{display:block;width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,transparent 85%,#a1ccff 98%,#fff 100%);opacity:0;transform:translateX(-100%)}
.qh-customer-flow.cf-ready .cf-connection span{animation:cf-journey 4.8s linear infinite;animation-play-state:paused}
.qh-customer-flow.cf-moving .cf-connection span{animation-play-state:running}
.qh-customer-flow .cf-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0}
.qh-customer-flow .cf-steps li{margin:0;padding:0;min-width:0}
.qh-customer-flow .cf-step{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;min-height:151px;padding:0 5px 8px;border:0;background:none;color:#e0ebf5;text-align:center;border-radius:4px}
.qh-customer-flow .cf-step:disabled{opacity:1;cursor:default}
.qh-customer-flow .cf-icon{position:relative;width:100px;height:100px;display:grid;place-items:center;background:#183a53;border:1px solid #52728b;border-radius:12px;box-shadow:0 0 0 8px var(--cf-bg);color:#b4d3f6;transition:background-color .18s,border-color .18s,transform .18s}
.qh-customer-flow .cf-icon::after{content:"";position:absolute;inset:-5px;pointer-events:none;border:2px solid #8fc7ff;border-radius:inherit;box-shadow:0 0 15px #6eb9ff44;opacity:0}
.qh-customer-flow.cf-ready .cf-icon::after{animation:cf-node-wave 4.8s ease-out infinite;animation-play-state:paused}
.qh-customer-flow.cf-ready li:nth-child(2) .cf-icon::after{animation-delay:.8s}
.qh-customer-flow.cf-ready li:nth-child(3) .cf-icon::after{animation-delay:1.6s}
.qh-customer-flow.cf-ready li:nth-child(4) .cf-icon::after{animation-delay:2.4s}
.qh-customer-flow.cf-moving .cf-icon::after{animation-play-state:running}
.qh-customer-flow .cf-icon svg{width:53px;height:53px;display:block}
.qh-customer-flow .cf-icon-report{background:#e8eef5;color:#1a3d5c;border-color:#fff}
.qh-customer-flow .cf-step[aria-pressed=true] .cf-icon{background:#2963a9;border-color:#b5d8ff;color:#fff}
.qh-customer-flow .cf-step:not(:disabled):hover .cf-icon{border-color:#d6e9ff;transform:translateY(-3px)}
.qh-customer-flow .cf-step-label{font-size:20px;line-height:1.4;font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.qh-customer-flow .cf-step[aria-pressed=true] .cf-step-label{color:#fff;text-decoration:underline;text-decoration-color:#8abaff;text-decoration-thickness:2px;text-underline-offset:8px}
.qh-customer-flow :is(button,a):focus-visible{outline:3px solid #afd4ff;outline-offset:6px}
.qh-customer-flow .cf-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:55px;border-top:1px solid #365469;padding-top:32px}
.qh-customer-flow .cf-details{max-width:730px;min-height:135px}
.qh-customer-flow .cf-detail+.cf-detail{margin-top:24px}
.qh-customer-flow.cf-ready .cf-detail+.cf-detail{margin-top:0}
.qh-customer-flow .cf-detail h3{font-size:27px;line-height:1.3;letter-spacing:-.025em;font-weight:500;margin:0;color:#fff;text-wrap:balance}
.qh-customer-flow .cf-detail p{font-size:18px;line-height:1.7;color:#c8d8e5;margin:13px 0 0;text-wrap:pretty}
.qh-customer-flow .cf-actions{min-width:0;text-align:left}
.qh-customer-flow .cf-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;padding:17px 22px;border-radius:3px;background:#f6f9fc;color:#143047;text-decoration:none;font-size:17px;font-weight:600;line-height:1.4;touch-action:manipulation;transition:background-color .18s}
.qh-customer-flow .cf-cta:hover{background:#cce3ff}
.qh-customer-flow .cf-actions p{font-size:16px;line-height:1.6;color:#c8d8e5;margin:13px 0 0}
@keyframes cf-journey{0%{transform:translateX(-100%);opacity:0}5%{opacity:1}60%{transform:translateX(0);opacity:1}80%,100%{transform:translateX(100%);opacity:0}}
@keyframes cf-node-wave{0%{opacity:0}5%{opacity:.95}18%,100%{opacity:0}}
@media(max-width:1000px){.qh-customer-flow .cf-bottom{gap:32px}.qh-customer-flow .cf-step-label{font-size:18px}.qh-customer-flow .cf-details{min-height:157px}.qh-customer-flow .cf-cta{max-width:290px}}
@media(max-width:800px){.qh-customer-flow{padding-block:54px}.qh-customer-flow .cf-heading{align-items:flex-start;flex-direction:column;gap:24px}.qh-customer-flow .cf-controls{width:100%;max-width:400px;justify-items:start}.qh-customer-flow h2{font-size:40px}.qh-customer-flow .cf-intro{font-size:18px;min-height:0;margin-top:22px;max-width:520px}.qh-customer-flow .cf-bottom{grid-template-columns:1fr;gap:26px}.qh-customer-flow .cf-details{min-height:0}.qh-customer-flow .cf-actions{max-width:400px}.qh-customer-flow .cf-cta{max-width:none}.qh-customer-flow .cf-step-label{font-size:17px}.qh-customer-flow .cf-steps{gap:12px}.qh-customer-flow .cf-icon{width:82px;height:82px;border-radius:10px}.qh-customer-flow .cf-icon svg{width:46px;height:46px}.qh-customer-flow .cf-connection{top:85px}.qh-customer-flow .cf-step{gap:20px;min-height:140px}.qh-customer-flow .cf-detail h3{font-size:25px}}
@media(max-width:560px){.qh-customer-flow .cf-switch{width:100%;max-width:360px}.qh-customer-flow .cf-switch button{flex:1;min-width:0}.qh-customer-flow .cf-diagram{padding-block:18px 22px;margin-top:16px;background-position:30px center}.qh-customer-flow .cf-steps{grid-template-columns:1fr;gap:20px}.qh-customer-flow .cf-step{flex-direction:row;gap:23px;text-align:left;padding:0;min-height:64px}.qh-customer-flow .cf-icon{flex-shrink:0;width:64px;height:64px;border-radius:8px;box-shadow:0 0 0 6px var(--cf-bg)}.qh-customer-flow .cf-icon svg{width:39px;height:39px}.qh-customer-flow .cf-step-label{font-size:20px;line-height:1.45;text-wrap:pretty}.qh-customer-flow .cf-connection{left:31px;right:auto;top:49px;bottom:54px;width:2px;height:auto;background:repeating-linear-gradient(to bottom,#6686a6 0 3px,transparent 3px 8px)}.qh-customer-flow .cf-connection span{width:2px;height:100%;background:linear-gradient(180deg,transparent 0%,transparent 85%,#a1ccff 98%,#fff 100%)}.qh-customer-flow.cf-ready .cf-connection span{animation-name:cf-journey-mobile}.qh-customer-flow .cf-bottom{padding-top:26px}.qh-customer-flow .cf-detail p{font-size:17px}.qh-customer-flow .cf-step:not(:disabled):hover .cf-icon{transform:none}}
@media(max-width:350px){.qh-customer-flow h2{font-size:35px}.qh-customer-flow .cf-step-label{font-size:18px}.qh-customer-flow .cf-step{gap:18px}.qh-customer-flow .cf-cta{font-size:16px;padding-inline:17px;gap:12px}}
@keyframes cf-journey-mobile{0%{transform:translateY(-100%);opacity:0}5%{opacity:1}60%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(100%);opacity:0}}
@media(prefers-reduced-motion:reduce){.qh-customer-flow .cf-connection span,.qh-customer-flow .cf-icon::after{animation:none!important}.qh-customer-flow :is(.cf-step .cf-icon,.cf-switch button,.cf-cta){transition:none}.qh-customer-flow .cf-step:not(:disabled):hover .cf-icon{transform:none}}