/* CYBERNOX AI Home Hero v21
   Optical vertical-centering correction for Home Hero v20.
   Keeps the approved Hero/trust-rail height and centres the complete left
   content composition without changing the first-screen geometry. */

/* Large desktop: the previous pass sat slightly too low. Use the midpoint
   between the earlier and later positions: 144px above the eyebrow and 96px
   below the CTA area. The total reserve stays identical, so Hero height and the
   blue trust rail do not move. */
@media (min-width:1181px) and (min-height:821px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,78px) + 144px)!important;
    padding-bottom:96px!important;
  }

  html:root body main#main-content .home20-hero .home20-copy{
    gap:20px!important;
  }

  html:root body main#main-content .home20-hero .home20-headline{
    gap:14px!important;
  }

  html:root body main#main-content .home20-hero .home20-lead{
    line-height:1.54!important;
  }

  html:root body main#main-content .home20-hero .home20-actions{
    gap:20px!important;
  }
}

/* Short desktop and laptop displays: use the same proportional optical shift
   while keeping all copy, actions and the trust rail visible. */
@media (min-width:1181px) and (max-height:820px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,78px) + 70px)!important;
    padding-bottom:46px!important;
  }

  html:root body main#main-content .home20-hero .home20-copy{
    gap:11px!important;
  }

  html:root body main#main-content .home20-hero .home20-headline{
    gap:8px!important;
  }
}

/* Tablet: preserve the same visual centre with a smaller proportional shift. */
@media (min-width:821px) and (max-width:1180px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,72px) + 74px)!important;
    padding-bottom:54px!important;
  }

  html:root body main#main-content .home20-hero .home20-copy{
    gap:15px!important;
  }
}

/* Mobile and in-app browsers keep their separate compact geometry. The Hero
   may grow when browser chrome reduces the visible viewport, so nothing clips. */
@media (max-width:820px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,72px) + clamp(42px,6vh,58px))!important;
    padding-bottom:clamp(30px,5vh,46px)!important;
  }

  html:root body main#main-content .home20-hero .home20-copy{
    gap:clamp(14px,2.2vh,19px)!important;
  }

  html:root body main#main-content .home20-hero .home20-headline{
    gap:clamp(9px,1.5vh,12px)!important;
  }

  html:root body main#main-content .home20-hero .home20-lead{
    line-height:1.46!important;
  }

  html:root body main#main-content .home20-hero .home20-actions{
    margin-top:2px!important;
  }
}

@media (max-width:430px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,70px) + 40px)!important;
    padding-bottom:34px!important;
  }
}

@media (max-width:820px) and (max-height:700px){
  html:root body main#main-content .home20-hero .home20-shell{
    padding-top:calc(var(--cnx-header-h,64px) + 28px)!important;
    padding-bottom:22px!important;
  }

  html:root body main#main-content .home20-hero .home20-copy{
    gap:7px!important;
  }
}

/* -------------------------------------------------------------------------
   Mobile-first blue trust rail
   Attract / Communicate / Organize / Automate / Build stays a single compact
   row on every phone. It becomes a native touch carousel with a visible next
   item cue instead of stacking, clipping or compressing labels.              */

@media (max-width:820px){
  html:root body main#main-content .nox-home-v5>.n7-shift{
    position:relative!important;
    isolation:isolate!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--home20-rail-h,66px)!important;
    min-height:var(--home20-rail-h,66px)!important;
    max-height:var(--home20-rail-h,66px)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#0096ff!important;
    border-top:1px solid rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  /* Soft edge cue indicates that more stages continue horizontally. */
  html:root body main#main-content .nox-home-v5>.n7-shift::after{
    content:""!important;
    position:absolute!important;
    z-index:4!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    width:32px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(0,150,255,0),rgba(0,112,194,.42))!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding-inline:max(10px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:0!important;
    align-items:stretch!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:max(10px,env(safe-area-inset-left))!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track>div{
    box-sizing:border-box!important;
    flex:0 0 clamp(210px,46vw,290px)!important;
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 clamp(14px,3.6vw,20px)!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr) 22px!important;
    align-items:center!important;
    gap:10px!important;
    border-left:1px solid rgba(255,255,255,.24)!important;
    border-right:0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:normal!important;
    background:transparent!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track>div:last-child{
    border-right:1px solid rgba(255,255,255,.24)!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track small{
    min-width:0!important;
    margin:0!important;
    color:rgba(255,255,255,.70)!important;
    opacity:1!important;
    font:500 clamp(.45rem,1.75vw,.52rem)/1 "IBM Plex Mono",monospace!important;
    letter-spacing:.02em!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#fff!important;
    font-size:clamp(.78rem,3.2vw,.92rem)!important;
    font-weight:660!important;
    line-height:1.1!important;
    letter-spacing:-.015em!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track i{
    justify-self:end!important;
    margin:0!important;
    color:#fff!important;
    opacity:.64!important;
    font-size:1.05rem!important;
    line-height:1!important;
  }
}

/* Narrow phones: keep labels readable while still exposing part of the next
   stage, which makes the horizontal interaction obvious without instructions. */
@media (max-width:430px){
  html:root body main#main-content .n7-shift .n5-shift-track>div{
    flex-basis:clamp(205px,62vw,248px)!important;
    padding-inline:14px!important;
    grid-template-columns:26px minmax(0,1fr) 20px!important;
    gap:8px!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track span{
    font-size:clamp(.76rem,3.55vw,.88rem)!important;
  }
}

@media (max-width:360px){
  html:root body main#main-content .n7-shift .n5-shift-track>div{
    flex-basis:72vw!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track small{
    font-size:.44rem!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track span{
    font-size:.76rem!important;
  }
}

/* Landscape phones can reveal more of the five-stage sequence at once. */
@media (max-width:820px) and (orientation:landscape){
  html:root body main#main-content .n7-shift .n5-shift-track>div{
    flex-basis:clamp(200px,34vw,260px)!important;
  }
}

/* Compact tablets keep all five stages visible in one row without scrolling. */
@media (min-width:821px) and (max-width:1024px){
  html:root body main#main-content .n7-shift .n5-shift-track{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    overflow:hidden!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track>div{
    min-width:0!important;
    padding-inline:12px!important;
    grid-template-columns:24px minmax(0,1fr) 18px!important;
    gap:7px!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track small{
    font-size:.46rem!important;
  }

  html:root body main#main-content .n7-shift .n5-shift-track span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(.68rem,1.45vw,.82rem)!important;
  }
}