/* hero-shared.css: what hero options B and C (round 4) share, in the page's own dialect.
   Measured off the live hero (tools/probe-hero.mjs, 1588x705): proof pills Geist Mono 13/1.5 at 86% white on a
   4% fill with a 16% hairline and a 6px orange dot; the primary button Geist 15/500, 44px, orange + ink,
   hover #ff6e55 in 200ms, a 3% press. The page edge is 44px (20px on phones), the nav bar is 76px (56 on phones). */
#hero.hv{position:relative;height:auto!important;min-height:100vh;min-height:100svh;background:var(--bg);box-sizing:border-box;overflow:hidden;
  --hv-nav:76px;--hv-edge:44px}
html[data-hero-layout=compact] #hero.hv{--hv-nav:56px;--hv-edge:20px}

.hv .hv-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.hv .hv-badges li{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.86);font:400 13px/1.5 var(--font-mono)}
.hv .hv-badges li::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:#fa5539;flex:none}

.hv .hv-btn,.hv .hv-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;
  font:500 15px/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out,transform .12s ease-out}
.hv .hv-btn{border:1px solid transparent;background:#fa5539;color:#181b22}
.hv .hv-btn:hover{background:#ff6e55}
.hv .hv-btn-ghost{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);color:#fff}
.hv .hv-btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.hv .hv-btn:active,.hv .hv-btn-ghost:active{transform:scale(.97)}

/* "AI-first" never breaks at its hyphen (a phone split it into "AI-" / "first software.") */
.hv .hv-nw{white-space:nowrap}

/* hero.css hides #heroTitle until option A's decrypt effect marks it ready; these headlines are plain text */
.hv #heroTitle{visibility:visible}

/* the client logo marquee is the page's own (#logoBar, hero.css). With no hero.js on these pages nothing
   fades it in, and core.js's 20s failsafe must not pull it back into the flow. */
.hv #logoBar{opacity:1!important}
html.is-failsafe .hv #logoBar{position:absolute!important;margin-top:0}

/* rhythm: the page's 160px section gap, counted from the logo row (it sits 40px above the hero's bottom edge).
   Measured with tools/rhythm.mjs: 120 before this. Phones already land on the page's 96. */
@media (min-width:810px){ #hero.hv + .sx-e-solutions section#solutions{padding-top:calc(var(--gap) - 40px)!important} }