/* Divider lines between the capability rail items removed 2 October 2026 at Marketing's request (Talicia), for a cleaner, less ruled look. */
/* Hero with the signal rail. From the Managed FinOps page, 21 Sep 2026. */
.fxh{background:linear-gradient(158deg,#fff 0,#f1f3f4 46%,var(--stone) 100%); overflow:hidden;padding:0;position:relative}
.fxh:before{background:radial-gradient(58% 72% at 90% 82%,rgba(97,212,195,.24),transparent 66%); content:"";inset:0;pointer-events:none;position:absolute}
.fxh:after{background:radial-gradient(46% 58% at 4% 2%,rgba(149,135,190,.16),transparent 70%); content:"";inset:0;pointer-events:none;position:absolute}
.fxh>*{position:relative;z-index:1}
.fxh-top{padding:calc(var(--header-offset) + clamp(18px,2.6vw,40px)) 0 clamp(46px,5.6vw,76px)}
.fxh-from{align-items:center;display:flex;flex-wrap:wrap;gap:10px 14px}
.fxh-from a,.fxh-from span{font:600 .69rem var(--mono);letter-spacing:.17em;text-transform:uppercase}
.fxh-from .now{color:var(--spot)}
/* font-size carries !important for one reason. The site stylesheet declares,
   on a bare element selector,
     @media (max-width:1234px){ h1{font-size:47.05882352941177px !important} }
   and no selector of ours can outrank an !important on their side. Without
   this the headline is forced to 47px on every screen at or below 1234px,
   where this clamp asks for 36.8px at 390. Same guard as hero-estate; drop
   both if that declaration ever leaves their stylesheet.
   Reference: epiusecloud-portal.md, "Theirs reaching our pages". */
.fxh-h{color:#243a7e;font-size:clamp(2.3rem,7.4vw,5.9rem) !important;letter-spacing:-.05em;line-height:.98; margin:clamp(26px,3.2vw,40px) 0 0;text-wrap:balance}
.fxh-h em{background:linear-gradient(96deg,#264295 0,#3c5fac 58%,#50b1a3 155%); -webkit-background-clip:text;background-clip:text;color:transparent;display:block; font-style:normal;width:-moz-fit-content;width:fit-content}
.fxh-sub{color:var(--mid);font-size:clamp(1.04rem,1.55vw,1.28rem);line-height:1.58; margin:clamp(22px,2.6vw,32px) 0 0;max-width:47ch}
.fxh-sub b{color:#243a7e;font-weight:700}
.fxh-act{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(28px,3.4vw,40px)}
.fxh .btn-p{background:#f89921;color:#243a7e}
.fxh .btn-g{background:transparent;border:1px solid rgba(36,58,126,.5);color:#243a7e}
.fxh .btn-g:hover{background:rgba(36,58,126,.06);border-color:rgba(36,58,126,.8)}
.fxh-art{inset:0 -12% 0 auto;pointer-events:none;position:absolute;width:min(62%,900px);z-index:0}
.fxh-art svg{display:block;height:100%;width:100%}
.fxh-art .a{fill:none;stroke:#58bcd8;stroke-linecap:round;opacity:.42;stroke-width:1.7}
.fxh-art .a2{opacity:.3;stroke:#9587be}
.fxh-art .a3{opacity:.2;stroke:#3c5fac}
.fxh-art .live{fill:none;filter:drop-shadow(0 0 14px rgba(97,212,195,.42));stroke:#50b1a3; stroke-linecap:round;stroke-width:3;opacity:.62; stroke-dasharray:1;stroke-dashoffset:1;animation:fxDraw 2.4s .6s var(--ease) forwards}
.fxh-art .pt{fill:#50b1a3;opacity:.75}
.fxh-art .tick{stroke:#3c5fac;opacity:.14;stroke-width:1}
@media(max-width:860px){
.fxh-art{display:none}
}
.fxh-rail{background:radial-gradient(74% 150% at 100% 118%,rgba(60,95,172,.5),transparent 64%),linear-gradient(104deg,#243a7e 0,#264295 100%);position:relative}
.fxh-rail:before{background:linear-gradient(90deg,#3c5fac 0,#50b1a3 52%,#61d4c3 100%); content:"";height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0); transform-origin:left;animation:fxhThread 1.5s .35s var(--ease) forwards;z-index:2}
.fxh-rail:after{background:radial-gradient(48% 120% at 88% 100%,rgba(97,212,195,.22),transparent 70%); content:"";inset:0;pointer-events:none;position:absolute}
.fxh-rail>*{position:relative;z-index:1}
.fxh-sts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr))}
.fxh-st{padding:clamp(24px,2.8vw,34px) clamp(18px,2vw,26px) clamp(26px,3vw,38px) 0}

.fxh-st .n{color:#61d4c3;display:block;font:600 .6rem var(--mono);letter-spacing:.17em}
.fxh-st .g{display:block;height:auto;margin:15px 0 16px;width:72px}
.fxh-st b{color:#fff;display:block;font:900 clamp(.98rem,1.45vw,1.12rem) var(--head);letter-spacing:-.024em}
.fxh-st .d{color:var(--dk-mut);display:block;font-size:.85rem;line-height:1.45;margin-top:6px}
.fxh-g-tr{fill:none;stroke:hsla(0,0%,100%,.32);stroke-width:1.6}
.fxh-g{fill:none;stroke:#61d4c3;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2}
.fxh-g-f{fill:#61d4c3;stroke:none}
.fxh-g-b{fill:rgba(97,212,195,.6);stroke:none}
.fxh-g-b.hi{fill:#61d4c3}
.fxh-pulse{animation:fxhPulse 3s linear infinite;stroke:#fff;stroke-dasharray:14 86;stroke-width:2.6}
@media(max-width:620px){
.fxh-st{padding-bottom:20px;padding-top:20px}

}
@media (prefers-reduced-motion:reduce){
.fxh-rail:before{transform:scaleX(1);animation:none}
.fxh-pulse{animation:none;display:none}
.fxh-art .live{stroke-dashoffset:0;animation:none}
}
h1,h2,h3,h4, .h-display,.h-sec,.h-big,.h-sub,.fxh-h,.fxh-st b,.fx-mg b,.fx-cyc b,.fx-split b, .fx-out b,.fx-out .t,.fx-cost b,.fx-cal .t,.fx-track button .t,.fx-panels p, .pb-bill .hd b,.pb-bill .tot,.pb-q b,.vs-p h3,.vs-l b,.vs-foot b, .gv-sig b,.gv-gate b,.gv-out b,.gv-pil b,.ph-g h3,.ph-c b,.ch-h,.ch-g b, .cx-by b,.faq summary,.fx-ring .v,.story-outcome b,.story-name,.tlc b{letter-spacing:.01em;}
.h-display,.h-big,.fxh-h{line-height:calc(1em + 14px)}
.pb-mos,.pb-bill .hd i,.fxh-st .n,.fx-track button .s,.fx-here,.fx-cal .who, .fx-cal .w,.fx-loop,.ph-k,.ph-c .n,.ph-btm .k,.ph-track b,.fx-ring .k, .gv-gate .pill,.gv-env span,.gv-only,.fx-cyc .dot,.fx-cyc .tag,.fx-mg li:before{font-size:.75rem;}
.fx-out b,.pb-bill .tot,.fx-ring .v,.stat b,.h-display,.h-big,.fxh-h{line-height:calc(1em + 10px);}
.h-display,.h-big,.fxh-h{line-height:calc(1em + 14px)}
.fxh-from .now,.ch-note .o,span.o,.fx-note,.cx-by span{font-size:.75rem}
@media (max-width:860px){
.h-sec br,.h-display br,.h-big br,.h-sub br,.fxh-h br,.ph-btm .line br{display:none;}
}
{to{stroke-dashoffset:0}}}
{to{transform:scaleX(1)}}}
{from{stroke-dashoffset:14}to{stroke-dashoffset:-86}}}
