.solutions-page{--cyan:#01eafc;--muted:#4d6078;background:#fff;color:#101c3a}.solutions-page .page{width:min(1160px,calc(100% - 40px));margin:auto}.solutions-intro{padding:42px 0 44px;border-bottom:1px solid #d8e1f4;background:linear-gradient(120deg,#f6faff,#fff)}.solutions-breadcrumb{display:flex;gap:12px;font-size:14px;margin:0 80px 32px 0;color:#4d6078}.solutions-intro-copy{display:grid;grid-template-columns:1.1fr 1fr;gap:14px 64px;align-items:start}.solutions-intro-copy .eyebrow{grid-column:1/-1;color:#084cda;font-size:14px;font-weight:700;letter-spacing:.1em}.solutions-intro-copy h1{font-size:clamp(32px,3.6vw,48px);line-height:1.1;text-transform:none;text-shadow:none;letter-spacing:-.04em;margin:0}.solutions-intro-copy h1 span{color:#0d53ff}.solutions-intro-copy>p{font-size:18px;line-height:1.65;margin:0;color:#3f4c67;max-width:540px}.solutions-page .tools{padding:42px 0 48px;text-align:center;background:#edf8ff}.solutions-page .tools h2{font-size:clamp(34px,4.25vw,54px);line-height:1.2;letter-spacing:-.03em;max-width:800px;margin:0 auto 14px}.solutions-page .tools>.page>p{font-size:17px;max-width:730px;margin:0 auto 28px;color:#4d6078}.solutions-page .motion-control{margin-top:20px;padding:10px 16px;border:1px solid #95b7d3;border-radius:6px;background:white;color:#073b8d;font-size:14px}@media(max-width:760px){.solutions-intro{padding:32px 0}.solutions-intro-copy{grid-template-columns:1fr;gap:16px}.solutions-breadcrumb{margin-bottom:28px}.solutions-page .page{width:calc(100% - 28px)}}
.solutions-page .simple{padding:72px 0;text-align:center}
.solutions-page .simple h2{font-size:clamp(30px,4vw,46px);margin:0 0 16px;letter-spacing:-.035em}
.solutions-page .simple p{max-width:900px;margin:0 auto 28px;color:var(--muted);font-size:18px;line-height:1.65}
.solutions-page .cta{background:#07165b;color:#fff;padding:68px 0;text-align:center}
.solutions-page .cta h2{font-size:clamp(32px,4vw,48px);margin:0 0 12px}
.solutions-page .cta p{max-width:680px;margin:0 auto 24px;color:#cedcf1;font-size:17px}
.solutions-page .btn{display:inline-block;background:#fff;color:#0a1b63;padding:13px 21px;border-radius:999px;font-weight:900;text-decoration:none}

/* One uninterrupted dark surface, matching the neural component. */
body.solutions-theme{background:#041c54}.solutions-page{background:#041c54;color:#f0f8ff;--muted:#c1d6eb}.solutions-intro{padding-top:112px;background:transparent;border-bottom:0}.solutions-intro-copy .eyebrow{color:#73f4ff}.solutions-intro-copy h1 span{color:#b7f9ff}.solutions-intro-copy>p,.solutions-page .tools>.page>p{color:#c1d6eb}.solutions-page .tools,.solutions-page .simple,.solutions-page .cta{background:transparent}.solutions-theme footer{background:#041c54;color:#c1d6eb;border-top-color:#284b76}.solutions-theme footer a{color:#c1d6eb}@media(max-width:760px){.solutions-intro{padding-top:104px}}
/* White introduction and standalone progression section around the dark graph. */
.solutions-intro { background:#fff; color:#101c3a; padding-bottom:52px; }
.solutions-intro-copy { display:block; max-width:900px; }
.solutions-intro-copy h1 { font-size:clamp(42px,5.5vw,72px); }
.solutions-intro-copy h1 span { color:#0d53ff; }
.solutions-intro-copy > p { max-width:800px; margin:24px 0 0; color:#3f4c67; }
.solutions-page .simple { background:#fff; color:#101c3a; padding:72px 0; }
.solutions-page .simple p { color:#4d6078; }
@media(max-width:760px) { .solutions-intro { padding-bottom:38px; } .solutions-page .simple { padding:52px 0; } }

/* Reference navy shared by the introduction and graph. */
body.solutions-theme, .solutions-page { background:#01091f; }
.solutions-intro { background:#01091f; color:#f0f8ff; }
.solutions-intro-copy h1 span { color:#b7f9ff; }
.solutions-intro-copy > p { color:#c1d6eb; }
.solutions-page .tools { background:#01091f; }
.solutions-theme footer { background:#01091f; }
/* Brand mark above the Solutions heading. */
/* White introduction, with brand and navigation together at the top right. */
.solutions-intro { background:#fff; color:#101c3a; }
.solutions-intro-copy h1 span { color:#0d53ff; }
.solutions-intro-copy > p { color:#3f4c67; }
.solutions-intro { padding-top:144px; }
@media(max-width:560px) { .solutions-intro { padding-top:120px; } }





.solutions-page .btn:hover{background:#a8d6ff}.solutions-page .btn:focus-visible{outline:3px solid #a8d6ff;outline-offset:3px}

/* ---------- FlowSteps (process flow in SystemMap-style bubbles) ---------- */
.zv-flow-wrap{container-type:inline-size}
.zv-flow{--zv-flow-gap:56px;list-style:none;margin:0;padding:8px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:24px;column-gap:var(--zv-flow-gap);font-family:var(--font-sans,Arial,Helvetica,sans-serif);counter-reset:zvflow}
.zv-flow__step{box-sizing:border-box;min-width:104px;position:relative;counter-increment:zvflow;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:12px 26px;
  border-radius:var(--radius-pill,999px);color:#eaffff;border:1px solid rgba(1,234,252,.72);
  background:radial-gradient(circle at 35% 25%,rgba(1,234,252,.24),rgba(0,46,104,.82) 62%,rgba(1,18,60,.92));
  box-shadow:0 0 0 5px rgba(1,234,252,.045),0 0 25px rgba(1,234,252,.22),inset 0 0 18px rgba(1,234,252,.09);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.zv-flow__step strong{font-size:18px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.zv-flow__step small{font-size:12px;line-height:1.3;color:#9eeef6;margin-top:4px;max-width:150px}
/* connector dot on the left edge, as on SystemMap nodes */
.zv-flow__step::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--synapse,#01eafc);box-shadow:0 0 14px 5px rgba(1,234,252,.45);left:-5px;top:50%;transform:translateY(-50%)}
/* arrow link to the next step */
.zv-flow__step:not(:last-child)::after{content:"";position:absolute;left:calc(100% + 8px);top:50%;width:calc(var(--zv-flow-gap) - 16px);height:10px;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(1,234,252,.95) 0 2px,transparent 2.5px) 0 50%/8px 8px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10'%3E%3Cpath d='M1.5 1.5 6.5 5 1.5 8.5' fill='none' stroke='%2301eafc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center/8px 10px no-repeat,linear-gradient(rgba(1,234,252,.6),rgba(1,234,252,.6)) left center/calc(100% - 2px) 1.5px no-repeat;
  filter:drop-shadow(0 0 4px rgba(1,234,252,.55));animation:zv-flow-pulse 2.4s linear infinite;animation-delay:calc(var(--i,0) * .4s)}
@keyframes zv-flow-pulse{0%{background-position:0 50%,right center,left center}100%{background-position:calc(100% - 10px) 50%,right center,left center}}
.zv-flow__step:hover,.zv-flow__step:focus-visible,.zv-flow__step[aria-current="step"]{border-color:#bdfbff;box-shadow:0 0 0 7px rgba(1,234,252,.07),0 0 38px rgba(1,234,252,.38),inset 0 0 22px rgba(1,234,252,.13)}
.zv-flow__step:hover,.zv-flow__step:focus-visible{transform:scale(1.05)}
.zv-flow__step:focus-visible{outline:2px solid var(--sky,#a8d6ff);outline-offset:4px}
.zv-flow__step[aria-current="step"]{border-width:2px}
.zv-flow--numbered .zv-flow__step strong::before{content:counter(zvflow,decimal-leading-zero);display:block;margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--synapse,#01eafc)}
/* Ground: give the flow its own navy panel when it isn't already on one */
.zv-flow-panel{padding:48px 32px;background:radial-gradient(circle at 50% 50%,rgba(0,111,196,.30),transparent 60%),linear-gradient(135deg,#041c54 0%,#03265d 42%,var(--panel-end,#020b25) 100%)}
/* Narrow: stack vertically with downward arrows */
@container (max-width:640px){
  .zv-flow{flex-direction:column;flex-wrap:nowrap;--zv-flow-gap:44px;row-gap:var(--zv-flow-gap)}
  .zv-flow__step{width:100%;max-width:340px}
  .zv-flow__step small{max-width:none}
  .zv-flow__step:not(:last-child)::after{left:50%;top:calc(100% + 8px);width:10px;height:calc(var(--zv-flow-gap) - 16px);transform:translateX(-50%);
    background:radial-gradient(circle,rgba(1,234,252,.95) 0 2px,transparent 2.5px) 50% 0/8px 8px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1.5 1.5 5 6.5 8.5 1.5' fill='none' stroke='%2301eafc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom/10px 8px no-repeat,linear-gradient(rgba(1,234,252,.6),rgba(1,234,252,.6)) center top/1.5px calc(100% - 2px) no-repeat;
    animation-name:zv-flow-pulse-v}
}
@keyframes zv-flow-pulse-v{0%{background-position:50% 0,center bottom,center top}100%{background-position:50% calc(100% - 10px),center bottom,center top}}
@media (prefers-reduced-motion:reduce){.zv-flow__step::after{animation:none!important}.zv-flow__step{transition:none}}
/* Site: FlowSteps on a white section. A solid navy base under the bubble's
   translucent fill keeps it reading as it does on navy. */
.zv-flow--on-light .zv-flow__step{background:radial-gradient(circle at 35% 25%,rgba(1,234,252,.24),rgba(0,46,104,.82) 62%,rgba(1,18,60,.92)),#041c54;box-shadow:0 0 0 5px rgba(1,234,252,.08),0 6px 22px rgba(2,11,37,.18),0 0 18px rgba(1,234,252,.25),inset 0 0 18px rgba(1,234,252,.09)}
.solutions-page .simple .zv-flow-wrap{margin-top:28px}
/* System map section: one seamless blue field behind the heading and the map, no inset panel. */
.solutions-page .tools { background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(0,111,196,.34),transparent 70%),radial-gradient(ellipse 40% 35% at 82% 40%,rgba(0,81,159,.25),transparent 70%),linear-gradient(135deg,#041c54 0%,#03265d 45%,#020b25 100%); }
.solutions-page .tools .zv-sysmap { background:transparent; }
/* Closing CTA: light ice band so it stands apart from the navy footer, with the design-system primary button. */
.solutions-page .cta { background:var(--ice,#e1f3ff); color:var(--heading,#0a1b63); }
.solutions-page .cta h2 { color:var(--heading,#0a1b63); }
.solutions-page .cta p { color:#3f4c67; }
.zv-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border:0; border-radius:999px; font:700 16px/1 var(--font-sans,Arial,Helvetica,sans-serif); text-decoration:none; cursor:pointer; transition:background-color .15s ease; }
.zv-btn svg { width:20px; height:20px; flex:none; }
.zv-btn--primary { background:var(--blue,#0d53ff); color:#fff; }
.zv-btn--primary:hover { background:var(--link,#084cda); }
.zv-btn--primary:active { background:var(--heading,#0a1b63); }
.zv-btn:focus-visible { outline:3px solid var(--link,#084cda); outline-offset:3px; }