/* Fxtriangle Visual System v3 | 10 October 2026
   Loaded AFTER legacy, shared, and WordPress styles. Public pages only.
   Desktop first for meaningful editorial layout; responsive down to 320px.
   Does not change trading results, forms, calculators, ticker data or disclaimers. */
:root {
  --fxv-navy:#10263c;
  --fxv-navy-deep:#091c31;
  --fxv-teal:#087f79;
  --fxv-teal-dark:#006b66;
  --fxv-aqua:#d6f1e9;
  --fxv-ink:#162f42;
  --fxv-muted:#526a78;
  --fxv-soft:#f3f8fa;
  --fxv-border:#dce7eb;
  --fxv-shadow:0 17px 45px rgba(16,47,68,.085);
}
/* Baseline width safety: let grid descendants shrink, never let site itself scroll horizontally. */
html {scroll-padding-top:110px}
body.fx-modernized,body.fx-homepage,body.fxw-theme {background:#fbfdfe;color:var(--fxv-ink)}
body.fx-modernized main,body.fx-homepage main,body.fxw-theme main {min-width:0;max-width:100%}
body.fx-modernized main *,body.fx-homepage main *,body.fxw-theme main * {box-sizing:border-box}
body.fx-modernized main .row > *,body.fx-homepage main .row > *,body.fxw-theme main .row > *,body.fx-modernized main [class*=col-],body.fxw-theme main [class*=col-]{min-width:0}
body.fx-modernized main :is(p,h1,h2,h3,h4,h5,li,a),body.fxw-theme main :is(p,h1,h2,h3,h4,h5,li,a){overflow-wrap:break-word}
body.fx-modernized :is(.container,.container-xxl),body.fxw-theme :is(.container,.container-xxl){max-width:min(100%,1370px)}
/* Navigation: clean editorial treatment and functional touch targets */
.fx-site-header{background:rgba(255,255,255,.985)!important;border-bottom:1px solid #e1eaee!important;box-shadow:0 7px 29px rgba(16,47,68,.06)}
.fx-site-header .fx-menu .nav-link{color:#203849!important;font-weight:750;letter-spacing:0;font-size:.88rem}
.fx-site-header .fx-menu .nav-link:hover,.fx-site-header .fx-menu .nav-link.active{color:var(--fxv-teal-dark)!important}
.fx-dropdown-menu{border:1px solid #e0eaed!important;border-radius:15px!important;box-shadow:0 17px 40px rgba(10,39,55,.11)!important}
.fx-dropdown-menu .dropdown-item{white-space:normal;line-height:1.4}
.fx-members-link{background:var(--fxv-navy)!important;border-color:var(--fxv-navy)!important;color:#fff!important}
.fx-topline{background:var(--fxv-navy-deep)}
/* Standardised page headers with photographic overlay and much more readable titles */
body.fx-modernized [class*="page-header-"]{
  height:auto!important;min-height:220px!important;margin-bottom:18px!important;padding-block:45px!important;
  background-color:var(--fxv-navy-deep)!important;background-size:cover!important;background-position:center!important;background-attachment:scroll!important;
  background-blend-mode:normal!important;box-shadow:none!important;
}
body.fx-modernized [class*="page-header-"]::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,23,42,.94) 0%,rgba(7,23,42,.83) 45%,rgba(7,23,42,.50) 100%);z-index:0}
body.fx-modernized [class*="page-header-"]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 50%,rgba(21,166,152,.19),transparent 42%);z-index:0}
body.fx-modernized [class*="page-header-"]>.container{z-index:1;position:relative}
body.fx-modernized [class*="page-header-"] h1{font-size:clamp(1.95rem,3.35vw,3.35rem)!important;line-height:1.14!important;max-width:1050px;margin:0 0 13px!important;letter-spacing:-.045em!important;text-wrap:balance}
body.fx-modernized [class*="page-header-"] .breadcrumb{margin-bottom:0;font-size:.85rem}
body.fx-modernized [class*="page-header-"] .breadcrumb a{color:#ecfbff!important}
/* Dark split hero for broker detail and managed-account legacy headers */
body.fx-modernized main > .header.bg-primary{
  background:radial-gradient(circle at 88% 12%,rgba(51,159,153,.26),transparent 38%),linear-gradient(128deg,#0e2940,#17394d 70%,#124e56)!important;
  border-bottom:1px solid #2c5162;overflow:hidden;margin-bottom:20px!important;
}
body.fx-modernized main > .header.bg-primary .row.g-0 > div:first-child{padding:clamp(30px,4vw,72px)!important}
body.fx-modernized main > .header.bg-primary h1{font-size:clamp(1.8rem,3.1vw,3.35rem)!important;line-height:1.18!important;letter-spacing:-.045em!important;color:#fff!important;margin-bottom:clamp(22px,3vw,42px)!important;overflow-wrap:anywhere;text-wrap:balance}
body.fx-modernized main > .header.bg-primary h2,body.fx-modernized main > .header.bg-primary p,body.fx-modernized main > .header.bg-primary p a{color:#fff!important}
body.fx-modernized main > .header.bg-primary .border-start{border-left-color:rgba(196,236,235,.5)!important;padding-left:14px!important}
body.fx-modernized main > .header.bg-primary .row.g-4{row-gap:18px!important}
body.fx-modernized main > .header.bg-primary .row.g-4 h2{font-variant-numeric:tabular-nums;font-size:clamp(1.3rem,2vw,2.1rem)!important;overflow-wrap:anywhere}
body.fx-modernized main > .header.bg-primary .fx-video-frame{border-radius:18px!important;max-width:100%}
/* Unified section spacing, text hierarchy, and visual rhythm */
body.fx-modernized main > :is(.container-xxl,.container-custom,section.container-xxl){padding-inline:clamp(14px,2.25vw,30px)!important}
body.fx-modernized main > .container-xxl.py-5,body.fx-modernized main > section.container-xxl.py-5 {padding-top:clamp(42px,5vw,76px)!important;padding-bottom:clamp(42px,5vw,76px)!important}
body.fx-modernized main h2:not(.fx-count-block h2){font-size:clamp(1.55rem,2.6vw,2.6rem);line-height:1.22;letter-spacing:-.037em}
body.fx-modernized main h3{font-size:clamp(1.17rem,1.9vw,1.57rem);line-height:1.32;letter-spacing:-.03em}
body.fx-modernized main h4{font-size:clamp(1.03rem,1.45vw,1.23rem);line-height:1.33;letter-spacing:-.018em}
body.fx-modernized main p,body.fx-modernized main li{line-height:1.76}
body.fx-modernized main .text-black{color:var(--fxv-ink)!important}
/* Fresh cards: fix oversized nested legacy padding; consistent image/icon treatment */
body.fx-modernized main :is(.service-item,.team-item,.tool-card,.feature-item,.fxn-card,.appointment,.card){background:#fff!important;border:1px solid var(--fxv-border)!important;border-radius:20px!important;box-shadow:var(--fxv-shadow)!important;max-width:100%;min-width:0}
body.fx-modernized main .service-item{position:relative;overflow:hidden;padding:clamp(22px,2.35vw,35px)!important;isolation:isolate}
body.fx-modernized main .service-item::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,var(--fxv-teal),#a8d9da,transparent)}
body.fx-modernized main .service-item > .d-inline-flex:has(>i){width:58px!important;height:58px!important;background:var(--fxv-aqua)!important;border-radius:17px!important;flex-shrink:0}
body.fx-modernized main .service-item > .d-inline-flex i{color:var(--fxv-teal-dark)!important;font-size:1.38rem!important}
body.fx-modernized main .service-item p{color:var(--fxv-muted);font-size:.96rem;margin-bottom:12px!important}
body.fx-modernized main .team-item img{width:100%;height:auto;object-fit:contain}
body.fx-modernized main .bg-light:not(.fx-section-muted){background-color:#f2f8fa!important}
body.fx-modernized main .border.rounded.p-4{border:1px solid var(--fxv-border)!important;border-radius:16px!important;background:#fff;padding:clamp(18px,2vw,28px)!important;box-shadow:0 9px 29px rgba(16,47,68,.045)}
body.fx-modernized main :is(.service-item,.tool-card,.card,.fx-broker-logo):hover{border-color:#b7d4d4!important}
/* Related resources: easily scannable cards on every older service and company page */
body.fx-modernized main section[aria-label="Related resources"] .row > div,body.fx-modernized main section[aria-labelledby*="related"] .row > div{min-width:0}
body.fx-modernized main section[aria-label="Related resources"] .h-100,body.fx-modernized main section[aria-labelledby*="related"] .h-100{transition:transform .15s ease,border-color .15s ease}
body.fx-modernized main section[aria-label="Related resources"] .h-100:hover,body.fx-modernized main section[aria-labelledby*="related"] .h-100:hover{transform:translateY(-2px);border-color:#88c5bd!important}
/* Trading forms and calculator panels: stable height, consistent interactions, focus visible */
body.fx-modernized main .tool-card{overflow:hidden;height:100%;display:flex;flex-direction:column}
body.fx-modernized main .tool-body{padding:clamp(20px,2.5vw,35px)!important;min-width:0;flex:1}
body.fx-modernized main :is(.tool-card,.fx-form-section) h2{font-size:clamp(1.2rem,1.7vw,1.55rem)!important}
body.fx-modernized main :is(.form-control,.form-select,textarea){width:100%;max-width:100%;min-width:0;min-height:46px;border:1px solid #cbdce2;background:#fff;border-radius:11px!important;color:#1a3446}
body.fx-modernized main :is(.form-control,.form-select,textarea):focus{border-color:#219b96;box-shadow:0 0 0 3px rgba(24,143,136,.17)!important}
body.fx-modernized main :is(.form-label,label){font-weight:650;line-height:1.4}
body.fx-modernized main :is(.calculator-result,.formula-note){overflow-wrap:anywhere}
body.fx-modernized main :is(.calculator-result,.formula-note,.fx-form-section){border-radius:13px}
body.fx-modernized main .tool-nav{max-width:100%;overflow-x:auto;padding:0 0 5px}
body.fx-modernized main .tool-nav .btn{min-height:42px;white-space:normal}
body.fx-modernized main :is(.btn,.fx-button){min-height:42px;max-width:100%;white-space:normal;line-height:1.35}
/* RESPONSIVE TABLE SYSTEM: actual table remains intact, mobile users get horizontal scrolling.
   No forced wrapping of numerical cells or misalignment of table headers. */
body.fx-modernized .fxv-table-scroll,body.fx-modernized main .table-responsive,
body.fxw-theme .fxv-table-scroll,body.fxw-theme .table-responsive,
body.fx-modernized main .fx-table-frame{
  max-width:100%!important;width:100%;overflow-x:auto!important;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:#90b7bd #edf5f6;
  -webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
  border-radius:16px;border:1px solid #dce8eb;
}
.fxv-table-scroll:focus-visible{outline:3px solid #4eada2;outline-offset:2px}
body.fx-modernized main :is(.fxv-table-scroll,.table-responsive,.fx-table-frame) table,
body.fxw-theme main :is(.fxv-table-scroll,.table-responsive) table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:0!important;min-width:640px;table-layout:auto}
body.fx-modernized main table :is(th,td),body.fxw-theme main table :is(th,td){padding:14px 16px;vertical-align:middle;overflow-wrap:normal;white-space:normal;min-width:110px}
body.fx-modernized main table thead th,body.fxw-theme main table thead th{background:#142f43!important;color:#fff!important;font-size:.83rem!important;white-space:nowrap;font-weight:750}
body.fx-modernized main table tbody tr:nth-child(2n),body.fxw-theme main table tbody tr:nth-child(2n){background:#f2f7f8}
body.fx-modernized main table tbody td,body.fxw-theme main table tbody td{border-bottom:1px solid #e3edef}
body.fx-modernized main table tbody tr:hover,body.fxw-theme main table tbody tr:hover{background:#e9f4f2}
body.fx-modernized main table img{width:auto;max-width:150px;max-height:66px;object-fit:contain}
body.fx-modernized main .fx-table-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
body.fx-modernized main .fx-table-controls input{max-width:min(100%,370px)}
.fxv-scroll-hint{font-size:.77rem;color:#566c79;display:none;align-items:center;gap:7px;margin:6px 0 0}
.fxv-scroll-hint::before{content:'↔';background:#e3f3f1;color:#126d69;font-size:.95rem;line-height:1;padding:5px 8px;border-radius:7px}
/* Testimonials, FAQs, odd legacy panels */
body.fx-modernized main .accordion-item{border:1px solid #dce8ec!important;border-radius:13px!important;overflow:hidden;margin-bottom:11px}
body.fx-modernized main .accordion-button{font-size:.98rem;font-weight:700;padding:18px 22px;background:white;color:#163a4f}
body.fx-modernized main .accordion-button:not(.collapsed){background:#eaf6f4;color:#0e6863}
body.fx-modernized main .testimonial-item,body.fx-modernized main .testimonial-text{background:#f5fafb!important;border-radius:20px}
body.fx-modernized main img{max-width:100%;height:auto}
body.fx-modernized main iframe{max-width:100%}
body.fx-modernized main [style*="width: 1000px"],body.fx-modernized main [style*="width:1000px"]{max-width:100%!important}
/* Photo-led editorial strip for secondary pages with no imagery elsewhere. */
.fxv-showcase{padding:14px clamp(14px,2.2vw,30px) 38px;max-width:1370px;margin:auto}
.fxv-showcase-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);overflow:hidden;align-items:stretch;background:#0f293d;border-radius:24px;border:1px solid #254b59;min-height:255px;box-shadow:0 19px 49px rgba(15,42,60,.12)}
.fxv-showcase-content{padding:clamp(27px,4vw,60px);color:#ecf6f6;align-self:center}
.fxv-showcase-label{display:inline-flex;align-items:center;gap:8px;color:#86e0d4;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;margin-bottom:15px}
.fxv-showcase-label svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fxv-showcase h2{color:#fff!important;font-size:clamp(1.4rem,2.3vw,2.3rem)!important;line-height:1.23;letter-spacing:-.04em;margin-bottom:14px;max-width:620px}
.fxv-showcase p{color:#c8dee2!important;max-width:600px;margin:0!important;font-size:.97rem;line-height:1.72}
.fxv-showcase-photo{position:relative;overflow:hidden;margin:0;background:#1b4859}
.fxv-showcase-photo img{display:block;width:100%;height:100%!important;min-height:245px;object-fit:cover;object-position:center}
.fxv-showcase-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,41,61,.22),transparent)}
/* Blog, category pages and news cards retain distinct content, but use the same UI system. */
body.fxw-theme .fxw-site-content{min-width:0;width:100%;max-width:100%}
body.fxw-theme main :is(article,.fxw-post-card,.fxw-card){min-width:0;max-width:100%}
body.fxw-theme main :is(.fxw-card,.fxw-post-card,.fxw-post,.fxw-sidebar-widget){border:1px solid var(--fxv-border);border-radius:18px;box-shadow:0 12px 32px rgba(16,47,68,.06);background:#fff;overflow:hidden}
body.fxw-theme main img{height:auto;max-width:100%}
body.fxw-theme main :is(.fxw-hero,.fxw-page-hero){background:linear-gradient(120deg,#0e2a40,#145052)!important}
body.fxw-theme main :is(.fxw-hero,.fxw-page-hero) h1{color:#fff!important;font-size:clamp(1.9rem,3.8vw,3.7rem)!important}
body.fxw-theme main h2{letter-spacing:-.035em;line-height:1.27}
body.fx-modernized main .fxn-card{overflow:hidden;background:#fff!important}
body.fx-modernized main .fxn-card .fxn-card-visual img{height:220px;object-fit:cover;max-width:100%;transition:transform .3s}
body.fx-modernized main .fxn-card:hover .fxn-card-visual img{transform:scale(1.035)}
/* Media breakpoints: handle large tablet / tablet / phones including 320px */
@media (min-width:1200px){
  .fx-site-header .fx-menu{gap:0!important}
  .fx-site-header .fx-menu .nav-link{padding:15px clamp(7px,.85vw,13px)!important}
}
@media (max-width:1199.98px){
  .fx-site-header .fx-navbar{min-height:76px!important}
  .fx-site-header .fx-menu .nav-link{min-height:46px;padding:12px 16px!important}
  .fx-site-header .fx-dropdown-menu{max-width:100%;min-width:0;box-shadow:none!important}
  body.fx-modernized main > .header.bg-primary .row.g-0 > div:first-child{padding:32px!important}
}
@media(max-width:991.98px){
  .fxv-showcase-inner{grid-template-columns:minmax(0,1fr) 37%}
  .fxv-showcase-photo img{min-height:265px}
  body.fx-modernized main > .header.bg-primary .row.g-0 > div:last-child{width:100%;padding:15px 28px 30px}
  body.fx-modernized main > .header.bg-primary .fx-video-frame{max-width:680px;margin:0 auto}
  body.fx-modernized main :is(.container-custom,.container-xxl){padding-inline:20px!important}
}
@media(max-width:767.98px){
  body.fx-modernized [class*="page-header-"]{min-height:160px!important;padding:28px 0!important}
  body.fx-modernized [class*="page-header-"] h1{font-size:clamp(1.45rem,6.7vw,2.25rem)!important}
  .fxv-showcase{padding:4px 14px 25px}
  .fxv-showcase-inner{grid-template-columns:1fr;border-radius:18px}
  .fxv-showcase-content{padding:26px 25px 18px}
  .fxv-showcase-photo{max-height:210px}
  .fxv-showcase-photo img{height:210px!important;min-height:0}
  body.fx-modernized main > .header.bg-primary .row.g-0 > div:first-child{padding:25px 20px!important}
  body.fx-modernized main > .header.bg-primary h1{font-size:clamp(1.65rem,6.25vw,2.3rem)!important}
  body.fx-modernized main > .header.bg-primary .row.g-4{margin-inline:-8px}
  body.fx-modernized main > .header.bg-primary .row.g-4 > *{padding-inline:8px}
  body.fx-modernized main .container-custom{width:100%;max-width:100%;padding:10px 15px!important}
  body.fx-modernized main .container-custom .row{margin-inline:0}
  body.fx-modernized main .service-item{padding:23px!important}
  body.fx-modernized main .tool-body{padding:23px!important}
  .fxv-scroll-hint{display:flex}
  body.fx-modernized main :is(.fxv-table-scroll,.table-responsive,.fx-table-frame) table,
  body.fxw-theme main :is(.fxv-table-scroll,.table-responsive) table{min-width:650px}
  body.fx-modernized main .fx-table-controls{align-items:stretch}
  body.fx-modernized main .fx-table-controls > *{max-width:100%!important}
  .fx-topline-contact{display:none}
  body.fx-modernized main :is(.btn,.fx-button){overflow-wrap:anywhere}
}
@media(max-width:479.98px){
  body.fx-modernized main :is(.container-xxl,.container-custom,.container),body.fxw-theme main :is(.container-xxl,.container){padding-inline:14px!important}
  body.fx-modernized main h2{font-size:1.5rem!important}
  body.fx-modernized main .row.g-4{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
  body.fx-modernized main > .header.bg-primary .row.g-4 > *{width:100%}
  body.fx-modernized main .fx-table-controls{flex-direction:column}
  .fxv-showcase-content{padding:23px 20px}
  .fxv-showcase h2{font-size:1.47rem!important}
  .fx-navbar .fx-brand img{max-width:125px!important}
}
@media(prefers-reduced-motion:reduce){body.fx-modernized main .fxn-card img{transition:none!important}}
/* Market Insights publishing templates (distinct .fxn-page body class). */
body.fxn-page{background:#fbfdfe;color:var(--fxv-ink);min-width:0}
body.fxn-page main,body.fxn-page main *{box-sizing:border-box}
body.fxn-page main{min-width:0;max-width:100%}
body.fxn-page main .row > *{min-width:0}
body.fxn-page .fxn-hero{border-bottom:1px solid #244857;min-height:205px!important;padding:34px 0!important;background:linear-gradient(120deg,rgba(11,31,51,.96),rgba(3,88,85,.73)),url('/img/forex%20money%20management.jpg') center/cover no-repeat!important}
body.fxn-page .fxn-hero .container{padding-block:12px!important}
body.fxn-page .fxn-hero .display-4{font-size:clamp(1.9rem,3.4vw,3.45rem)!important;line-height:1.16!important}
body.fxn-page .fxn-card{background:#fff!important;border:1px solid var(--fxv-border)!important;border-radius:20px!important;box-shadow:var(--fxv-shadow)!important;overflow:hidden;min-width:0;padding-bottom:24px!important}
body.fxn-page .fxn-card .fxn-card-visual{margin:0 0 18px!important;max-width:100%;overflow:hidden}
body.fxn-page .fxn-card .fxn-card-visual img{display:block;max-width:100%;width:100%!important;height:auto!important;aspect-ratio:1.77;object-fit:cover;border-radius:0!important}
body.fxn-page .fxn-card h3{font:750 clamp(1.12rem,1.8vw,1.43rem)/1.37 'Manrope',sans-serif!important;overflow-wrap:anywhere}
body.fxn-page .fxn-card-source{color:#647785!important}
body.fxn-page .fxn-article{background:#fff;border:1px solid var(--fxv-border)!important;border-radius:20px!important;box-shadow:var(--fxv-shadow)!important;max-width:100%;min-width:0}
body.fxn-page .fxn-article :is(p,h1,h2,h3,a,li){overflow-wrap:anywhere}
body.fxn-page .fxn-article img{max-width:100%;height:auto}
body.fxn-page .fxn-sidebar{background:#f5f9fa!important;border:1px solid var(--fxv-border)!important;border-radius:17px!important;max-width:100%}
body.fxn-page .fxn-sidebar h3{font-size:1.12rem!important}
body.fxn-page .fxn-count,body.fxn-page .fxn-chip{border-radius:999px}
body.fxn-page .fxn-section-heading{font-size:clamp(1.55rem,2.5vw,2.5rem);line-height:1.2;letter-spacing:-.035em}
body.fxn-page :is(.table-responsive,.fxv-table-scroll){max-width:100%;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--fxv-border);border-radius:15px}
body.fxn-page .fxv-table-scroll table{min-width:640px;width:100%}
@media(max-width:767.98px){
  body.fxn-page .fxn-hero{min-height:155px!important;padding:24px 0!important}
  body.fxn-page .fxn-hero .display-4{font-size:clamp(1.6rem,7vw,2.15rem)!important}
  body.fxn-page .fxn-card{border-radius:16px!important}
  body.fxn-page .fxn-article{padding:clamp(18px,4vw,25px)!important}
  body.fxn-page .fxn-card>:not(figure){margin-inline:18px!important}
  body.fxn-page .fxn-card .fxn-card-visual img{aspect-ratio:1.75}
}
