/* TradingRoad V10 inner pages. Reuses V10 palette, Outfit, radii, shadows and CTA styles. */
body.tr-inner-page{margin:0;background:#f6f7fc;color:#0a1240;font-family:'Outfit',Arial,sans-serif}
.tr-inner-page *, .tr-inner-page *::before,.tr-inner-page *::after{box-sizing:border-box}
.tr-inner-page .tr-wrap{max-width:1240px;width:calc(100% - 64px);margin-inline:auto}
.tr-inner-page :is(a,button,summary){-webkit-tap-highlight-color:transparent}
.tr-inner-page a{text-decoration:none}
.tr-inner-page a:focus-visible,.tr-inner-page button:focus-visible,.tr-inner-page summary:focus-visible{outline:3px solid #FEC901;outline-offset:3px}
.tr-inner-page .tr-skip{position:absolute;top:-100px;left:12px;z-index:1000;background:white;padding:12px}.tr-skip:focus{top:12px}
.tr-risk-banner{background:#080a30;color:#dfe4ff;position:sticky;top:0;z-index:150;border-bottom:1px solid #2b305d;font:400 11px/1.5 Outfit,Arial,sans-serif;box-shadow:0 2px 14px #0101234d}
.tr-risk-banner .tr-wrap{padding:9px 0;text-align:center}.tr-risk-banner a{color:#FEC901;font-weight:700;text-decoration:underline}
.tr-global-header{background:#01012E;position:sticky;top:0;z-index:140;border-bottom:1px solid #1c2253}
.tr-header-row{height:86px;display:flex;align-items:center;gap:30px}
.tr-global-header .tr-brand{display:inline-flex;align-items:center;flex-shrink:0;color:white;max-width:190px}
.tr-global-header .tr-brand img{max-width:170px;height:auto}
.tr-global-nav{display:flex;align-items:center;gap:14px;margin:auto}
.tr-menu{position:relative;color:#dbe0fd}
.tr-menu summary{list-style:none;cursor:pointer;font-weight:600;font-size:13px;padding:17px 10px;border-radius:12px}
.tr-menu summary::-webkit-details-marker{display:none}.tr-menu summary>span{color:#a6b0ed;margin-left:7px}
.tr-menu summary:hover,.tr-menu[open] summary{background:#11154b;color:#fff}
.tr-dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:245px;padding:9px;border:1px solid #292d6d;border-radius:16px;background:#0d1040;box-shadow:0 18px 40px #0009;display:grid;gap:3px}
.tr-dropdown a{font-size:12px;padding:11px 13px;color:#dfe3ff;border-radius:9px}
.tr-dropdown a:hover{color:#fff;background:#232768}
.tr-header-actions{display:flex;align-items:center;gap:15px}
.tr-header-actions .tr-lang,.tr-login{color:#d8dcf3;font-size:12px;font-weight:650;white-space:nowrap}
.tr-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:15px 23px;border-radius:100px;background:#FEC901;color:#050530!important;font-size:13px;font-weight:800;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease}
.tr-action-btn:hover{transform:translateY(-2px);box-shadow:0 12px 23px #fec90134}
.tr-global-header .tr-action-btn{padding:13px 18px;font-size:12px}
.tr-mobile-menu{display:none}
.tr-page-hero{position:relative;isolation:isolate;overflow:hidden;background:#01012E;color:white;padding:103px 0 124px}
.tr-page-hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-1;background:linear-gradient(0deg,#344db764,transparent)}
.tr-hero-glow{pointer-events:none;position:absolute;inset:20% -30% auto 65%;width:65%;height:520px;z-index:-1;background:radial-gradient(ellipse,#3246cf77,transparent 66%);filter:blur(35px)}
.tr-page-hero-inner{max-width:1050px!important;margin-inline:auto}
.tr-kicker{display:inline-flex;gap:9px;align-items:center;letter-spacing:.12em;text-transform:uppercase;color:#b5c3ff;font-size:11px;font-weight:700;margin-bottom:24px}
.tr-yellow-dot{width:7px;height:7px;background:#FEC901;border-radius:50%}
.tr-page-hero h1{max-width:900px;font-size:clamp(44px,5.6vw,78px);font-weight:700;line-height:1.09;letter-spacing:-.048em;margin:0 0 24px}
.tr-page-intro{max-width:690px;color:#c8d0fb;font-size:clamp(15px,1.35vw,18px);line-height:1.82;margin:0 0 32px}
.tr-page-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.tr-btn-outline{padding:14px 22px;border:1px solid #8f98dd;border-radius:100px;color:#e6e9fc;font-size:13px;font-weight:700}
.tr-btn-outline:hover{background:#23276b}
.tr-page-content{background:#f6f7fc}
/* Continue the royal-blue hero fade seamlessly into the light content background. */
body.tr-inner-page .tr-page-content {
  background:linear-gradient(to bottom,#8A9DE9 0,#CCD6FA 72px,#F6F7FC 155px);
}
.tr-page-content .tr-wrap{max-width:1180px}
.tr-section{padding:86px 0}
.tr-section:nth-child(even){background:white}
.tr-section-heading{font-size:clamp(27px,3.1vw,42px);line-height:1.16;letter-spacing:-.038em;max-width:800px;margin:0 0 28px;color:#080d39}
.tr-section-eyebrow{color:#3c50a5;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em;display:block;margin-bottom:17px}
.tr-section h3{font-size:20px;letter-spacing:-.025em;margin:0 0 13px}
.tr-section p,.tr-section li,.tr-section td{font-size:15px;line-height:1.85;color:#5a6182}
.tr-section p{margin:0 0 18px;max-width:930px}
.tr-section a:not(.tr-action-btn){color:#0b2993;text-decoration:underline;text-underline-offset:2px}
.tr-section ul,.tr-section ol{padding-left:25px;margin:14px 0 23px}
.tr-section li+li{margin-top:9px}
.tr-section :is(ul,ol) li::marker{color:#203eb7}
.tr-section strong{color:#080d39}
.tr-section .tr-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:26px 0}
.tr-section .tr-card-grid>*{border:1px solid #e7eaf5;border-radius:20px;background:#fff;padding:25px;box-shadow:0 14px 32px #1014540c;min-width:0}
.tr-card-grid .tr-card-title{font-weight:700;color:#080d39;font-size:18px;margin-bottom:11px}
.tr-card-grid p{font-size:13px}
.tr-section .tr-table-scroll{overflow-x:auto;max-width:100%;border:1px solid #e2e5f1;border-radius:16px;background:white;box-shadow:0 10px 28px #1014540a}
.tr-section table{border-collapse:collapse;width:100%;min-width:520px}
.tr-section th{background:#0b104b;color:white;text-align:left;font-size:12px;font-weight:750;white-space:normal;padding:17px 15px}
.tr-section td{border-bottom:1px solid #edf0fa;padding:16px 15px;font-size:13px;vertical-align:top}
.tr-section tr:last-child td{border-bottom:none}
.tr-section tr:nth-child(2n) td{background:#f8f9fe}
.tr-section .tr-faq{border:1px solid #e2e6f6;border-radius:18px;background:#fff;overflow:hidden}
.tr-faq details{border-bottom:1px solid #e7eaf6;padding:18px 22px}
.tr-faq details:last-child{border-bottom:0}
.tr-faq summary{cursor:pointer;font-weight:700;color:#080c3a;font-size:15px;line-height:1.5}
.tr-faq details p{margin:12px 0 0;font-size:14px}
.tr-section .tr-text-panel{border-left:3px solid #FEC901;padding:24px 26px;background:#edf0fd;border-radius:0 16px 16px 0}
.tr-section .tr-confirm{background:#fff3c7;border:1px dashed #dcaa13;color:#57431a;border-radius:5px;padding:1px 5px;font-family:Outfit,sans-serif;font-size:.96em}
.tr-section .tr-cta-band{border-radius:24px;background:#080c4c;color:white;padding:48px}
.tr-cta-band h2{color:white;font-size:clamp(27px,3vw,42px);letter-spacing:-.035em}
.tr-cta-band p{color:#c7d0fb}
.tr-cta-band .tr-page-actions{margin-top:26px}
.tr-global-footer{background:#000042;color:#e8ebff;padding:80px 0 28px}
.tr-global-footer .tr-footer-top{display:grid;grid-template-columns:1.8fr repeat(5,minmax(0,1fr));gap:28px}
.tr-footer-brand p{font-size:14px;line-height:1.75;color:#aeb6e7;max-width:245px;margin-top:22px}
.tr-footer-brand img{max-width:180px;height:auto}
.tr-footer-col{display:flex;flex-direction:column;gap:13px}
.tr-footer-col h3{color:white;font-size:13px;font-weight:750;margin-bottom:8px}
.tr-footer-col a{color:#c1c8eb;font-size:12px;line-height:1.5}
.tr-footer-col a:hover{color:#fec901}
.tr-legal-block{border-top:1px solid #343769;margin-top:65px;padding:26px 0 14px}
.tr-legal-block p{font-size:11px;color:#b1bae3;line-height:1.7;margin:0 0 12px}
.tr-footer-bottom{display:flex;justify-content:space-between;color:#8995c2;font-size:11px;padding-top:18px;border-top:1px solid #343769}
.tr-footer-bottom a{color:#e8eaff}
.tr-whatsapp-float{position:fixed;right:23px;bottom:25px;z-index:120;background:#FEC901;color:#080c35;border:0;border-radius:50px;padding:15px 19px;font:800 12px Outfit,sans-serif;box-shadow:0 9px 35px #0003;cursor:pointer}
.tr-whatsapp-float span{padding-left:12px}
.tr-cookie-banner{position:fixed;bottom:18px;left:20px;right:20px;z-index:240;max-width:920px;margin:auto;box-shadow:0 13px 40px #02023842;background:white;border:1px solid #e5e7f5;border-radius:18px;padding:21px 25px;display:flex;align-items:center;gap:20px}
.tr-cookie-banner[hidden]{display:none}
.tr-cookie-banner p{font-size:13px;line-height:1.5;margin:0;color:#333b67;flex:1}
.tr-cookie-banner div{display:flex;gap:8px;flex-wrap:wrap}
.tr-cookie-banner button{border:1px solid #d9dcea;border-radius:100px;background:#f4f5fd;color:#121a54;padding:11px 15px;font:700 12px Outfit,sans-serif;cursor:pointer}
.tr-cookie-banner button:first-child{background:#000080;color:white;border-color:#000080}
.tr-integration-dialog{max-width:450px;border:0;border-radius:22px;box-shadow:0 20px 90px #0008;padding:30px;font-family:Outfit,Arial,sans-serif}
.tr-integration-dialog::backdrop{background:#01012eb9}
.tr-integration-dialog h2{color:#01012e;font-size:26px}
.tr-integration-dialog p{color:#555e7f;line-height:1.7;font-size:14px}
.tr-dialog-close{float:right;background:transparent;border:0;font-size:25px;cursor:pointer}
@media(max-width:1100px){.tr-global-nav{gap:3px}.tr-menu summary{font-size:12px}.tr-global-header .tr-action-btn{padding:12px}.tr-footer-top{grid-template-columns:repeat(3,1fr)!important}.tr-header-row{gap:15px}}
@media(max-width:900px){.tr-inner-page .tr-wrap{width:calc(100% - 42px)}.tr-global-nav,.tr-header-actions{display:none}.tr-mobile-menu{display:block;margin-left:auto;color:white;position:relative}.tr-mobile-menu summary{list-style:none;cursor:pointer;border:1px solid #4d568d;border-radius:10px;padding:8px 14px;font-size:23px}.tr-mobile-inner{position:absolute;right:0;top:calc(100% + 15px);width:min(340px,85vw);height:min(72vh,600px);overflow:auto;display:flex;flex-direction:column;padding:22px;background:#0a0d39;box-shadow:0 16px 50px #0009;border-radius:16px;gap:12px}.tr-mobile-inner strong{color:#fec901;font-size:13px;margin-top:8px}.tr-mobile-inner a{font-size:14px;color:#e2e7ff;padding:6px 0}.tr-page-hero{padding:84px 0 98px}.tr-section{padding:65px 0}.tr-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){.tr-inner-page .tr-wrap{width:calc(100% - 34px)}.tr-risk-banner{font-size:9px}.tr-risk-banner .tr-wrap{padding:7px 0}.tr-header-row{height:70px}.tr-global-header .tr-brand img{max-width:150px}.tr-page-hero{padding:69px 0 75px}.tr-page-hero h1{font-size:clamp(36px,10.3vw,48px);line-height:1.12;letter-spacing:-.035em}.tr-page-intro{font-size:14px}.tr-page-actions{align-items:stretch}.tr-page-actions a{min-height:45px}.tr-section{padding:52px 0}.tr-section .tr-card-grid{grid-template-columns:1fr!important}.tr-section .tr-card-grid>*{padding:21px}.tr-section .tr-cta-band{padding:28px}.tr-global-footer{padding-top:55px}.tr-global-footer .tr-footer-top{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:29px}.tr-footer-brand{grid-column:span 2}.tr-footer-bottom{gap:12px;flex-wrap:wrap}.tr-cookie-banner{flex-direction:column;align-items:stretch;bottom:9px;left:9px;right:9px;padding:16px}.tr-whatsapp-float{font-size:11px;right:12px;bottom:15px;padding:14px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Maintain legal document readability without changing imported legal wording. */
.tr-template-legal .tr-legal-body{max-width:100%;font-family:'Outfit',Arial,sans-serif!important;color:#152047!important;overflow-wrap:anywhere}
.tr-template-legal .tr-legal-body :is(p,li,span,strong,em,a,div){font-family:'Outfit',Arial,sans-serif!important;color:#283354!important;font-size:inherit}
.tr-template-legal .tr-legal-body :is(h2,h3,h4){font-family:'Outfit',Arial,sans-serif!important;color:#000053!important;font-size:clamp(19px,2vw,28px)!important;line-height:1.4!important;margin:26px 0 12px}
.tr-template-legal .tr-legal-body p{font-size:15px!important;line-height:1.85!important;margin:0 0 18px!important;max-width:none}
.tr-template-legal .tr-legal-body a{color:#000080!important;text-decoration:underline}
.tr-template-legal .tr-legal-body :is(ul,ol){padding-left:24px}
.tr-template-legal .tr-legal-body li{font-size:15px!important;line-height:1.8!important}
.tr-inner-page .tr-market-index{font-size:12px;font-weight:800;letter-spacing:.12em;color:#3442a0;margin-bottom:12px}
.tr-inner-page .tr-market-link-card{display:block;color:#030d3d!important;text-decoration:none!important;transition:transform .2s,box-shadow .2s;cursor:pointer}
.tr-inner-page .tr-market-link-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #06094a19}
.tr-inner-page .tr-market-link-card strong{color:#000080!important}
.tr-inner-page .tr-risk-line{margin-top:24px!important;border-left:3px solid #e7bb25;padding:15px 21px;background:#f0f2fb;border-radius:0 10px 10px 0}

/* Inner page hero: same composition geometry as the approved V10 video hero.
   The master homepage and its video remain untouched. */
body.tr-inner-page .tr-page-hero {
  --tr-inner-hero-h:clamp(800px,calc(100svh - 96px),934px);
  --tr-inner-lift:calc(934px - var(--tr-inner-hero-h));
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  min-height:var(--tr-inner-hero-h);
  padding:max(122px,calc(190px - var(--tr-inner-lift) * .6)) 0 120px;
  background:#01012E;
}
body.tr-inner-page .tr-page-hero::before {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  transform:translateY(-16px);
  top:calc(56px - var(--tr-inner-lift) * .5);
  right:max(0px,calc((100vw - 1440px) / 3.4));
  left:auto;
  width:min(92%,1500px);
  height:auto;
  aspect-ratio:16/9;
  background-image:
    linear-gradient(90deg,#01012E 0%,rgba(1,1,46,.7) 18%,transparent 40%),
    linear-gradient(270deg,#01012E 0%,rgba(1,1,46,.55) 7%,transparent 18%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-inner-hero-candlesticks.webp");
  background-size:cover,cover,cover;
  background-position:center,center,100% 50%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 72%,transparent 100%);
}
body.tr-inner-page .tr-page-hero::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:auto 0 0;
  height:235px;
  background:linear-gradient(to bottom,
    rgba(3,12,68,0) 0%,
    rgba(18,37,121,.10) 16%,
    rgba(36,62,166,.34) 42%,
    rgba(52,83,190,.68) 65%,
    rgba(91,117,215,.90) 83%,
    #8A9DE9 100%);
  opacity:1;
}
body.tr-inner-page .tr-page-hero-inner {
  position:relative;
  z-index:2;
}
body.tr-inner-page .tr-hero-glow {
  z-index:0;
  opacity:.12;
}
@media(max-width:1000px) {
  body.tr-inner-page .tr-page-hero {
    min-height:700px;
    padding:137px 0 48px;
  }
  body.tr-inner-page .tr-page-hero::before {
    top:56px;
    right:0;
  }
}
@media(max-width:760px) {
  body.tr-inner-page .tr-page-hero {
    min-height:clamp(600px,75svh,690px);
    padding:112px 0 42px;
  }
  body.tr-inner-page .tr-page-hero::before {
    top:205px;
    left:0;
    right:0;
    width:100%;
    height:450px;
    aspect-ratio:auto;
    background-image:
      linear-gradient(90deg,rgba(1,1,46,.75),rgba(1,1,46,.15) 45%,transparent 70%),
      url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-inner-hero-candlesticks.webp");
    background-size:cover,cover;
    background-position:center,86% 50%;
  }
  body.tr-inner-page .tr-page-hero::after {
    height:240px;
  }
}
@media(max-width:500px) {
  body.tr-inner-page .tr-page-hero {
    min-height:clamp(590px,76svh,650px);
    padding:108px 0 36px;
  }
  body.tr-inner-page .tr-page-hero::before {
    top:225px;
    height:430px;
  }
}

/* Desktop inner-page hero ends at the user's red reference line (~635px).
   Keep the existing text position and background image framing unchanged. */
@media (min-width:1001px) {
  body.tr-inner-page .tr-page-hero {
    min-height:635px;
    padding-bottom:40px;
  }
}

/* Mobile inner-page hero: stack primary and demo CTAs vertically. */
@media(max-width:760px) {
  body.tr-inner-page .tr-page-hero .tr-page-actions {
    flex-direction:column;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:12px;
  }
  body.tr-inner-page .tr-page-hero .tr-page-actions > a {
    display:inline-flex;
    width:min(100%,220px);
    min-height:46px;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
}

/* Mobile hero: long blue fade, matching desktop softness without reaching section headings.
   Only gradient paint changes. Do not reposition or resize the candlestick image. */
@media(max-width:760px) {
  body.tr-inner-page .tr-page-hero::after {
    height:min(335px,52%);
    background:linear-gradient(to bottom,
      rgba(3,12,68,0) 0%,
      rgba(12,25,100,.06) 17%,
      rgba(28,49,145,.26) 37%,
      rgba(59,84,185,.58) 57%,
      rgba(111,139,221,.82) 76%,
      rgba(148,170,233,.94) 93%,
      #A5B8F1 100%);
  }
  body.tr-inner-page .tr-page-content {
    background:linear-gradient(to bottom,
      #A5B8F1 0px,
      #CDD8F7 28px,
      #F6F7FC 62px);
  }
}

/* Short single-line hero descriptions on English inner pages (mobile only). */
@media(max-width:760px) {
  body.tr-inner-page .tr-page-hero .tr-page-intro {
    white-space:nowrap;
    max-width:100%;
    font-size:clamp(11px,3.3vw,14px);
    line-height:1.55;
    letter-spacing:-.012em;
  }
}

/* Market detail pages: seamless transition over alternating section backgrounds. */
/* Forex, Gold, Indices, Shares, Oil, Commodities.
   The original hero asset, placement, section heights and content are untouched.
   This fade overlays only the first part of the content background, under text. */
@media (min-width:761px) {
  body.tr-inner-page.tr-template-market .tr-page-content {
    position:relative;
    isolation:isolate;
  }
  body.tr-inner-page.tr-template-market .tr-page-content::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:255px;
    pointer-events:none;
    z-index:1;
    /* Match the existing hero-to-content gradient, then feather into white. */
    background:linear-gradient(to bottom,
      #8A9DE9 0px,
      #CCD6FA 72px,
      #F6F7FC 155px,
      rgba(246,247,252,.96) 190px,
      rgba(246,247,252,.56) 226px,
      rgba(246,247,252,0) 255px);
  }
  body.tr-inner-page.tr-template-market .tr-page-content .tr-section > .tr-wrap {
    position:relative;
    z-index:2;
  }
}

/* Market detail mobile seam protection, matching the approved mobile fade. */
@media (max-width:760px) {
  body.tr-inner-page.tr-template-market .tr-page-content {
    position:relative;
    isolation:isolate;
  }
  body.tr-inner-page.tr-template-market .tr-page-content::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:145px;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom,
      #A5B8F1 0px,
      #CDD8F7 28px,
      #F6F7FC 62px,
      rgba(246,247,252,.94) 90px,
      rgba(246,247,252,0) 145px);
  }
  body.tr-inner-page.tr-template-market .tr-page-content .tr-section > .tr-wrap {
    position:relative;
    z-index:2;
  }
}


/* V10 exact shared-container hero alignment | 2026-10-29 */
/* Match the actual .container used by the unified logo/navigation at every breakpoint.
   Only the text/CTA container moves; hero artwork, height and typography stay unchanged. */
html body.tr-inner-page .tr-page-hero > .tr-wrap.tr-page-hero-inner {
  max-width:1240px !important;
  width:min(1240px, calc(100% - 84px)) !important;
  margin-inline:auto !important;
}
@media(max-width:980px){
  html body.tr-inner-page .tr-page-hero > .tr-wrap.tr-page-hero-inner {
    width:calc(100% - 56px) !important;
  }
}
@media(max-width:760px){
  html body.tr-inner-page .tr-page-hero > .tr-wrap.tr-page-hero-inner {
    width:calc(100% - 40px) !important;
  }
}
@media(max-width:480px){
  html body.tr-inner-page .tr-page-hero > .tr-wrap.tr-page-hero-inner {
    width:calc(100% - 34px) !important;
  }
}
