/* FXMM home · flow redesign (Oct 2026). Loaded after the compiled Tailwind CSS. */
:root{--fx-fade-r:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.01) 4%,rgba(0,0,0,.04) 8%,rgba(0,0,0,.09) 12%,rgba(0,0,0,.17) 16%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.41) 24%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.68) 32%,rgba(0,0,0,.8) 36%,rgba(0,0,0,.89) 40%,rgba(0,0,0,.95) 44%,rgba(0,0,0,.985) 48%,#000 52%);
--fx-fade-l:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.01) 4%,rgba(0,0,0,.04) 8%,rgba(0,0,0,.09) 12%,rgba(0,0,0,.17) 16%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.41) 24%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.68) 32%,rgba(0,0,0,.8) 36%,rgba(0,0,0,.89) 40%,rgba(0,0,0,.95) 44%,rgba(0,0,0,.985) 48%,#000 52%);
--fx-fade-up:linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.2) 18%,rgba(0,0,0,.38) 24%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.76) 36%,rgba(0,0,0,.9) 42%,rgba(0,0,0,.97) 48%,#000 54%)}

/* Photo bands: edge to edge, photo dissolves into the stone background */
.fx-band{position:relative;background:#EDEBE5;overflow:hidden;scroll-margin-top:76px}
.fx-band__in{position:relative;height:440px}
.fx-band__photo{position:absolute;top:0;bottom:0;left:44%;right:0;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--fx-fade-r);mask-image:var(--fx-fade-r)}
.fx-band--flip .fx-band__photo{left:0;right:44%;-webkit-mask-image:var(--fx-fade-l);mask-image:var(--fx-fade-l)}
.fx-band__txt{position:absolute;top:50%;transform:translateY(-50%);left:max(clamp(20px,6.667vw,96px),calc((100% - 1248px)/2));width:460px;max-width:calc(56% - 40px)}
.fx-band--flip .fx-band__txt{left:calc(50% + 72px);max-width:calc(50% - 96px)}
.fx-band__h{font-size:34px;line-height:42px;font-weight:600;letter-spacing:-.8px;margin:0 0 16px;color:#121821}
.fx-band__h b{color:#007DFF;font-weight:600}
.fx-band__p{color:#3F4754;font-size:17px;line-height:28px;font-weight:300;margin:0}
.fx-band__ch{display:flex;justify-content:center;gap:36px;margin-top:24px}
.fx-band__ch span{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:#121821}
@media (max-width:1023px){
  .fx-band__in{height:auto}
  .fx-band__photo,.fx-band--flip .fx-band__photo{position:relative;left:0;right:0;height:380px;-webkit-mask-image:var(--fx-fade-up);mask-image:var(--fx-fade-up)}
  .fx-band__txt,.fx-band--flip .fx-band__txt{position:relative;left:0;top:0;transform:none;width:auto;max-width:none;padding:4px clamp(20px,6.667vw,96px) 48px;margin-top:-24px}
}
@media (max-width:767px){
  .fx-band__photo,.fx-band--flip .fx-band__photo{height:300px}
  .fx-band__h{font-size:28px;line-height:34px}
  .fx-band__p{font-size:16px;line-height:26px}
}

/* Hero: the 2-minute video replaces the chart */
.fx-hero-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0D182E;box-shadow:0 20px 50px rgba(0,0,0,.35);scroll-margin-top:96px}
.fx-hero-video video{display:block;width:100%;height:100%;object-fit:cover;background:#0D182E}
.fx-hero-video__play{position:absolute;inset:0;border:0;padding:0;margin:0;background:transparent;cursor:pointer}
.fx-hero-video__btn{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:rgba(0,125,255,.95);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.fx-hero-video__btn:after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.fx-hero-video__play:hover .fx-hero-video__btn{transform:scale(1.06)}
.fx-hero-video__play:focus-visible{outline:3px solid #62A5F4;outline-offset:-3px}
.fx-hero-video__lbl{position:absolute;left:16px;bottom:14px;background:rgba(13,24,46,.85);color:#fff;font-size:13px;padding:6px 12px;border-radius:999px}
@media (max-width:767px){.fx-hero-video__btn{width:60px;height:60px;margin:-30px 0 0 -30px}.fx-hero-video__btn:after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px;margin-left:5px}}

/* Less vertical space, nothing removed */
.fx-t-hero{padding-top:clamp(40px,4.2vw,60px)!important}
.fx-t1{padding-top:clamp(40px,5.6vw,80px)!important;padding-bottom:clamp(40px,5.6vw,80px)!important}
.fx-t2{padding-top:clamp(44px,4.8vw,69px)!important;padding-bottom:clamp(44px,4.8vw,69px)!important}
.fx-t3{padding-top:clamp(40px,4.7vw,69px)!important}
.fx-t1>.max-w-page,.fx-t2>.max-w-page{row-gap:42px!important}
@media (max-width:767px){.fx-t1>.max-w-page,.fx-t2>.max-w-page{row-gap:30px!important}}
@media (max-width:1023px){
  #trust .grid{row-gap:18px!important;padding-top:22px!important}
  #trust .grid>div{row-gap:10px!important}
  /* The Retail Mistake: show the 20/30 pip card first on small screens */
  .fx-mis-card{order:-1}
}