/* v6.9.351 — homepage visual QA pass from user feedback. */

/* About/value cards: give hover lift room inside the outer frame. */
#fueltek-introduction .fueltek-value-grid-v227{
  padding-top:10px!important;
  margin-top:-10px!important;
}
#fueltek-introduction .fueltek-value-grid-v227>article:hover{
  transform:translateY(-2px)!important;
}

/* Left image: stop cleanly before the vertical divider instead of visually touching it. */
#fueltek-introduction .fueltek-story-image-v227{
  width:calc(100% + 20px)!important;
  margin-left:-34px!important;
  margin-right:14px!important;
}
@media(max-width:1500px){
  #fueltek-introduction .fueltek-story-image-v227{
    width:calc(100% + 18px)!important;
    margin-left:-30px!important;
    margin-right:12px!important;
  }
}
@media(max-width:1180px){
  #fueltek-introduction .fueltek-story-image-v227{
    width:calc(100% + 60px)!important;
    margin-left:-30px!important;
    margin-right:-30px!important;
  }
}

/* Make the hand-off cue readable rather than looking like micro-copy. */
.fueltek-home-intro-next-v202{
  gap:12px!important;
  font-size:14px!important;
  letter-spacing:.11em!important;
  font-weight:850!important;
  color:#aab2aa!important;
}
.fueltek-home-intro-next-v202 i{
  font-size:21px!important;
  line-height:1!important;
}

/* Hero detail panel: visually align it with the product stage instead of riding high. */
@media(min-width:1051px){
  .hero#home .hero-feature-panel.showroom-v199{
    transform:translateY(24px)!important;
  }
}

/* Hero metrics: consistent, mathematically centred icon circles. */
.hero#home>.metrics .metric{
  gap:15px!important;
}
.hero#home>.metrics .metric i{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(243,179,36,.34)!important;
  border-radius:50%!important;
  background:rgba(243,179,36,.045)!important;
  color:var(--acid)!important;
  font-size:0!important;
  line-height:0!important;
  filter:drop-shadow(0 0 10px rgba(243,179,36,.16))!important;
}
.hero#home>.metrics .metric i svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Solutions: lower cards slightly and standardise icon geometry/sizing. */
@media(min-width:1181px){
  .solutions-section .solution-cards{
    margin-top:30px!important;
  }
}
.solutions-section .solution-icon{
  width:56px!important;
  height:56px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:17px!important;
  font-size:0!important;
  line-height:0!important;
}
.solutions-section .solution-icon svg{
  display:block!important;
  width:27px!important;
  height:27px!important;
  margin:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Hardware cards: remove the permanent featured/hover pose and lower the rail a touch. */
@media(min-width:1181px){
  .product-section .product-rail{
    transform:translateY(28px)!important;
  }
}
.product-section .product-card.featured{
  transform:none!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 44px rgba(243,179,36,.015),0 16px 40px rgba(0,0,0,.25)!important;
}
.product-section .product-card.featured::after{
  opacity:.8!important;
  transform:none!important;
}
.product-section .product-card.featured .model{
  transform:none!important;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))!important;
}
.product-section .product-card.featured .product-card-link{
  border-color:rgba(243,179,36,.24)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
.product-section .product-card.featured:hover{
  transform:translateY(-7px) rotateX(2deg)!important;
  border-color:rgba(243,179,36,.58)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.42),0 0 46px rgba(243,179,36,.12),inset 0 0 48px rgba(243,179,36,.05)!important;
}
.product-section .product-card.featured:hover .model{
  transform:translateY(-8px) rotateY(10deg) scale(1.03)!important;
}
.product-section .product-card.featured:hover .product-card-link{
  border-color:rgba(243,179,36,.6)!important;
  background:rgba(243,179,36,.12)!important;
  box-shadow:0 0 22px rgba(243,179,36,.12)!important;
}

/* FMO controls: centred arrow glyphs, compact single-line dots, centred info icon. */
.clean-shot-showcase .fmo-deck-arrow,
.mobile-stage .mobile-arrow{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
}
.clean-shot-showcase .fmo-deck-arrow::before,
.mobile-stage .mobile-arrow::before{
  content:""!important;
  display:block!important;
  width:11px!important;
  height:11px!important;
  border-top:2px solid currentColor!important;
  border-right:2px solid currentColor!important;
  transform:rotate(45deg)!important;
}
.clean-shot-showcase #fmoPrev::before,
.mobile-stage #mobilePrev::before{
  transform:rotate(-135deg)!important;
}
.context-info-trigger b{
  display:grid!important;
  place-items:center!important;
  padding:0 0 1px!important;
  margin:0!important;
  font-family:Inter,Arial,sans-serif!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
}
.fmo-shot-actions{
  min-width:245px!important;
}
.clean-shot-showcase .fmo-shot-dots,
.fmo-shot-dots{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:7px!important;
  padding-top:8px!important;
}
.clean-shot-showcase .fmo-shot-dots button,
.fmo-shot-dots button{
  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  min-height:7px!important;
}
.clean-shot-showcase .fmo-shot-dots button.active,
.fmo-shot-dots button.active{
  transform:scale(1.35)!important;
}

/* Mobile carousel: bring controls closer to the handset and keep dots compact. */
@media(min-width:821px){
  .mobile-stage .mobile-nav-arrows{
    left:50%!important;
    right:auto!important;
    width:min(560px,52vw)!important;
    inset:auto auto 43% 50%!important;
    transform:translateX(-50%)!important;
  }
}
.mobile-stage .mobile-dots{
  flex-wrap:nowrap!important;
  gap:7px!important;
}
.mobile-stage .mobile-dots button{
  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  min-height:7px!important;
}
.mobile-stage .mobile-dots button.active{
  transform:scale(1.35)!important;
}

/* Compliance logos: keep artwork clear of the persistent learn-more button. */
.compliance .comp-card{
  padding-bottom:62px!important;
}
.compliance .comp-logo{
  top:36%!important;
  max-height:76px!important;
}
.compliance .card-constructionline .comp-logo{
  width:48%!important;
  height:72px!important;
  top:35%!important;
}
.compliance .comp-info{
  bottom:16px!important;
}
.compliance .comp-info .read{
  padding:8px 12px!important;
  min-height:38px!important;
}
.compliance .comp-card:hover .comp-logo,
.compliance .comp-card:focus-within .comp-logo{
  top:40px!important;
}

/* FAQ CTA: compact button instead of stretching across the grid column. */
.faq-section .faq-intro .btn{
  justify-self:start!important;
  align-self:end!important;
  width:auto!important;
  min-width:150px!important;
  max-width:210px!important;
  min-height:42px!important;
  padding:11px 16px!important;
  justify-content:space-between!important;
}

@media(max-width:1180px){
  .solutions-section .solution-cards,
  .product-section .product-rail{margin-top:0!important;transform:none!important}
}
@media(max-width:760px){
  .fueltek-home-intro-next-v202{font-size:12px!important}
  .hero#home>.metrics .metric i{width:36px!important;height:36px!important;flex-basis:36px!important}
  .faq-section .faq-intro .btn{max-width:none!important}
}
