/* =============================================================
   STARTRADER — Landing page styles
   Font: Plus Jakarta Sans (self-hosted)
   ============================================================= */
/* ---------- Design tokens ---------- */
:root{
  --blue:#0047BB;
  --blue-700:#002EA2;
  --blue-800:#001489;
  --blue-bright:#0348CD;
  --blue-soft:#1F5DC3;
  --green:#10B981;
  --red:#EF4444;

  --ink:#0E1524;
  --ink-soft:#54607140;
  --text:#101623;
  --text-soft:#5A6472;
  --text-mute:#8A93A2;

  --slate:#1C1F2A;

  --bg-light:#F4F7FA;
  --bg-light-2:#F8FAFC;
  --card:#FFFFFF;
  --line:#E7ECF2;

  --hero:#05070E;
  --navy:#00102D;
  --navy-2:#000B20;
  --near-black:#04060B;
  --dark-card:#0E1017;
  --dark-line:rgba(255,255,255,.09);

  --maxw:1200px;
  --gutter:24px;
  --nav-h:70px;
  /* full height of the sticky chrome (disclaimer topbar + nav) */
  --chrome-h:calc(var(--topbar-h,44px) + var(--nav-h));
  --chrome-gap:14px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 2px 8px rgba(16,30,54,.06);
  --shadow:0 18px 44px -20px rgba(16,30,54,.22);
  --shadow-blue:0 16px 40px -12px rgba(0,71,187,.5);

  --font:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  color:var(--text);
  background:#05070E;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4,h5{line-height:1.1;letter-spacing:-.02em;font-weight:700;text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:12px;top:12px}
/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:96px 0}
.head{margin-bottom:56px}
.head.center{text-align:center;max-width:820px;margin-inline:auto}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.eyebrow-blue{color:#93b6ff}
.h2{font-size:clamp(26px,4.4vw,44px);color:var(--text);font-weight:700;line-height:1.12}
.h2-light{color:#fff}
.h2.xl{font-size:clamp(26px,4.4vw,44px)}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:14px;line-height:1;white-space:nowrap;
  padding:14px 24px;border-radius:70px;color:#fff;cursor:pointer;
  background:var(--blue);border:none;
  transition:background .18s ease;
}
.btn .ico{width:17px;height:17px}
.btn:hover{background:var(--blue-700)}
.btn:active{background:var(--blue-800)}
/* CTA sits on a dark broker image — keep the primary blue button */
.cta-banner .btn{background:var(--blue-bright);color:#fff}
.cta-banner .btn:hover{background:var(--blue)}
/* the secondary action is a plain white button — .cta-banner .btn outranks
   .btn-ghost on specificity, so it has to be restated here */
.cta-banner .btn-ghost{background:#fff;color:var(--text)}
.cta-banner .btn-ghost:hover{background:#eaf0fa}
.btn-lg{padding:16px 30px;font-size:15px}
.btn-sm{padding:12px 20px}
.btn-block{width:100%;padding:15px}
.btn-navy{
  background:linear-gradient(180deg,#0b1e5c,#061436);border-color:rgba(255,255,255,.25);
}
.btn-navy:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
/* ---------- Topbar ---------- */
.topbar{background:var(--slate);color:#c4c9d4;font-size:12.5px;position:sticky;top:0;z-index:901}
.topbar .container{padding-block:13px}
.topbar p{text-align:center;line-height:1.4}
.topbar strong{color:#eef1f6;font-weight:600}
/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:calc(var(--topbar-h,44px) - 1px);z-index:900;
  background:transparent;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header.scrolled{background:rgba(6,9,20,.95);box-shadow:0 1px 0 rgba(255,255,255,.06)}
/* pages that open on a light band (the article masthead) need the solid header
   from the start — the nav is white and would sit on near-white */
body.light-top .site-header{background:rgba(6,9,20,.95);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;gap:34px;padding-block:16px;position:relative}
.brand img{height:34px;width:auto}
.nav-brandwrap{display:flex;align-items:center;gap:16px}
.hp-divider{width:1px;height:22px;background:rgba(255,255,255,.16);flex:none}
.header-partners{display:flex;align-items:center;gap:16px}
.hp-logo{width:auto;display:block;opacity:.95;transition:opacity .25s}
.hp-logo:hover{opacity:1}
.hp-nba{height:20px}
.hp-porsche{height:20px}
.nav-menu{display:flex;align-items:center;gap:6px;margin-right:auto}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;color:#dfe4ee;font-size:14.5px;font-weight:500;
  padding:9px 12px;border-radius:9px;transition:color .25s,background .25s;
}
.nav-link .caret{width:15px;height:15px;transition:transform .3s var(--ease)}
.nav-link:hover{color:#fff}
.nav-item.has-drop:hover .nav-link,.nav-item.has-drop:focus-within .nav-link{color:#fff}
.nav-item.has-drop:hover .caret,.nav-item.has-drop:focus-within .caret{transform:rotate(180deg)}
/* Mega menu (glassmorphism) */
.nav-item.has-mega{position:static}
.mega{
  position:absolute;top:calc(100% + 12px);left:0;
  max-width:calc(100vw - 40px);
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,rgba(20,26,45,.96),rgba(9,13,23,.975));
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:24px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:50;
}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:18px}
/* focus-within as well as hover: without it, tabbing lands focus inside a
   panel that is still visibility:hidden */
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-main{display:grid;grid-template-columns:repeat(3,300px);flex:none}
.mega-col{padding:0 22px}
.mega-col+.mega-col{border-left:1px solid rgba(255,255,255,.08)}
.mega-head{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8592ad;margin-bottom:16px;padding-left:10px}
.mega-item{width:100%;text-align:left;background:none;display:flex;align-items:center;gap:14px;padding:11px 10px;border-radius:12px;transition:background .2s;cursor:pointer}
.mega-item:hover,.mega-item.active,.mega-item.is-current{background:rgba(255,255,255,.06)}
.mega-ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#aeb8cc;transition:color .2s,background .2s,border-color .2s}
.mega-item:hover .mega-ico,.mega-item.active .mega-ico,.mega-item.is-current .mega-ico{color:#5b9dff;border-color:rgba(0,120,255,.4);background:rgba(0,71,187,.16)}
.mega-ico svg{width:20px;height:20px}
.mega-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.mega-txt b{font-size:14px;font-weight:600;color:#eef1f6;display:flex;align-items:center;gap:8px;white-space:nowrap}
.mega-txt em{font-style:normal;font-size:12.5px;color:#a6b0c4;margin-top:3px}
.mega-badge{font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:20px;background:rgba(0,71,187,.28);color:#7fb0ff;border:1px solid rgba(0,120,255,.45);text-transform:uppercase}
.mega-chev{width:16px;height:16px;margin-left:auto;color:#6d7893;transition:transform .3s var(--ease),color .2s}
.mega-item-parent.active .mega-chev{transform:rotate(90deg);color:#5b9dff}
/* Commodities flyout */
.mega-flyout{width:0;overflow:hidden;flex:none;transition:width .38s var(--ease)}
.mega.flyout-open .mega-flyout{width:250px}
.fly-inner{width:236px;margin-left:14px;height:100%;padding:20px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(165deg,rgba(26,42,78,.85),rgba(4,7,16,.96))}
/* keyed panels share one flyout slot — only the hovered parent's panel shows */
.mega-flyout [data-fly-panel]{display:none}
.mega-flyout [data-fly-panel].is-on{display:block}
.fly-title{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6d7893;margin-bottom:14px}
.fly-title-link{display:inline-flex;align-items:center;gap:7px;transition:color .25s}
.fly-title-link:hover{color:var(--blue)}
.fly-title-go{width:12px;height:12px;transition:transform .3s var(--ease)}
.fly-title-link:hover .fly-title-go{transform:translateX(3px)}
.fly-group{margin-bottom:16px}
.fly-group:last-child{margin-bottom:0}
.fly-group h5{font-size:12px;font-weight:700;color:#dfe6f2;margin-bottom:6px}
.fly-group a{display:block;font-size:13px;color:#9aa6bd;padding:5px 0;transition:color .2s,transform .2s}
.fly-group a:hover{color:#fff;transform:translateX(3px)}
/* Mega variants for Education / Promotions / Company */
.mega--center{left:50%;right:auto;transform:translate(-50%,10px)}
.nav-item.has-mega:hover .mega--center{transform:translate(-50%,0)}
.mega--promo .mega-main{grid-template-columns:300px}
/* inline expandable sub-menu (e.g. Sponsorship) — expands below the item, not a side box */
.mega-subchev{width:15px;height:15px;margin-left:auto;color:#6d7893;transition:transform .3s var(--ease),color .2s}
.mega-sub:hover .mega-subchev,.mega-sub:focus-within .mega-subchev{transform:rotate(180deg);color:#5b9dff}
.mega-subitems{overflow:hidden;max-height:0;transition:max-height .42s var(--ease);padding-left:54px}
/* focus-within so the children are reachable by keyboard, not hover only */
.mega-sub:hover .mega-subitems,.mega-sub:focus-within .mega-subitems{max-height:360px}
.mega-subitems a{display:block;font-size:13px;color:#9aa6bd;padding:6px 0;transition:color .2s,transform .2s}
.mega-subitems a:hover,.mega-subitems a:focus-visible{color:#5b9dff;transform:translateX(3px)}
/* the child page you are on is marked, as top-level items are */
.mega-subitems a.is-current{color:#5b9dff;font-weight:600}
.mega-item--tight{padding-top:9px;padding-bottom:9px}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;align-items:center;gap:7px;color:#dfe4ee;font-size:14px;font-weight:500;cursor:pointer;transition:color .2s}
.lang:hover{color:#fff}
.lang-globe{width:17px;height:17px}
.lang-caret{width:11px;height:11px;color:#9aa6bd;transition:transform .3s var(--ease)}
.lang[aria-expanded="true"] .lang-caret{transform:rotate(180deg);color:#fff}
/* Language popup — matches mega-menu glass panel */
.lang-pop{
  position:fixed;top:calc(var(--topbar-h,44px) + var(--nav-h) + 10px);left:50%;z-index:60;
  width:min(1040px,calc(100vw - 40px));max-height:78vh;overflow:auto;
  background:linear-gradient(180deg,rgba(20,26,45,.96),rgba(9,13,23,.975));
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:26px 34px 34px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.lang-pop.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.lp-head{display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}
.lp-title{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em}
.lp-close{position:absolute;right:-10px;top:-6px;width:34px;height:34px;display:grid;place-items:center;color:#c7cddb;border-radius:10px;transition:background .2s,color .2s}
.lp-close:hover{background:rgba(255,255,255,.08);color:#fff}
.lp-close svg{width:19px;height:19px}
.lp-search{display:flex;align-items:center;gap:12px;margin:24px 0 28px;padding:0 20px;height:50px;border-radius:70px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:border-color .25s,background .25s}
.lp-search:focus-within{border-color:rgba(120,160,255,.5);background:rgba(255,255,255,.09)}
.lp-search-ic{width:18px;height:18px;color:#8b95a8;flex:none}
.lp-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-size:14.5px;font-family:inherit}
.lp-search input::placeholder{color:rgba(218,227,237,.5)}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px}
.lp-item{justify-self:start;width:-moz-fit-content;width:fit-content;max-width:100%;text-align:left;background:none;border:1px solid transparent;cursor:pointer;font-size:13.5px;color:#eef1f6;font-family:inherit;padding:9px 16px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s,border-color .2s,box-shadow .2s}
.lp-item b{font-weight:600;color:#cdd7e6;margin-right:7px}
.lp-item:hover{background:rgba(255,255,255,.07)}
.lp-item.is-active{
  background:var(--blue);border-color:transparent;color:#fff;
  box-shadow:0 8px 20px -8px rgba(0,71,187,.75),inset 0 1px 0 rgba(255,255,255,.2);
}
.lp-item.is-active:hover{background:var(--blue-700)}
.lp-item.is-active b{color:#fff}
.lp-empty{color:#8b95a8;font-size:14px;padding:14px 4px 2px}
.login{color:#dfe4ee;font-size:14.5px;font-weight:500;transition:color .25s}
.login:hover{color:#fff}
.nav-cta{border-radius:70px}
.hamburger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px}
.hamburger span{display:block;height:2px;width:22px;margin-inline:auto;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:950;
  background:#080b16;border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);transition:transform .45s var(--ease);
  padding:96px 26px 32px;overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu a{color:#dbe0ec;font-size:17px;font-weight:500;padding:13px 6px;border-radius:10px}
.mobile-menu a:hover{background:rgba(255,255,255,.05)}
.mobile-menu hr{border:none;border-top:1px solid rgba(255,255,255,.09);margin:14px 0}
.mobile-menu .btn{margin-top:6px}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:940;opacity:0;visibility:hidden;transition:opacity .4s}
.menu-backdrop.open{opacity:1;visibility:visible}
/* ---------- Hero ---------- */
.hero{
  position:relative;background:#04060e url(../img/home-hero-bg.webp) center center/cover no-repeat;color:#fff;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));
  padding:calc(60px + var(--nav-h)) 0 40px;isolation:isolate;
  min-height:min(760px, calc(100vh - var(--topbar-h,44px)));
}
.hero>.container{width:100%}
.hero-glow,.hero-shape{display:none}
.hero-glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:1280px;height:820px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 42% at 50% 34%,rgba(22,233,215,.12),transparent 62%),
    radial-gradient(closest-side,rgba(3,72,205,.6),rgba(0,54,160,.18) 46%,transparent 72%);
  filter:blur(4px);
  animation:heroGlowPulse 7s ease-in-out infinite;
}
@keyframes heroGlowPulse{0%,100%{opacity:.9}50%{opacity:1}}
.hero-shape{
  position:absolute;right:-160px;top:180px;width:680px;height:760px;z-index:-2;pointer-events:none;
  background:conic-gradient(from 160deg at 60% 40%,rgba(0,71,187,.22),transparent 40%,rgba(4,120,220,.14) 70%,transparent);
  clip-path:polygon(30% 0,100% 22%,86% 100%,0 74%);
  opacity:.55;filter:blur(20px);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 58% at 50% 44%,rgba(3,7,20,.22) 0%,rgba(3,7,20,.1) 54%,rgba(3,7,20,0) 82%),
    linear-gradient(180deg,rgba(3,7,20,.62) 0%,rgba(3,7,20,.24) 18%,rgba(3,7,20,.06) 42%,rgba(3,7,20,.18) 64%,rgba(3,7,20,.42) 84%,rgba(3,7,20,.7) 100%);
}
/* ---------- Ticker ---------- */
.ticker{background:var(--slate);overflow:hidden;border-block:1px solid rgba(255,255,255,.04)}
.ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;will-change:transform}
.ticker-item{display:inline-flex;align-items:center;gap:9px;padding:17px 34px;font-size:13.5px;flex:none}
.ticker-item .t-dot{width:7px;height:7px;border-radius:50%}
.ticker-item .t-dot.up{background:var(--green)}
.ticker-item .t-dot.down{background:var(--red)}
.ticker-item .t-sym{font-weight:700;color:#eef1f6}
.ticker-item .t-price{color:#9aa3b2}
.ticker-item .t-chg{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.ticker-item .t-chg svg{width:11px;height:11px}
.ticker-item .t-chg.up{color:var(--green)}
.ticker-item .t-chg.down{color:var(--red)}
/* ---------- Section themes ---------- */
.why,.awards{background:var(--bg-light)}
.markets,.academy,.sponsors{background:var(--bg-light-2)}
.platforms{background:linear-gradient(180deg,var(--bg-light-2),#fff)}
/* ---------- Why stats ---------- */
/* ---------- Markets (glassmorphism) ---------- */
.markets{position:relative;overflow:hidden;background:var(--bg-light)}
.markets>.container{position:relative;z-index:1}
/* ---- Markets explorer (glassmorphic cards + category tabs) ---- */
.mkx-card{display:flex;flex-direction:column;width:320px;flex:none;border-radius:var(--radius-xl);padding:20px 20px 18px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.85);transition:transform .4s var(--ease),border-color .3s,background .3s}
.mkx-card:hover{transform:translateY(-4px);border-color:#fff;background:rgba(255,255,255,.66)}
.mkx-top{display:flex;align-items:center;gap:12px}
.mkx-ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;letter-spacing:-.02em}
.mkx-ic-flag{overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.mkx-ic-flag img{width:100%;height:100%;object-fit:cover}
.mkx-ic-flags{position:relative;width:48px;background:none}
.mkx-ic-flags img{position:absolute;top:50%;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22)}
.mkx-ic-flags img:first-child{width:29px;height:29px;left:0;transform:translateY(-50%);z-index:1}
.mkx-ic-flags img:last-child{width:25px;height:25px;right:0;transform:translateY(-50%);z-index:2}
.mkx-ic-inst{overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.mkx-ic-inst img{width:100%;height:100%;display:block}
.mkx-ic-etf{background:#e6edf6;color:#5c6c86}
.mkx-ic-etf svg{width:22px;height:22px}
.mkx-name{min-width:0}
.mkx-name b{display:block;font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.mkx-name em{display:block;font-style:normal;font-size:12.5px;color:var(--text-mute);line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkx-spark{margin:14px 0 16px;height:64px}
.mkx-spark svg{width:100%;height:100%;display:block}
.mkx-base{stroke:rgba(20,44,96,.2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.mkx-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
.mkx-price{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;padding:7px 13px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid var(--line)}
.mkx-flash-up{animation:mkxFlash .8s ease;--fc:#0a9d5a;--fb:rgba(18,183,106,.16)}
.mkx-flash-down{animation:mkxFlash .8s ease;--fc:#d43a3f;--fb:rgba(229,72,77,.16)}
@keyframes mkxFlash{0%,26%{color:var(--fc);background:var(--fb)}100%{color:var(--text);background:rgba(255,255,255,.72)}}
.mkx-chg{font-size:13px;font-weight:700;color:#fff;padding:7px 12px;border-radius:60px;font-variant-numeric:tabular-nums}
.mkx-chg.up{background:#12b76a}
.mkx-chg.down{background:#e5484d}
.mkx-trade{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--text);padding:8px 18px;border-radius:60px;background:rgba(255,255,255,.72);border:1px solid var(--line);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.mkx-trade:hover{background:var(--blue);color:#fff;border-color:transparent}
@media (max-width:560px){.mkx-card{width:280px}}
.markets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mkt-card{
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.mkt-card:hover{transform:translateY(-5px);box-shadow:0 24px 54px -22px rgba(20,44,96,.34),inset 0 1px 0 rgba(255,255,255,.95);border-color:#fff}
.mkt-list li{border-bottom-color:rgba(203,214,228,.5)}
.price-flash-up{animation:flashUp .6s var(--ease)}
.price-flash-down{animation:flashDown .6s var(--ease)}
@keyframes flashUp{0%{color:var(--green)}100%{color:#3a4353}}
@keyframes flashDown{0%{color:var(--red)}100%{color:#3a4353}}
.mkt-wide{grid-column:span 2}
.mkt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mkt-head h3{font-size:13px;letter-spacing:.08em;color:var(--text);font-weight:700}
.view-all{font-size:12.5px;color:var(--blue);font-weight:600;transition:opacity .2s}
.view-all:hover{opacity:.7}
.mkt-list li{border-bottom:1px solid #eef1f6}
.mkt-list li:last-child{border-bottom:none}
.mkt-row{display:grid;grid-template-columns:26px 1fr auto auto 16px;align-items:center;gap:12px;padding:13px 10px;margin:0 -10px;border-radius:11px;color:inherit;transition:background .25s var(--ease)}
.mkt-row:hover{background:rgba(0,71,187,.06)}
.mkt-row:hover .mkt-name{color:var(--blue)}
.mkt-row:hover .coin{transform:scale(1.08)}
.coin{transition:transform .25s var(--ease)}
.mkt-arrow{width:16px;height:16px;color:var(--blue);opacity:0;transform:translateX(-5px);transition:opacity .25s var(--ease),transform .25s var(--ease);justify-self:end}
.mkt-row:hover .mkt-arrow{opacity:1;transform:translateX(0)}
.coin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.coin-gold{background:linear-gradient(145deg,#f7b733,#e08c1a)}
.coin-silver{background:linear-gradient(145deg,#9aa7b8,#6a7688)}
.coin-copper{background:linear-gradient(145deg,#e0603a,#b23a1e)}
.coin-plat{background:linear-gradient(145deg,#2b2f38,#12151b)}
.coin-eur{background:linear-gradient(145deg,#3b6fe0,#1b3fa8)}
.coin-gbp{background:linear-gradient(145deg,#7a5cf0,#4a2fb0)}
.coin-jpy{background:linear-gradient(145deg,#1f2733,#0c1119)}
.coin-aud{background:linear-gradient(145deg,#12b389,#0b7d5f)}
.coin-aapl{background:linear-gradient(145deg,#5b6472,#2c333d)}
.coin-tsla{background:linear-gradient(145deg,#e0303a,#a01820)}
.coin-nvda{background:linear-gradient(145deg,#4caf50,#2e7d32)}
.coin-amzn{background:linear-gradient(145deg,#ff9f1c,#e07800)}
.coin-idx{background:linear-gradient(145deg,#3f78d8,#1d4fa0);font-size:9.5px}
.coin-etf{background:linear-gradient(145deg,#5568e0,#2f3fae)}
.mkt-name{font-size:14.5px;font-weight:600;color:var(--text)}
.mkt-name em{font-style:normal;color:var(--text-mute);font-weight:400}
.mkt-price{font-size:14px;color:#3a4353;font-variant-numeric:tabular-nums;font-weight:500}
.chg{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.chg.up{color:var(--green)}
.chg.down{color:var(--red)}
/* ---------- Platforms ---------- */
.plat-grid{
  display:grid;gap:24px;margin-bottom:56px;
  grid-template-columns:1.42fr 1fr 1fr;
  grid-template-areas:"app web web" "app mt4 mt5";
}
.plat-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:34px 34px 0;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.plat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.plat-copy h3{font-size:21px;color:var(--text);margin-bottom:8px}
.plat-copy p{font-size:14.5px;color:var(--text-soft);max-width:420px}
.plat-app{grid-area:app;background:linear-gradient(155deg,#e8f0fb 0%,#ffffff 60%);min-height:512px;padding-bottom:0;overflow:hidden}
.plat-app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 60% at 8% 6%,rgba(255,255,255,.9),rgba(235,242,251,0) 68%)}
.plat-app .plat-copy{max-width:min(100%,40%);position:relative;z-index:5}
.plat-app .plat-copy h3{font-size:clamp(15px,2.1vw,19px);white-space:nowrap}
@keyframes platFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.plat-web{
  grid-area:web;overflow:hidden;min-height:240px;color:var(--text);
  background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  background-image:radial-gradient(62% 70% at 6% 0%,rgba(0,71,187,.08),transparent 64%);
}
.plat-web .plat-copy{max-width:44%;position:relative;z-index:5}
.plat-web .plat-copy h3{color:var(--text)}
.plat-web .plat-copy p{color:var(--text-soft)}
.plat-tablet{position:absolute;right:0;bottom:0;display:block;height:calc(100% - 26px);width:auto;max-width:54%;object-fit:contain;object-position:100% 100%;filter:drop-shadow(0 22px 34px rgba(20,44,96,.3));z-index:1;pointer-events:none}
.link-ur{position:absolute;bottom:26px;left:34px;z-index:5;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue)}
.plat-mt .link-ur{color:var(--blue)}
.link-ur .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-ur:hover .ico{transform:translate(3px,-3px)}
.plat-mt{
  min-height:250px;background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  background-image:radial-gradient(58% 66% at 6% 0%,rgba(0,71,187,.07),transparent 64%);
}
.plat-mt:nth-of-type(3){grid-area:mt4}
.plat-mt:nth-of-type(4){grid-area:mt5}
.plat-mt .plat-copy{max-width:225px;position:relative;z-index:2}
.plat-mt-ico{position:absolute;right:14px;bottom:0;width:auto;height:126px;max-width:44%;z-index:1;object-fit:contain;object-position:100% 100%}
/* ---------- Tools (dark) ---------- */
.tools{
  background:
    radial-gradient(90% 60% at 50% 100%,rgba(0,40,120,.5),transparent 70%),
    linear-gradient(180deg,#000 0%,#00102c 100%);
  color:#fff;position:relative;
}
.blue{color:var(--blue)}
/* ---------- How it works (dark navy, pinned scrub) ---------- */
.howto{background:
  radial-gradient(92% 72% at 50% 6%,rgba(0,46,138,.42),transparent 60%),
  radial-gradient(80% 60% at 50% 100%,rgba(0,32,96,.34),transparent 66%),
  linear-gradient(180deg,#04060e 0%,#050a1c 50%,#04060e 100%);
  color:#fff;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.stp{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:15px;background:rgba(255,255,255,.08);color:#8b97ae;border:1px solid rgba(255,255,255,.12);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.stp.done{background:var(--blue);color:#fff;border-color:transparent}
.stp.done::after{content:"";width:16px;height:9px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.stp.active{background:#031233;color:#5b9dff;border:2px solid #2f6bde;box-shadow:0 0 0 5px rgba(47,107,222,.18);transform:scale(1.06)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.step{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .45s var(--ease),border-color .35s,background .35s,box-shadow .35s}
.step h3{font-size:21px;color:#dfe6f2;margin-bottom:10px;transition:color .35s}
.step p{font-size:14px;color:#93a0b7;transition:color .35s}
/* static fallback (mobile / short viewports): all steps as equal white cards, no stepper */
.howto-static{min-height:auto;display:block}
.howto-static .steps{margin-bottom:26px}
.howto-static .step{background:#fff;border-color:#fff}
.howto-static .step h3{color:#0d1424}
.howto-static .step p{color:#5a6472}
/* ---------- Trusted worldwide ---------- */
.trusted{background:linear-gradient(180deg,#001333 0%,#050912 34%,#04060b 100%);color:#fff;overflow:hidden}
.play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.85);color:#0d1424;display:grid;place-items:center;backdrop-filter:blur(4px);transition:transform .3s var(--ease),background .3s}
.play svg{width:20px;height:20px;margin-left:2px}
.play:hover{transform:scale(1.08);background:#fff}
/* ---------- Reviews ---------- */
.reviews{background:#04060b;color:#fff;position:relative}
.tp-sub{margin-top:14px;font-size:15px;color:#aab4c8}
.tp-logo{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff}
.tp-star{width:16px;height:16px;color:#00b67a}
.reviews-rail{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.reviews-track{display:flex;align-items:stretch;gap:20px;width:max-content;padding:6px 20px;will-change:transform}
.review{flex:0 0 340px;width:340px;display:flex;flex-direction:column;background:#121319;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px;transition:transform .4s var(--ease),border-color .3s}
.review:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.rv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.stars{display:inline-flex;gap:2px;background:#00b67a;padding:4px;border-radius:4px}
.stars svg{width:15px;height:15px;color:#fff}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#9aa4b6}
.verified svg{width:14px;height:14px;color:#8a94a6}
.rv-meta{font-size:12.5px;color:#8f99ab;margin-bottom:8px}
.rv-meta b{color:#e6eaf1;font-weight:600}
.rv-meta em{font-style:normal}
.review h4{font-size:15px;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.review p{font-size:13.5px;color:#98a2b4;line-height:1.6}
.read-more{color:#00b67a;font-weight:600}
.reviews-cta{text-align:center;margin-top:40px}
.reviews-more{display:inline-flex}
/* ---------- Awards ---------- */
.awards{position:relative;overflow:hidden}
.awards::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 60% at 82% 8%,rgba(0,71,187,.08),transparent 62%)}
.awards>.container{position:relative;z-index:1}
.award-rail{width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.award-track{display:flex;gap:24px;width:max-content;will-change:transform;padding:4px 0}
.award-card{flex:0 0 300px;height:130px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.72);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),border-color .3s}
.award-card:hover{transform:translateY(-4px);border-color:#fff}
.laurel{width:22px;height:42px;background:center/contain no-repeat;flex:none}
.laurel-l{background-image:url('../img/laurel-left.svg')}
.laurel-r{background-image:url('../img/laurel-right.svg')}
.award-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;min-width:0}
.award-txt{font-size:13px;font-weight:700;color:var(--text);text-align:center;letter-spacing:-.01em;line-height:1.25}
.award-sum{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:var(--blue);line-height:1.2}
.award-nav{display:none}
.media-head{margin-top:100px}
.media-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}
.media-logos li{display:flex;flex-direction:column;align-items:center;gap:12px}
.media-rate{font-size:22px;font-weight:700;color:var(--text)}
.media-logo{display:flex;align-items:center;justify-content:center;height:30px;width:132px}
.media-logos img{max-height:26px;max-width:124px;width:auto;height:auto;object-fit:contain;transition:transform .3s var(--ease)}
.media-logos li:hover img{transform:translateY(-2px)}
.media-url{font-size:12.5px;color:var(--text-mute)}
/* ---------- Academy ---------- */
.academy{position:relative;overflow:hidden}
.academy::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(52% 55% at 90% 6%,rgba(0,71,187,.08),transparent 62%)}
.academy>.container{position:relative;z-index:1}
/* ---------- Sponsors ---------- */
.sponsors{position:relative;overflow:hidden}
.sponsors::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 70% at 22% 20%,rgba(0,71,187,.07),transparent 62%)}
.sponsors>.container{position:relative;z-index:1}
/* ---------- CTA banner ---------- */
.cta-banner{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#04060d}
.cta-bg{position:absolute;inset:0;z-index:-2;
  background:#04060d url("../img/cta-broker.webp") center bottom/cover no-repeat}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,13,.55) 0%,rgba(4,6,13,0) 30%);pointer-events:none}
.cta-inner{text-align:center;padding:112px 0 clamp(300px,25vw,560px)}
.cta-inner h2{font-size:clamp(26px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.cta-inner p{max-width:620px;margin:18px auto 0;font-size:15px;color:#d3e2ff}
.cta-inner .btn{margin-top:30px}
/* ---------- Hero network graphic ---------- */
.hero-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#cfe0ff;opacity:.5;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:.85}}
.hero-viz{position:relative;z-index:1;width:min(100%,720px);aspect-ratio:720/468;margin:48px auto 4px}
.cta-traces{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-traces path{fill:none}
.tr-base path{stroke:rgba(120,150,220,.16);stroke-width:1.4}
.tr-flow path{stroke:#3f80ea;stroke-width:1.6;stroke-dasharray:4 66;stroke-linecap:round;animation:trFlow 3.2s linear infinite;filter:drop-shadow(0 0 4px rgba(63,128,234,.9))}
@keyframes trFlow{to{stroke-dashoffset:-140}}
.tr-nodes circle{animation:nodePulse 2.4s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.4}50%{opacity:1}}
.cta-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;display:grid;place-items:center;z-index:3}
.cta-hub::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,95,255,.55),transparent 70%);filter:blur(6px)}
.hub-ring{position:absolute;width:100px;height:100px;border-radius:26px;border:1px solid rgba(90,150,255,.45);animation:hubpulse 3s ease-out infinite}
.hub-ring.r2{animation-delay:1.5s}
@keyframes hubpulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.hub-core{position:relative;z-index:2;width:96px;height:96px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(160deg,rgba(34,54,102,.7),rgba(8,16,40,.8));border:1px solid rgba(120,160,255,.45);box-shadow:0 0 50px rgba(0,90,255,.5),inset 0 1px 0 rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hub-core img{width:30px;height:auto}
.hub-core b{font-size:8.5px;font-weight:700;letter-spacing:.14em;color:#dbe6ff}
.cta-card{position:absolute;z-index:2;background:rgba(18,26,46,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 22px 50px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1)}
.cc-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08);color:#9fc2ff;margin-bottom:9px}
.cc-ic svg{width:15px;height:15px}
.cc-h{font-size:11.5px;color:#8b95a8}
.cc-big{display:block;font-size:16px;font-weight:700;color:#fff;margin-top:3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cc-sub{display:block;font-size:11px;color:#8b95a8;margin-top:4px}
.cc-sub.up{color:#34d99b}
.cc-price-row{justify-content:space-between;margin-top:8px}
.cc-price-val{font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cc-chart{width:100%;height:30px;margin-top:8px}
.cc-conn{top:0;left:6%;width:190px}
.cc-vol{top:37%;left:0;width:214px}
.cc-vol.is-active{border-color:rgba(0,120,255,.6);box-shadow:0 0 0 1px rgba(0,120,255,.35),0 22px 50px -20px rgba(0,60,180,.6)}
.cc-price{bottom:0;left:7%;width:216px}
.cta-bubble{position:absolute;z-index:2;top:6%;right:6%;background:rgba(20,28,48,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:12.5px;color:#dfe6f2;font-weight:500;white-space:nowrap;box-shadow:0 16px 34px -16px rgba(0,0,0,.6)}
.cta-bubble b{color:#7fb0ff}
.cta-chip{position:absolute;z-index:2;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#9fc2ff;background:rgba(18,26,46,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.cta-chip svg{width:20px;height:20px}
.cta-chip.cx1{top:37%;right:0}
.cta-chip.cx2{bottom:19%;right:16%}
[data-float]{animation:floaty2 6s ease-in-out infinite;will-change:transform}
.cc-vol[data-float]{animation-duration:7s;animation-delay:-1.2s}
.cc-price[data-float]{animation-duration:6.6s;animation-delay:-2.4s}
.cta-bubble[data-float]{animation-duration:5.4s;animation-delay:-.8s}
.cta-chip.cx1[data-float]{animation-duration:5.8s;animation-delay:-1.6s}
.cta-chip.cx2[data-float]{animation-duration:6.8s;animation-delay:-3s}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,#06080f 0%,#000 42%);color:#c7cddb;padding:0 0 56px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px;padding:72px 0 48px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-col h4{font-size:16px;color:#fff;font-weight:700;letter-spacing:-.01em;margin-bottom:18px}
.foot-col h4.mt{margin-top:38px}
.foot-col a{display:block;font-size:14px;color:#98a1b2;padding:7px 0;transition:color .2s,transform .2s}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-contact{margin-bottom:16px}
.foot-contact span{display:block;font-size:14px;color:#c7cddb;font-weight:500;margin-bottom:3px}
.foot-contact a{font-size:13.5px;color:#98a1b2;transition:color .2s}
.foot-contact a:hover{color:#5b9dff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;flex-wrap:wrap}
.foot-logo{height:32px;width:auto}
.socials{display:flex;gap:11px}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#c7cddb;border:1px solid rgba(255,255,255,.14);transition:background .3s,color .3s,transform .3s,border-color .3s}
.socials a svg{width:17px;height:17px}
.socials a:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-3px)}
.foot-legal-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.foot-copy{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13px;color:#8a94a6}
.foot-copy a{transition:color .2s}
.foot-copy a:hover{color:#fff}
.foot-partners{display:flex;align-items:center;gap:24px}
.foot-partners img{width:auto}
.fp-nba{height:30px}
.fp-porsche{height:26px}
.risk{margin-top:30px;padding:0}
.risk h5{font-size:12.5px;letter-spacing:.06em;color:#c7cddb;font-weight:700;margin:22px 0 10px}
.risk h5:first-child{margin-top:0}
.risk p{font-size:12px;line-height:1.7;color:#6f7688;margin-bottom:10px}
.risk p strong{color:#aab3c4;font-weight:600}
/* ---------- Back to top ---------- */
.to-top{position:fixed;right:24px;bottom:94px;width:46px;height:46px;border-radius:50%;background:rgba(6,9,20,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);z-index:840;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,background .3s}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:20px;height:20px}
.to-top:hover{background:var(--blue)}
/* ---------- Chat widget ---------- */
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:850;width:60px;height:60px;border-radius:50%;color:#fff;display:grid;place-items:center;background:radial-gradient(130% 180% at 50% -20%,#2f7bff,var(--blue) 50%,var(--blue-800));border:1.5px solid rgba(255,255,255,.35);box-shadow:0 16px 38px -10px rgba(0,71,187,.6),0 4px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s}
.chat-fab-ico{width:27px;height:27px;filter:brightness(0) invert(1)}
.chat-fab:hover{transform:translateY(-3px) scale(1.05)}
.chat-fab::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 rgba(0,71,187,.45);animation:chatpulse 2.6s infinite}
@keyframes chatpulse{0%{box-shadow:0 0 0 0 rgba(0,71,187,.45)}70%{box-shadow:0 0 0 15px rgba(0,71,187,0)}100%{box-shadow:0 0 0 0 rgba(0,71,187,0)}}
.chat-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--green);color:#04240f;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #05070e}
.chat-fab.open .chat-fab-ico,.chat-fab.open .chat-badge{opacity:0}
.chat-fab.open::before{content:"";position:absolute;width:20px;height:20px;background:linear-gradient(45deg,transparent 43%,#fff 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#fff 43% 57%,transparent 57%)}
.chat-fab.open::after{animation:none;box-shadow:none}
.chat-panel{position:fixed;right:24px;bottom:92px;z-index:851;width:min(360px,calc(100vw - 40px));border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,26,44,.82),rgba(11,15,24,.9));
  -webkit-backdrop-filter:blur(34px) saturate(1.7);backdrop-filter:blur(34px) saturate(1.7);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.chat-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:radial-gradient(120% 160% at 0% 0%,rgba(0,71,187,.5),rgba(0,20,80,.2));border-bottom:1px solid rgba(255,255,255,.1)}
.chat-avatar{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#cfe0ff}
.chat-avatar svg{width:20px;height:20px}
.chat-online{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid #0b1020}
.chat-head-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.chat-head-txt b{font-size:14.5px;color:#fff}
.chat-head-txt em{font-style:normal;font-size:12px;color:#9fb0cc}
.chat-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#b9c4d8;transition:background .2s,color .2s}
.chat-close svg{width:16px;height:16px}
.chat-close:hover{background:rgba(255,255,255,.1);color:#fff}
.chat-body{padding:20px 18px;max-height:340px;overflow-y:auto}
.chat-msg{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#e6eaf1;font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:4px 16px 16px 16px;max-width:88%}
.chat-msg-user{margin-left:auto;margin-top:10px;background:radial-gradient(140% 180% at 50% -40%,var(--blue),var(--blue-800));border-color:transparent;color:#fff;border-radius:16px 4px 16px 16px}
.chat-msg,.chat-msg-user{animation:chatIn .32s var(--ease) both}
@keyframes chatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-typing{display:flex;gap:5px;align-items:center;width:max-content;padding:15px 16px;margin-top:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:4px 16px 16px 16px;animation:chatIn .3s var(--ease) both}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:#9aa6bd;animation:typingdot 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes typingdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chat-chip{font-size:12.5px;font-weight:500;color:#cfe0ff;padding:8px 13px;border-radius:30px;border:1px solid rgba(0,120,255,.4);background:rgba(0,71,187,.16);transition:background .2s,color .2s}
.chat-chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.chat-input{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2)}
.chat-input input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:11px 16px;color:#fff;font-size:13.5px;font-family:inherit}
.chat-input input::placeholder{color:#8b95a8}
.chat-input input:focus{outline:none;border-color:rgba(0,120,255,.6)}
.chat-send{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(120% 180% at 50% -30%,var(--blue),var(--blue-800));transition:transform .25s}
.chat-send svg{width:18px;height:18px}
.chat-send:hover{transform:scale(1.06)}
/* ---------- Cookie consent (glassmorphism pill) ---------- */
.cookie{position:fixed;left:50%;bottom:26px;z-index:860;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 22px;border-radius:60px;max-width:calc(100vw - 28px);
  background:linear-gradient(180deg,rgba(22,28,48,.68),rgba(11,15,24,.74));
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);
  color:#e6eaf1;transform:translate(-50%,160%);opacity:0;transition:transform .55s var(--ease),opacity .5s;pointer-events:none}
.cookie.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.cookie-ic{flex:none;color:#7fb0ff;display:grid;place-items:center}
.cookie-ic svg{width:20px;height:20px}
.cookie-text{font-size:14px;color:#c7cddb}
.cookie-more{font-size:14px;font-weight:600;color:#7fb0ff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:color .2s}
.cookie-more:hover{color:#fff}
.cookie-x{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(130% 180% at 50% -20%,#2f7bff,var(--blue) 55%,var(--blue-800));border:1px solid rgba(255,255,255,.25);transition:transform .25s var(--ease)}
.cookie-x svg{width:16px;height:16px}
.cookie-x:hover{transform:scale(1.07)}
/* ---------- Animations ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
/* reveal initial states (only when JS animation active) */
/* only the fade is declared here — the 28px rise is set by GSAP in initReveals,
   so once the tween clears its inline transform nothing overrides :hover */
html.is-animate [data-reveal],html.is-animate [data-reveal-stagger]>*{opacity:0}
html.is-animate .head [data-reveal]{will-change:transform,opacity}
/* ---------- Responsive ---------- */
@media (max-width:1200px){.header-partners,.hp-divider{display:none}}
@media (max-width:1080px){:root{--gutter:20px}
.plat-grid{grid-template-columns:1fr 1fr;grid-template-areas:"app app" "web web" "mt4 mt5"}
.plat-app{min-height:440px}
.plat-tablet{right:0;max-width:46%}
.reviews-track{padding-inline:16px}
.foot-cols{grid-template-columns:repeat(4,1fr);gap:32px 24px;padding-top:56px}}
@media (max-width:900px){.nav-menu{display:none}
.login,.lang,.lang-pop{display:none}
.hamburger{display:flex}
.nav{gap:16px}
.markets-grid{grid-template-columns:1fr 1fr}
.mkt-wide{grid-column:span 2}
.howto{min-height:auto;display:block}}
@media (max-width:720px){.section{padding:68px 0}
.head{margin-bottom:40px}
.hero{padding:calc(var(--nav-h) + 26px) 0 72px}
.markets-grid{grid-template-columns:1fr}
.mkt-wide{grid-column:span 1}
.plat-grid{grid-template-columns:1fr;grid-template-areas:"app" "web" "mt4" "mt5"}
.plat-web{min-height:0}
.plat-web .plat-copy{max-width:none}
.plat-web .link-ur{position:static;left:auto;bottom:auto;margin-top:20px}
.plat-tablet{position:static;height:auto;width:min(88%,400px);max-width:none;margin:24px -34px 0 auto;top:0;right:0}
.plat-mt{min-height:210px}
.steps{grid-template-columns:1fr}
.review{flex-basis:290px;width:290px}
.foot-cols{grid-template-columns:repeat(2,1fr)}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:18px}
.cta-inner{padding:84px 0 150px}}
@media (max-width:560px){.cookie{left:12px;right:12px;max-width:none;bottom:92px;border-radius:20px;padding:14px 14px 14px 18px;transform:translateY(170%);flex-wrap:wrap}
.cookie.show{transform:translateY(0)}
.cookie-text{font-size:13px;flex:1 1 100%}
.chat-panel{left:12px;right:12px;width:auto}}
@media (max-width:460px){.foot-cols{grid-template-columns:1fr}
.risk{padding:0}}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.is-animate [data-reveal],html.is-animate [data-reveal-stagger]>*,html.is-animate [data-ct-cards]>*{opacity:1!important;transform:none!important}
html.is-animate [data-ct-words] .ct-w>i{transform:none!important}
.ticker-track{animation:none!important}}
/* ================= ACCOUNT OPENING PAGE ================= */
/* the outline treatment read as an unfinished button on dark banners */
.btn-ghost{background:#fff;border:1.5px solid transparent;color:var(--text)}
.btn-ghost::after{display:none}
.btn-ghost:hover{background:#eaf0fa;border-color:transparent;box-shadow:0 18px 38px -22px rgba(0,0,0,.5)}
/* ---- Banner ---- */
.acct-hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#04060e;margin-top:calc(-1 * var(--nav-h));min-height:min(780px, calc(100vh - var(--topbar-h,44px)));display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 56px}
.acct-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.acct-hero-bg{position:absolute;inset:0;z-index:-1;background:transparent}
.acct-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,14,.95) 0%,rgba(4,6,14,.78) 38%,rgba(4,6,14,.32) 64%,rgba(4,6,14,.04) 100%)}
.acct-hero-inner{position:relative;z-index:1}
.acct-hero-title{font-size:clamp(29px,4.1vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-top:16px}
.acct-hero-sub{margin-top:18px;max-width:540px;font-size:clamp(15px,1.5vw,17px);color:#c4cedf;line-height:1.6}
.acct-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.acct-hero-points{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.acct-hero-points li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:#eaf0fa;padding:8px 18px 8px 8px;border-radius:70px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acct-hero-points .pt-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(0,71,187,.3);color:#8fb8ff}
.acct-hero-points .pt-ic svg{width:17px;height:17px}
/* ---- Section themes ---- */
.faq-sec{background:var(--bg-light)}
/* ---- Verify bento (cards with image tiles + wide dark card) ---- */
.vb-glyph{position:relative;z-index:1;width:84px;height:84px;border-radius:22px;display:grid;place-items:center;color:#fff;box-shadow:0 22px 46px -16px rgba(0,71,187,.55);transition:transform .45s var(--ease)}
.vb-glyph svg{width:40px;height:40px}
.vg-blue{background:linear-gradient(160deg,#2a72ff,#0b43c6)}
.vg-cyan{background:linear-gradient(160deg,#16E9D7,#0a9d92)}
.vg-green{background:linear-gradient(160deg,#26cf90,#0f9d6f)}
/* ---- Next steps ---- */
/* ---- FAQ (minimal divider list) ---- */
.faq-list{max-width:1000px;margin:0 auto}
.faq-item{background:none;border:none;border-bottom:1px solid rgba(20,40,80,.12);border-radius:0}
.faq-item:first-child{border-top:1px solid rgba(20,40,80,.12)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:27px 4px;font-size:clamp(16px,1.65vw,19px);font-weight:400;color:var(--text);transition:color .2s}
.faq-item summary:hover{color:var(--blue)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q-ic{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,40,80,.28);display:grid;place-items:center;color:var(--text-soft);transition:transform .3s var(--ease),border-color .25s,color .25s,background .25s}
.faq-q-ic svg{width:22px;height:22px}
.faq-item summary:hover .faq-q-ic{border-color:var(--blue);color:var(--blue)}
.faq-item[open] summary .faq-q-ic,.faq-item[open] summary:hover .faq-q-ic{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}
.faq-a{padding:0 4px 28px;max-width:860px;font-size:15px;color:var(--text-soft);line-height:1.7}
@media (max-width:720px){.acct-hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 54px;text-align:center}
.hero{min-height:auto}
.acct-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.68),rgba(4,6,14,.93))}
.acct-hero-inner{max-width:100%}
.acct-hero-sub{margin-inline:auto}
.acct-hero-cta,.acct-hero-points{justify-content:center}
.acct-hero-sub br{display:none}}
/* ================= TRADING ACCOUNT PAGE ================= */
/* ---- Hero (two-column: copy + interactive panel over video) ---- */
.ta-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center;width:100%}
.ta-hero-copy{max-width:600px;min-width:0}
.ta-panel{min-width:0}
.ta-hero-metrics{display:flex;flex-wrap:wrap;gap:14px 0;margin-top:38px}
.ta-hero-metrics li{padding:0 26px;position:relative}
.ta-hero-metrics li:first-child{padding-left:0}
.ta-hero-metrics li+li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.16)}
.ta-hero-metrics b{display:block;font-size:clamp(21px,2.3vw,28px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.ta-hero-metrics span{display:block;margin-top:6px;font-size:12px;color:#9fb0cc;letter-spacing:.01em}
/* Interactive account panel */
.ta-panel{position:relative;border-radius:var(--radius-xl);padding:22px 22px 24px;
  background:linear-gradient(180deg,rgba(21,29,52,.74),rgba(9,13,24,.86));
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 100px -36px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.ta-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(120,160,255,.4),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.ta-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ta-panel-head b{font-size:15px;color:#fff;font-weight:600;letter-spacing:-.01em}
.ta-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#34d99b;padding:5px 12px 5px 10px;border-radius:70px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.32)}
.ta-status i{width:7px;height:7px;border-radius:50%;background:#34d99b;animation:pulse 2.4s infinite}
.ta-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.ta-seg button{padding:11px 8px;border-radius:10px;font-size:13px;font-weight:600;color:#aeb8cc;white-space:nowrap;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s}
.ta-seg button:hover{color:#fff}
.ta-seg button.active{background:linear-gradient(180deg,#0b57e6,#0740b8);color:#fff;box-shadow:0 12px 26px -12px rgba(3,72,205,.95)}
.ta-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 16px}
.ta-tabs button{font-size:12.5px;font-weight:600;color:#aeb8cc;padding:7px 14px;border-radius:70px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);transition:color .25s,background .25s,border-color .25s}
.ta-tabs button:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.ta-tabs button.active{color:#fff;background:rgba(0,71,187,.3);border-color:rgba(90,150,255,.55)}
.ta-quote{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.ta-quote-l{min-width:0}
.ta-quote-sym{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.ta-quote-name{font-size:12px;color:#8b95a8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-spark{width:78px;height:34px;flex:none}
.ta-spark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:taSpark 1.4s var(--ease) forwards}
@keyframes taSpark{to{stroke-dashoffset:0}}
.ta-quote-r{text-align:right;flex:none}
.ta-quote-price{font-size:18px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.ta-quote-chg{font-size:12.5px;font-weight:600;margin-top:2px}
.ta-quote-chg.up{color:#34d99b}
.ta-quote-chg.down{color:#ff6b6b}
@keyframes taUp{0%{color:#34d99b}100%{color:#fff}}
@keyframes taDown{0%{color:#ff6b6b}100%{color:#fff}}
.ta-quote-price.fup{animation:taUp .7s ease}
.ta-quote-price.fdown{animation:taDown .7s ease}
.ta-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.ta-metric{padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.ta-metric small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8b95a8;margin-bottom:6px}
.ta-metric small svg{width:13px;height:13px;color:#7fb0ff}
.ta-metric b{font-size:17px;color:#fff;font-weight:700;letter-spacing:-.01em}
.ta-metric em{font-style:normal;font-size:10.5px;color:#8b95a8;display:block;margin-top:2px}
@keyframes taMetric{0%{background:rgba(0,71,187,.2);border-color:rgba(90,150,255,.4)}100%{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}}
.ta-panel .btn{width:100%}
.ta-panel-note{margin-top:12px;font-size:11px;color:#7d879a;text-align:center}
/* ---- Account type cards (dark, multi-shade, equal height) ---- */
/* ---- Comparison table (airy, brand-highlighted column) ---- */
.ta-spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ta-table{width:100%;min-width:820px;max-width:1080px;margin:0 auto;border-collapse:collapse;font-size:15px}
.ta-table th,.ta-table td{padding:21px 26px;text-align:left;vertical-align:middle}
.ta-table thead th{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ta-table thead th:first-child{font-size:14px;color:var(--text-mute);font-weight:600}
.spec-feat{display:flex;align-items:center;gap:14px}
.spec-ic{flex:none;width:24px;height:24px;color:var(--text-mute)}
.spec-ic svg{width:24px;height:24px}
.ta-table tbody td:first-child{color:var(--text);font-weight:500}
.ta-table tbody td{color:var(--text-soft);line-height:1.45}
.ta-table tbody tr td{border-bottom:1px solid var(--line)}
.ta-table tbody tr:last-child td{border-bottom:none}
/* brand-highlighted column (Prime ECN) */
.ta-table th.ta-col-rec{color:var(--blue);background:rgba(0,71,187,.06);border-top-left-radius:14px;border-top-right-radius:14px}
.ta-table td.ta-col-rec{color:var(--blue);font-weight:600;background:rgba(0,71,187,.05)}
.ta-table tbody tr:last-child td.ta-col-rec{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.ta-rec-badge{display:inline-block;margin-left:9px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:70px;background:var(--blue);vertical-align:middle}
.spec-no{display:inline-grid;place-items:center;width:24px;height:24px}
.spec-no svg{width:17px;height:17px;color:#b8c0cc}
/* ---- FAQ (white, to separate from the light specs section above) ---- */
.ta-faq{background:#fff}
/* ---- Closing CTA: two actions ---- */
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-inner .cta-actions .btn{margin-top:0}
@media (max-width:980px){.ta-hero-grid{grid-template-columns:minmax(0,1fr);gap:38px;text-align:center}
.ta-hero-copy{max-width:600px;margin-inline:auto}
.acct-hero-cta{justify-content:center}
.ta-panel{width:100%;max-width:480px;margin-inline:auto}}
/* ================= PRIME ECN PAGE ================= */
/* ---- Key metrics (light, glassmorphism cards) ---- */
/* ---- Built for professionals (dark bento) ---- */
/* ---- Upgrading (light two-column) ---- */
.pe-float{position:absolute;left:-24px;bottom:36px;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 20px;box-shadow:0 24px 54px -22px rgba(16,30,54,.34);min-width:290px}
.pe-float-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(16,185,129,.12);color:var(--green)}
.pe-float-ic svg{width:22px;height:22px}
.pe-float-txt b{display:block;font-size:15px;color:var(--text);letter-spacing:-.01em}
.pe-float-txt span{display:block;font-size:12.5px;color:var(--text-mute);margin-top:2px}
.pe-float-val{margin-left:auto;text-align:right}
.pe-float-val b{display:block;font-size:15px;color:var(--green);font-weight:700}
.pe-float-val span{font-size:11.5px;color:var(--text-mute)}
@media (max-width:720px){.pe-float{left:12px;right:12px;min-width:0}}
/* ---- Prime ECN micro-interactions ---- */
@keyframes peBar{0%,100%{opacity:.4}30%{opacity:1;box-shadow:0 0 10px rgba(91,157,255,.7)}}
@keyframes peGlow{0%,100%{text-shadow:0 0 0 rgba(91,157,255,0)}50%{text-shadow:0 0 22px rgba(91,157,255,.45)}}
@keyframes peSheen{0%{left:-60%}55%,100%{left:135%}}
/* ================= FUNDING PAGE ================= */
/* ---- Methods (light, tabbed) ---- */
@keyframes payIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ---- Deposit calculator (dark, interactive) ---- */
@keyframes calcFlash{0%{color:#34d99b}100%{color:#fff}}
.calc-credited.flash{animation:calcFlash .55s ease}
/* ---- Important information (two-column: icon rows + image) ---- */
/* ================= FOREX PAGE ================= */
/* ---- Hero (dark; render bleeds from the disclaimer bar to the base) ---- */
.fx-hero{position:relative;min-height:min(780px,calc(100vh - var(--topbar-h,44px)));display:flex;align-items:center;padding:calc(var(--nav-h) + 30px) 0 44px;overflow:hidden;background:
  radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.32),transparent 60%),
  radial-gradient(60% 70% at 10% 6%,rgba(3,72,205,.20),transparent 58%),
  linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%)}
.fx-hero .acct-hero-bg::after{background:
  linear-gradient(90deg,rgba(4,6,14,.95) 0%,rgba(4,6,14,.74) 32%,rgba(4,6,14,.3) 58%,rgba(4,6,14,.06) 100%),
  linear-gradient(180deg,rgba(4,6,14,.5) 0%,transparent 24%,transparent 82%,rgba(4,6,14,.42) 100%)}
.fx-hero-copy-wrap{position:relative;z-index:2;width:100%}
.fx-hero-copy{max-width:560px}
.fx-hero .acct-hero-sub{max-width:520px}
/* right visual — absolute; render touches the disclaimer bar (top) and the banner base (bottom) */
.fx-hero-visual{position:absolute;top:0;right:0;bottom:0;width:min(760px,54%);z-index:1;pointer-events:none}
.fx-hero-stage{position:absolute;right:-2%;bottom:-1%;width:min(110%,760px);aspect-ratio:1/1;max-width:none}
.fx-hero-stage::before{content:"";position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(170,200,255,.48),rgba(60,120,255,.2) 44%,transparent 72%);filter:blur(6px);animation:fxHalo 7s ease-in-out infinite}
@keyframes fxHalo{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.fx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  -webkit-mask-image:radial-gradient(72% 82% at 50% 47%,#000 58%,rgba(0,0,0,0) 86%);mask-image:radial-gradient(72% 82% at 50% 47%,#000 58%,rgba(0,0,0,0) 86%);
  filter:drop-shadow(0 30px 56px rgba(0,20,70,.5))}
.fx-hero-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70%;height:60px;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,rgba(0,90,220,.36),transparent 72%)}
/* ---- Scale band (light, glass stat cards) ---- */
.fx-scale{background:radial-gradient(58% 60% at 88% 2%,rgba(0,71,187,.08),transparent 60%),radial-gradient(50% 60% at 6% 100%,rgba(22,233,215,.06),transparent 60%),var(--bg-light)}
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-stat{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);padding:34px 26px;text-align:center;box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.fx-stat:hover{transform:translateY(-5px);box-shadow:0 28px 58px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.95);border-color:#fff}
.fx-stat b{display:block;font-size:clamp(34px,4.6vw,50px);font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1;transition:color .3s}
.fx-stat:hover b{color:var(--blue)}
.fx-stat span{display:block;margin-top:13px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);font-weight:600}
/* ---- Currency pairs explorer (tinted bg so glass cards read) ---- */
.fx-pairs{background:radial-gradient(60% 58% at 86% 0%,rgba(0,71,187,.06),transparent 60%),radial-gradient(50% 60% at 8% 100%,rgba(22,233,215,.05),transparent 60%),var(--bg-light-2)}
.fx-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px}
.fx-cat{position:relative;text-align:left;cursor:pointer;border-radius:var(--radius-lg);padding:26px 26px 24px;
  background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -20px rgba(20,44,96,.2),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,background .3s}
.fx-cat:hover{transform:translateY(-4px);border-color:#fff;background:rgba(255,255,255,.56);box-shadow:0 18px 40px -24px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.95)}
.fx-cat.active{border-color:rgba(0,71,187,.55);background:rgba(255,255,255,.62);box-shadow:0 10px 26px -20px rgba(0,71,187,.28),inset 0 1px 0 rgba(255,255,255,.95)}
.fx-cat::after{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:3px;background:var(--blue);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .3s,transform .4s var(--ease)}
.fx-cat.active::after{opacity:1;transform:scaleX(1)}
.fx-cat .cat-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(0,71,187,.08);padding:5px 11px;border-radius:70px;margin-bottom:16px}
.fx-cat h3{font-size:20px;color:var(--text);letter-spacing:-.01em;margin-bottom:8px}
.fx-cat p{font-size:13.5px;color:var(--text-soft);line-height:1.55}
.fx-cat .cat-count{margin-top:16px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-mute)}
.fx-cat .cat-count svg{color:var(--blue)}
.fx-cat .cat-count b{color:var(--text);font-weight:700}
.fx-pairs .ta-spec-wrap{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);box-shadow:0 14px 40px -24px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9)}
.fx-pairs .ta-table{min-width:640px}
/* instrument marks — overlapping currency flags on forex, a single
   commodity icon on commodities */
.fx-pair-flags{position:relative;flex:none;width:50px;height:32px}
.fx-pair-flags img{
  position:absolute;top:50%;border-radius:50%;object-fit:cover;background:#fff;
  border:2px solid #fff;box-shadow:0 2px 7px rgba(20,44,96,.3);
  transition:transform .35s var(--ease);
}
.fx-pair-flags img:first-child{width:29px;height:29px;left:0;transform:translateY(-50%);z-index:1}
.fx-pair-flags img:last-child{width:25px;height:25px;right:0;transform:translateY(-50%);z-index:2}
.ta-table tbody tr:hover .fx-pair-flags img:first-child{transform:translateY(-50%) translateX(-2px)}
.ta-table tbody tr:hover .fx-pair-flags img:last-child{transform:translateY(-50%) translateX(2px)}
.fx-inst-ic{
  flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 2px 8px rgba(20,44,96,.26);transition:transform .35s var(--ease)
}
.fx-inst-ic img{display:block;width:100%;height:100%;object-fit:cover}
.ta-table tbody tr:hover .fx-inst-ic{transform:scale(1.08)}
.fx-pair-name{font-weight:700;color:var(--text);letter-spacing:-.01em}
.fx-pair-name em{display:block;font-style:normal;font-size:12px;color:var(--text-mute);font-weight:500;margin-top:1px}
.fx-px{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.fx-px.fup{animation:fxUp .7s ease}
.fx-px.fdown{animation:fxDown .7s ease}
@keyframes fxUp{0%{color:#0f9d6f}100%{color:var(--text)}}
@keyframes fxDown{0%{color:#e0483f}100%{color:var(--text)}}
.fx-spread-pill{display:inline-block;min-width:52px;text-align:center;font-weight:700;color:var(--blue);background:rgba(0,71,187,.08);padding:4px 12px;border-radius:70px;font-size:13px}
.fx-pairs .ta-table tbody tr{animation:fxRowIn .5s var(--ease) both}
.fx-pairs .ta-table tbody tr:nth-child(2){animation-delay:.05s}
.fx-pairs .ta-table tbody tr:nth-child(3){animation-delay:.1s}
.fx-pairs .ta-table tbody tr:nth-child(4){animation-delay:.15s}
.fx-pairs .ta-table tbody tr:nth-child(5){animation-delay:.2s}
.fx-pairs .ta-table tbody tr:nth-child(6){animation-delay:.25s}
@keyframes fxRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-pairs-note{margin-top:22px;text-align:center;font-size:12.5px;color:var(--text-mute)}
/* ---- Market hours (dark glassmorphic bento with glowing ray-line accents) ---- */
.fx-hours{background:radial-gradient(90% 68% at 50% 0%,rgba(0,46,138,.34),transparent 60%),linear-gradient(180deg,#04060e 0%,#060a18 52%,#04060e 100%);color:#fff}
/* the section owns its text colour: .h2 is near-black by default, so a dark
   section that relied on each page remembering .h2-light rendered the heading
   invisible, and .head-sub was dark grey on near-black either way */
.fx-hours .h2,.fx-hours .h2-light{color:#fff}
.fx-hours .head-sub{color:#a9b7cf}
/* leave an explicit .eyebrow-blue alone; this only rescues a bare .eyebrow */
.fx-hours .eyebrow:not(.eyebrow-blue){color:#93b6ff}
.fx-mh{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fx-mh-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:28px 28px 26px;min-height:216px;
  background:radial-gradient(130% 78% at 50% -14%,var(--ray,rgba(120,160,255,.2)),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.fx-mh-card::after{content:"";position:absolute;top:0;left:16%;right:16%;height:2px;border-radius:2px;background:var(--ray-line,rgba(120,160,255,.85));box-shadow:0 0 18px 1px var(--ray-line,rgba(120,160,255,.85));opacity:.9;transition:opacity .35s,left .45s var(--ease),right .45s var(--ease)}
.fx-mh-card:hover{transform:translateY(-4px);border-color:var(--ray-line,rgba(90,150,255,.4));box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.fx-mh-card:hover::after{left:6%;right:6%;opacity:1}
/* spans */
.fx-mh--wide{grid-column:span 2}
.fx-mh--full{grid-column:1 / -1;flex-direction:row;align-items:center;gap:40px}
.fx-mh--full .fx-mh-main{flex:1;min-width:0}
.fx-mh--full .fx-mh-viz{flex:1.35;min-width:0;margin-top:0;padding-top:0}
/* ray colours (per card) */
.fx-mh--teal{--ray:rgba(22,233,215,.2);--ray-line:rgba(22,233,215,.85)}
.fx-mh--blue{--ray:rgba(0,110,255,.28);--ray-line:rgba(80,150,255,.95)}
.fx-mh--purple{--ray:rgba(150,110,255,.22);--ray-line:rgba(160,120,255,.9)}
.fx-mh--green{--ray:rgba(16,200,140,.2);--ray-line:rgba(30,210,150,.9)}
.fx-mh--orange{--ray:rgba(255,170,60,.18);--ray-line:rgba(255,180,80,.9)}
/* header */
.fx-mh-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe0ff;transition:transform .4s var(--ease),color .3s,border-color .3s}
.fx-mh-card:hover .fx-mh-ic{transform:translateY(-2px);color:#fff;border-color:var(--ray-line)}
.fx-mh-ic svg{width:23px;height:23px}
.fx-mh-card h3{font-size:19px;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.fx-mh-card p{font-size:13.5px;line-height:1.55;color:#9fb0cc;max-width:380px}
.fx-mh-viz{margin-top:auto;padding-top:20px}
/* glass sub-panel */
.fx-mh-panel{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:13px 15px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 24/5 — live status */
.fx-mh-status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#c4cee0}
.fx-mh-status i{width:8px;height:8px;border-radius:50%;background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite;flex:none}
/* deep liquidity — live sessions */
.fx-mh-live{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.fx-mh-sess{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#aeb8cc;padding:8px 14px;border-radius:70px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:color .35s,background .35s,border-color .35s}
.fx-mh-sess i{width:7px;height:7px;border-radius:50%;background:#6d7893}
.fx-mh-sess.is-open{color:#fff;background:rgba(52,217,155,.1);border-color:rgba(52,217,155,.4)}
.fx-mh-sess.is-open i{background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite}
.fx-mh-clock-lbl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 14px;border-radius:70px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.16)}
.fx-mh-clock-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite}
/* any hour — live quote */
.fx-mh-quote{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx-mh-quote .q-sym{font-size:13px;font-weight:700;color:#fff}
.fx-mh-quote .q-r{text-align:right}
.fx-mh-quote .q-px{font-size:17px;font-weight:700;color:#eaf1ff;font-variant-numeric:tabular-nums}
.fx-mh-quote .q-chg{font-size:11.5px;font-weight:700}
.fx-mh-quote .q-chg.up{color:#34d99b}
.fx-mh-quote .q-chg.down{color:#ff6b6b}
/* catch every move — flowing sparkline */
.fx-mh-catch{display:flex;align-items:center;gap:12px}
.fx-mh-mv{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(52,217,155,.14);border:1px solid rgba(52,217,155,.35);color:#34d99b}
.fx-mh-mv svg{width:19px;height:19px}
.fx-mh-catch-t{font-size:13px;color:#c4cee0}
.fx-mh-catch-t b{color:#34d99b;font-weight:700;font-variant-numeric:tabular-nums}
/* react — live alert with ping */
.fx-mh-alert{display:flex;align-items:center;gap:12px;font-size:13px;color:#c4cee0}
.fx-mh-ping{position:relative;width:11px;height:11px;flex:none}
.fx-mh-ping i{position:absolute;inset:0;border-radius:50%;background:#ffb04e}
.fx-mh-ping::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #ffb04e}
.fx-mh-alert b{color:#fff;font-weight:700}
/* access 80+ pairs — live pair tiles */
.fx-mh-pairs{display:flex;gap:12px;flex-wrap:wrap}
.fx-mh-tile{flex:1;min-width:132px;display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s var(--ease),border-color .3s,background .3s}
.fx-mh-tile:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.45);background:rgba(255,255,255,.06)}
.fx-mh-tile .q-sym{font-size:12.5px;font-weight:700;color:#fff}
.fx-mh-tile .q-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fx-mh-tile .q-px{font-size:14px;font-weight:700;color:#eaf1ff;font-variant-numeric:tabular-nums}
.fx-mh-tile .q-chg{font-size:11px;font-weight:700}
.fx-mh-tile .q-chg.up{color:#34d99b}
.fx-mh-tile .q-chg.down{color:#ff6b6b}
.fx-mh-tile.more{flex:0 0 118px;align-items:center;justify-content:center;color:#7fb0ff;font-weight:700;font-size:13px;background:rgba(0,71,187,.16);border-color:rgba(0,120,255,.4)}
/* motion-safe loops */
@media (prefers-reduced-motion:no-preference){.fx-mh-mv{animation:fxMhRise 2.4s ease-in-out infinite}
@keyframes fxMhRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.fx-mh-ping::before{animation:fxMhPing 2.2s ease-out infinite}
@keyframes fxMhPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}}
@media (max-width:980px){.fx-mh{grid-template-columns:repeat(2,1fr)}
.fx-mh--wide{grid-column:span 2}
.fx-mh--full{grid-column:span 2;flex-direction:column;align-items:stretch;gap:22px}
.fx-mh--full .fx-mh-viz{width:100%}}
@media (max-width:640px){.fx-mh{grid-template-columns:1fr}
.fx-mh--wide,.fx-mh--full{grid-column:auto}
.fx-mh-tile{min-width:0}}
/* ---- Why trade forex (Figma: heading cell + 5 illustrated cards) ---- */
.fx-why{background:var(--bg-light)}
.fx-w2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* heading occupies the top-left cell */
.fx-w2-head{display:flex;flex-direction:column;justify-content:center;padding:6px 16px 6px 6px}
.fx-w2-head .eyebrow{margin-bottom:14px}
.fx-w2-head h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.12;color:var(--text)}
.fx-w2-head h2 .hl{color:var(--blue)}
/* card */
.fx-w2{display:flex;flex-direction:column;background:linear-gradient(180deg,#eff3fb,#e7edf7);border:1px solid #fff;border-radius:var(--radius-xl);padding:30px 30px 28px;box-shadow:inset 0 1px 0 #fff,0 16px 36px -28px rgba(20,44,96,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fx-w2:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 #fff,0 26px 52px -30px rgba(20,44,96,.45)}
.fx-w2-viz{position:relative;height:206px;margin-bottom:20px;display:grid;place-items:center}
.fx-w2 h3{font-size:20px;letter-spacing:-.02em;color:#0f1830;margin-bottom:8px}
.fx-w2 h3 .hl{color:var(--blue)}
.fx-w2 p{font-size:14px;color:var(--text-soft);line-height:1.5;max-width:340px;min-height:2.9em}
/* leverage card — chart bleeds to the card's left & right edges */
/* -30px clears the padding, the extra 1px clears the card's own border, so the
   chart meets both edges instead of stopping a hairline short */
.fx-w2--lev .fx-w2-viz{margin-left:-31px;margin-right:-31px;overflow:hidden}
.fx-w2--lev .fx-lv-chip{top:8px;left:30px}
/* access 80+ pairs — live watchlist panel */
.fx-pw{width:90%;max-width:280px;display:flex;flex-direction:column;gap:9px}
.fx-pw-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid #fff;box-shadow:0 10px 22px -15px rgba(20,44,96,.4),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
.fx-pw-row .q-sym{font-size:12.5px;font-weight:700;color:#0f1830}
.fx-pw-row .q-px{font-size:13px;font-weight:700;color:#0f1830;font-variant-numeric:tabular-nums}
.fx-pw-row .q-chg{font-size:11px;font-weight:700;min-width:52px;text-align:right}
.fx-pw-row .q-chg.up{color:#0f9d6f}
.fx-pw-row .q-chg.down{color:#e0483f}
.fx-pw-more{text-align:center;font-size:11.5px;font-weight:700;color:var(--blue);padding-top:2px}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fxPingR{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
/* 1 — Easy Transactions */
.fx-tx{position:relative;display:grid;place-items:center;width:100%;height:100%}
.fx-tx-ring{position:relative;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.95),rgba(224,233,247,.4) 58%,transparent 72%);margin-top:-12px}
.fx-tx-core{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(130% 130% at 50% 16%,#2074ff,#0740b8);box-shadow:0 20px 40px -14px rgba(0,71,187,.6),inset 0 1px 0 rgba(255,255,255,.3);color:#fff}
.fx-tx-core svg{width:40px;height:40px}
.fx-tx-badge{position:absolute;right:20px;bottom:22px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue);border:3px solid #eef3fb;color:#fff}
.fx-tx-badge svg{width:12px;height:12px}
.fx-tx-chip{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;background:#fff;padding:8px 14px;border-radius:11px;box-shadow:0 12px 26px -12px rgba(20,44,96,.45)}
.fx-tx-chip .ok{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.fx-tx-chip .ok svg{width:10px;height:10px}
.fx-tx-chip b{display:block;font-size:11px;color:#0f1830;font-weight:700;line-height:1.25}
.fx-tx-chip em{display:block;font-style:normal;font-size:9.5px;color:var(--text-mute);line-height:1.2}
/* 2 — Competitive Spreads */
.fx-cs{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-cs-meter{width:74%;max-width:236px;border-radius:16px;padding:22px 22px 18px;text-align:center;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(20,44,96,.3);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
.fx-cs-meter .sym{display:block;margin-top:16px;font-size:11px;color:var(--text-mute);font-weight:600}
.fx-cs-meter .big{font-size:34px;font-weight:800;color:#0f1830;letter-spacing:-.03em;line-height:1;margin-bottom:18px}
.fx-cs-meter .big em{font-style:normal;font-size:14px;color:var(--blue);font-weight:700;margin-left:5px}
.fx-cs-bars{display:flex;gap:8px}
.fx-cs-bars span{flex:1;height:6px;border-radius:4px;background:linear-gradient(90deg,#1e4fb8,#5b9dff)}
.fx-cs-chip{position:absolute;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#0f1830;background:#fff;padding:7px 11px;border-radius:10px;box-shadow:0 10px 22px -12px rgba(20,44,96,.4)}
.fx-cs-chip .ok{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.fx-cs-chip .ok svg{width:10px;height:10px}
.fx-cs-chip.c1{top:0;right:0}
.fx-cs-chip.c2{top:0;left:0}
.fx-cs-chip.c3{bottom:4px;right:18px}
/* 3 — Ultra-Fast Execution */
.fx-uf{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-uf-core{position:relative;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#eaf1fb);box-shadow:0 20px 44px -18px rgba(20,44,96,.4),inset 0 1px 0 #fff;display:grid;place-items:center;color:var(--blue)}
.fx-uf-core svg{width:44px;height:44px}
.fx-uf-speed{position:absolute;right:calc(50% + 44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fx-uf-speed i{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#2f6bde)}
.fx-uf-speed i:nth-child(1){width:30px}
.fx-uf-speed i:nth-child(2){width:50px}
.fx-uf-speed i:nth-child(3){width:38px}
.fx-uf-speed i:nth-child(4){width:56px}
.fx-uf-speed i:nth-child(5){width:28px}
/* 4 — Flexible Leverage */
.fx-lv{position:relative;width:100%;height:100%}
.fx-lv svg{position:absolute;inset:0;width:100%;height:100%}
.fx-lv .area{fill:rgba(59,123,255,.14)}
.fx-lv .ln{fill:none;stroke:#0740b8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fx-lv .dot{fill:#0740b8;filter:drop-shadow(0 0 5px rgba(7,64,184,.6))}
.fx-lv-chip{position:absolute;top:4px;left:4px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#0f1830;background:#fff;padding:7px 13px;border-radius:70px;box-shadow:0 10px 22px -12px rgba(20,44,96,.4)}
.fx-lv-chip i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* 5 — 24/7 Multilingual Support */
.fx-su{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-su-core{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(130% 130% at 50% 18%,#2074ff,#0740b8);color:#fff;box-shadow:0 20px 40px -16px rgba(0,71,187,.55)}
.fx-su-core svg{width:36px;height:36px}
.fx-su-core::before,.fx-su-core::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(0,71,187,.22)}
.fx-su-core::before{width:152%;height:152%}
.fx-su-core::after{width:214%;height:214%}
.fx-su-ch{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 12px 26px -12px rgba(20,44,96,.4)}
.fx-su-ch svg{width:20px;height:20px}
.fx-su-ch.mail{left:4%;top:32%;color:#1f2a3d}
.fx-su-ch.x{right:8%;top:10%;color:#0f1830}
.fx-su-ch.gm{right:12%;bottom:18%}
/* micro-interactions — calm, purposeful, motion-safe */
@media (prefers-reduced-motion:no-preference){.fx-tx-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,71,187,.4);animation:fxPingR 2.8s ease-out infinite}
.fx-tx-badge{animation:fxPop 2.8s ease-in-out infinite}
.fx-tx-chip{animation:fxTxFloat 5s ease-in-out infinite}
@keyframes fxTxFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@keyframes fxPop{0%,58%,100%{transform:scale(1)}70%{transform:scale(1.16)}}
.fx-cs-bars span{animation:fxCsBar 1.9s ease-in-out infinite}
.fx-cs-bars span:nth-child(2){animation-delay:.16s}
.fx-cs-bars span:nth-child(3){animation-delay:.32s}
.fx-cs-bars span:nth-child(4){animation-delay:.48s}
@keyframes fxCsBar{0%,100%{opacity:.4}35%{opacity:1;box-shadow:0 0 10px rgba(91,157,255,.7)}}
.fx-cs-chip.c1{animation:fxFloat 5.4s ease-in-out infinite}
.fx-cs-chip.c2{animation:fxFloat 5s ease-in-out infinite -1.4s}
.fx-cs-chip.c3{animation:fxFloat 5.8s ease-in-out infinite -2.2s}
.fx-uf-speed i{animation:fxSpeed 1.5s ease-in-out infinite}
.fx-uf-speed i:nth-child(1){animation-delay:0s}
.fx-uf-speed i:nth-child(2){animation-delay:.12s}
.fx-uf-speed i:nth-child(3){animation-delay:.24s}
.fx-uf-speed i:nth-child(4){animation-delay:.36s}
.fx-uf-speed i:nth-child(5){animation-delay:.48s}
@keyframes fxSpeed{0%{opacity:.2;transform:translateX(7px)}50%{opacity:1;transform:translateX(0)}100%{opacity:.2;transform:translateX(7px)}}
.fx-su-core::before{animation:fxPingR 3s ease-out infinite}
.fx-su-core::after{animation:fxPingR 3s ease-out infinite 1.5s}
.fx-su-ch.mail{animation:fxFloat 5s ease-in-out infinite}
.fx-su-ch.x{animation:fxFloat 5.6s ease-in-out infinite -1.6s}
.fx-su-ch.gm{animation:fxFloat 5.2s ease-in-out infinite -2.6s}}
/* ---- Explore other products (image cards) ---- */
.fx-more{background:radial-gradient(56% 60% at 90% 4%,rgba(0,71,187,.06),transparent 60%),var(--bg-light-2)}
.fx-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fx-more-card{display:flex;flex-direction:column;text-decoration:none}
.fx-more-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:640/349;box-shadow:0 14px 34px -22px rgba(20,44,96,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fx-more-card:hover .fx-more-media{transform:translateY(-6px);box-shadow:0 30px 58px -28px rgba(20,44,96,.5)}
.fx-more-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s var(--ease)}
.fx-more-card:hover .fx-more-media img{transform:scale(1.04)}
.fx-more-desc{margin-top:18px;font-size:14.5px;color:var(--text-soft);line-height:1.5;min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-more-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between}
.fx-more-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:#e9eef4;padding:8px 13px;border-radius:9px}
.fx-more-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:rgba(0,71,187,.09);transition:background .3s,color .3s,transform .3s}
.fx-more-go svg{width:15px;height:15px}
.fx-more-card:hover .fx-more-go{background:var(--blue);color:#fff;transform:translateX(3px)}
/* ---- FAQ (white) ---- */
.fx-faq{background:#fff}
@media (max-width:1080px){.fx-stats{grid-template-columns:repeat(2,1fr)}
.fx-more-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.fx-w2-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.fx-hero{display:block;min-height:auto;padding:calc(var(--nav-h) + 30px) 0 0;text-align:center}
.fx-hero .acct-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.72) 0%,transparent 26%,rgba(4,6,14,.5) 80%,#04060e 100%)}
.fx-hero-copy{max-width:620px;margin:0 auto}
.fx-hero .acct-hero-sub{margin-inline:auto}
.acct-hero-cta{justify-content:center}
.fx-hero-visual{position:static;width:100%;max-width:520px;height:auto;margin:14px auto 0;pointer-events:auto}
.fx-hero-stage{position:relative;right:auto;bottom:auto;margin:0 auto;width:100%;aspect-ratio:1/1}
.fx-mh{grid-template-columns:repeat(2,1fr)}
.fx-mh--a,.fx-mh--b,.fx-mh--c,.fx-mh--d,.fx-mh--e{grid-column:span 1}
.fx-mh--b{grid-column:span 2}}
@media (max-width:720px){.fx-cats{grid-template-columns:1fr;gap:14px}
.fx-stats{gap:14px}
.fx-mh{grid-template-columns:1fr}
.fx-mh--a,.fx-mh--b,.fx-mh--c,.fx-mh--d,.fx-mh--e{grid-column:auto}
.fx-w2-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
@media (max-width:560px){.fx-stats{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
.fx-more-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
.fx-hero-visual{max-width:400px}}
/* ================= HOW-TO-TRADE STEPS (shared component) ================= */
.htrade-sec{background:radial-gradient(60% 60% at 92% 0%,rgba(0,71,187,.05),transparent 60%),var(--bg-light)}
.htrade{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:stretch}
.htrade-intro,.htrade-steps{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:0 18px 44px -34px rgba(20,44,96,.45);
}
.htrade-intro{display:flex;flex-direction:column;justify-content:center;padding:46px 44px}
.htrade-title{font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--text)}
.htrade-title span{color:#b3bcc9}
.htrade-sub{margin-top:20px;font-size:15.5px;color:var(--text-soft)}
.htrade-btn{align-self:flex-start;margin-top:38px;padding-right:9px;gap:16px}
.htrade-go{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);transition:transform .45s var(--ease),background .3s;
}
.htrade-go svg{width:15px;height:15px}
.htrade-btn:hover .htrade-go{transform:translateX(3px);background:rgba(255,255,255,.28)}
.htrade-steps{position:relative;list-style:none;margin:0;padding:34px 42px 34px 40px;display:flex;flex-direction:column;justify-content:center;gap:6px}
/* progress rail behind the number pills — filled on scroll */
/* connector rail — spans first pill centre to last pill centre (measured in JS) */
.htrade-steps::before,.htrade-steps::after{
  content:"";position:absolute;left:var(--htrade-x,66px);top:var(--htrade-y,52px);
  width:2px;height:var(--htrade-h,0);margin-left:-1px;border-radius:2px;
}
.htrade-steps::before{background:var(--line)}
.htrade-steps::after{
  background:linear-gradient(180deg,var(--blue),#5b9dff);
  transform:scaleY(var(--htrade-rail,0));transform-origin:top;
}
.htrade-step{position:relative;z-index:1;display:flex;align-items:flex-start;gap:22px;padding:18px 16px;border-radius:18px;
  transition:background .35s var(--ease),transform .4s var(--ease)}
.htrade-step:hover,.htrade-step.is-on{background:rgba(0,71,187,.045);transform:translateX(4px)}
.htrade-num{
  flex:none;width:54px;height:38px;border-radius:70px;display:grid;place-items:center;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text-mute);
  background:#fff;border:1px solid var(--line);font-variant-numeric:tabular-nums;
  transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease),box-shadow .35s;
}
.htrade-step:hover .htrade-num,.htrade-step.is-on .htrade-num{
  background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06);
  box-shadow:0 12px 26px -12px rgba(0,71,187,.7);
}
.htrade-txt h3{font-size:19px;letter-spacing:-.02em;color:var(--text);margin-bottom:6px;transition:color .3s}
.htrade-step:hover .htrade-txt h3,.htrade-step.is-on .htrade-txt h3{color:var(--blue)}
.htrade-txt p{font-size:14.5px;line-height:1.55;color:var(--text-soft);max-width:52ch}
/* ================= COMMODITIES PAGE ================= */
/* ================= LEARN CARD (shared: dark takeaway card) ================= */
/* right-hand illustration — the asset's plate is crushed to true black and
   screen-blended, so it composites onto the card with no visible edge.
   The mask only feathers the outermost dashed guides. */
.learn-viz{position:relative;display:grid;place-items:center}
.learn-viz img{
  display:block;width:min(162%,790px);height:auto;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,#000 62%,transparent 100%);
  mask-image:radial-gradient(78% 78% at 50% 50%,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){.learn-viz img{animation:learnFloat 7s ease-in-out infinite}}
@keyframes learnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* ---- Account tiers visual (Why card 6) ---- */
@media (max-width:1080px){.htrade{grid-template-columns:1fr;gap:20px}
.htrade-intro{padding:40px 38px}
.htrade-title br{display:none}
.htrade-title span{margin-left:.28em}}
@media (max-width:900px){.learn-viz{order:-1}
.learn-viz img{width:min(72%,330px)}}
@media (max-width:720px){.htrade-intro{padding:34px 26px}
.htrade-steps{padding:22px 22px 22px 20px}
.htrade-step{gap:16px;padding:15px 10px}
.htrade-num{width:48px;height:34px;font-size:13px}
.htrade-btn{align-self:stretch;justify-content:space-between}}
/* ================= COMPANY PAGE ================= */
/* ---- Scroll reveals (robust — never leaves content hidden; no-JS shows everything) ---- */
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js-reveal .reveal{opacity:1 !important;transform:none !important;transition:none}}
/* Shared section sub-heading */
.head-sub{max-width:600px;margin:14px auto 0;font-size:clamp(14.5px,1.4vw,16px);color:var(--text-soft);line-height:1.65}
.head:not(.center) .head-sub{margin-inline:0}
/* ---- Trade & shine (dark bento with colored ray-lines) ---- */
/* ---- Hero (center-aligned, blue-wave banner image) ---- */
.co-ghost{color:#e7eefc;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.co-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.09)}
/* ---- Banner live-market ticker (scrolling pills) ---- */
.hero-ticker{position:relative;z-index:3;margin-top:52px;overflow:hidden;padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero-ticker-track{display:flex;gap:14px;width:max-content;will-change:transform}
.mkt-pill{display:flex;align-items:center;gap:12px;flex:none;padding:9px 9px 9px 12px;border-radius:60px;text-decoration:none;background:rgba(12,16,26,.6);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);transition:border-color .25s,background .25s,transform .3s}
.mkt-pill:hover{border-color:rgba(90,150,255,.42);background:rgba(16,22,36,.76);transform:translateY(-2px)}
.mkt-flags{position:relative;width:48px;height:34px;flex:none}
.mkt-flags img{position:absolute;top:50%;border-radius:50%;object-fit:cover;background:#0c1017;border:2px solid #10141c;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.mkt-flags img:first-child{width:30px;height:30px;left:0;transform:translateY(-50%);z-index:1}
.mkt-flags img:last-child{width:26px;height:26px;right:0;transform:translateY(-50%);z-index:2}
.mkt-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mkt-txt b{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.01em;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-txt em{font-style:normal;font-size:12px;color:#98a4bb;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
.mkt-dir{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff}
.mkt-dir.down{background:#e5484d}
.mkt-dir.up{background:#12b76a}
.mkt-dir svg{width:16px;height:16px}
.mkt-trade{flex:none;font-size:13px;font-weight:600;color:#fff;padding:9px 18px;border-radius:60px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .25s,border-color .25s}
.mkt-pill:hover .mkt-trade{background:var(--blue);border-color:transparent}
@media (max-width:720px){.hero-ticker{display:none}}
/* ---- Key stats bento (its own light section below the hero) ---- */
/* ---- Global presence (interactive map) ---- */
/* regulator selector (dropdown) */
.co-geo{display:flex;justify-content:center;align-items:stretch;gap:12px;margin-top:30px;flex-wrap:wrap}
.co-geo-select{position:relative;width:330px;max-width:100%}
.co-geo-btn{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -18px rgba(20,44,96,.3);cursor:pointer;text-align:left;transition:border-color .25s,box-shadow .25s}
.co-geo-btn:hover{border-color:#c3d2ea;box-shadow:0 16px 36px -18px rgba(20,44,96,.36)}
.co-geo-select.is-open .co-geo-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,71,187,.12)}
.co-geo-flag{width:30px;height:21px;border-radius:5px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.24);flex:none}
.co-geo-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.co-geo-txt b{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.co-geo-txt em{font-style:normal;font-size:12.5px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-geo-caret{width:18px;height:18px;color:var(--text-mute);flex:none;transition:transform .3s var(--ease)}
.co-geo-select.is-open .co-geo-caret{transform:rotate(180deg)}
.co-geo-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 26px 60px -24px rgba(20,44,96,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;max-height:320px;overflow:auto}
.co-geo-select.is-open .co-geo-list{opacity:1;visibility:visible;transform:none}
.co-geo-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:background .2s}
.co-geo-opt:hover{background:var(--bg-light)}
.co-geo-opt.is-active{background:rgba(0,71,187,.08)}
.co-geo-opt img{width:26px;height:19px;border-radius:4px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.2);flex:none}
.co-geo-opt span{display:flex;flex-direction:column;line-height:1.25}
.co-geo-opt b{font-size:14px;font-weight:700;color:var(--text)}
.co-geo-opt em{font-style:normal;font-size:12px;color:var(--text-mute)}
.co-geo-cta{border-radius:16px}
.co-geo-note{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text-mute);text-align:center}
.co-geo-note svg{width:15px;height:15px;color:var(--green);flex:none}
.co-geo-full{color:var(--text-soft);font-weight:600}
@keyframes coPing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* stats with icons */
.co-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.co-stat{text-align:center;border-radius:var(--radius-lg);padding:30px 20px 26px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 34px -20px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.co-stat:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 26px 54px -26px rgba(20,44,96,.3)}
.co-stat-ic{width:46px;height:46px;margin:0 auto 16px;border-radius:13px;display:grid;place-items:center;background:rgba(0,71,187,.09);color:var(--blue)}
.co-stat-ic svg{width:23px;height:23px}
.co-stat .n{font-size:clamp(32px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.co-stat .n .suf{color:var(--blue)}
.co-stat .l{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
/* ---- Shared card grid (asset classes, advantages, risk) ---- */
.co-grid{display:grid;gap:22px}
.co-g3{grid-template-columns:repeat(3,1fr)}
.co-g2{grid-template-columns:repeat(2,1fr)}
.co-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:28px 28px 26px;text-decoration:none;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 34px -20px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.co-card:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 28px 58px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.95)}
.co-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(0,71,187,.09);color:var(--blue);margin-bottom:18px;transition:transform .4s var(--ease),background .3s,color .3s}
.co-card:hover .co-ic{transform:translateY(-3px) scale(1.05)}
.co-ic svg{width:23px;height:23px}
.co-card h3{font-size:19px;color:var(--text);letter-spacing:-.01em;margin-bottom:8px}
.co-card p{font-size:14px;color:var(--text-soft);line-height:1.6;flex:1}
.co-card .more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue)}
.co-bignum{font-size:44px;font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1}
/* dark accent card */
.co-card.dark{background:radial-gradient(130% 80% at 50% -10%,rgba(0,90,220,.4),transparent 60%),linear-gradient(180deg,#0a1020,#0f1a3a 70%);border:1px solid rgba(90,150,255,.26);box-shadow:0 26px 60px -34px rgba(0,60,180,.6)}
.co-card.dark h3{color:#fff}
.co-card.dark p{color:#c4cee0}
.co-card.dark .co-ic{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#8fb8ff}
.co-card.dark .more{color:#8fb8ff}
/* ---- Vision / Mission (dark, editorial split) ---- */
/* ---- STAR values (elevated gradient tiles + connector) ---- */
/* ---- In the world (events / sponsorships gallery) ---- */
/* ---- Trust band (peace of mind) ---- */
@keyframes trPing{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.95)}}
@keyframes trFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ---- Risk note ---- */
@media (max-width:1080px){.co-statstrip{grid-template-columns:repeat(2,1fr)}
.co-g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.co-geo{flex-direction:column;align-items:center}
.co-geo-select,.co-geo-cta{width:330px;max-width:100%}
.co-geo-cta{justify-content:center}}
@media (max-width:620px){.co-g3,.co-g2{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* ================= GLOSSARY ================= */
/* the filter toggles [hidden]; an explicit display: would otherwise beat the UA rule */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* frosted surface used across the glossary (light contexts) */
/* the shared card surface — solid white everywhere, one look site-wide */
/* the shared card surface — frosted glass, one look site-wide */
.glass{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 18px 40px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.96);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.94)}}
/* one hover for every card on every page — do not redefine it per component */
.u-hover,.kc-guide{
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.u-hover:hover,.kc-guide:hover{
  transform:translateY(-4px);
  border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff;
}
/* ---- Hero: same blue-on-black gradient as the forex/commodities heroes ---- */
.gl-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 56px;
  background:
    radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.32),transparent 60%),
    radial-gradient(60% 70% at 10% 6%,rgba(3,72,205,.2),transparent 58%),
    linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%);
}
.gl-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(52px)}
.gl-orb.o1{width:460px;height:460px;top:-170px;left:-110px;background:radial-gradient(closest-side,rgba(40,110,255,.5),transparent 72%)}
.gl-orb.o2{width:380px;height:380px;bottom:-180px;right:-70px;background:radial-gradient(closest-side,rgba(22,233,215,.16),transparent 72%)}
.gl-orb.o3{width:340px;height:340px;top:28%;right:20%;background:radial-gradient(closest-side,rgba(90,150,255,.22),transparent 70%)}
.gl-hero-inner{position:relative;z-index:1;max-width:820px}
.gl-hero-title{font-size:clamp(33px,5vw,54px);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin-top:14px}
.gl-hero-sub{margin:18px auto 0;max-width:620px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.62;color:#d3e0f5}
/* ---- Body: soft mesh so the frosted cards have something to blur ---- */
.gl-empty-ic{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,71,187,.08);color:var(--blue);
}
.gl-empty-ic svg{width:28px;height:28px}
/* ---- Term page ---- */
.gt-rel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:12px;text-decoration:none;
  transition:background .25s,transform .35s var(--ease);
}
.gt-rel:hover{background:rgba(0,71,187,.07);transform:translateX(3px)}
.gt-rel b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.01em;transition:color .25s}
.gt-rel:hover b{color:var(--blue)}
.gt-rel svg{width:14px;height:14px;flex:none;color:var(--blue);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .3s var(--ease)}
.gt-rel:hover svg{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:no-preference){.gl-orb.o1{animation:glOrb 15s ease-in-out infinite}
.gl-orb.o2{animation:glOrb 19s ease-in-out infinite reverse}
.gl-orb.o3{animation:glOrb 23s ease-in-out infinite}}
@keyframes glOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-22px,0) scale(1.1)}}
@media (max-width:720px){.gl-hero{min-height:auto;padding:calc(var(--nav-h) + 52px) 0 60px}}
/* ================= WEBINARS PAGE ================= */
/* ---- Hero (dark; copy + next-session card) ---- */
.wb-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 62px) 0 44px;
  background:
    radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.26),transparent 60%),
    linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%);
}
/* banner film — over-height and top-anchored so the footage's lower band
   (which carries another brand's scheme marks) is cropped away entirely */
.wb-hero-video{
  position:absolute;top:0;left:0;z-index:-2;width:100%;height:132%;
  object-fit:cover;object-position:50% 0;pointer-events:none;
  filter:brightness(1.16) saturate(1.06);
}
.wb-hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;background:
    linear-gradient(90deg,rgba(4,6,14,.9) 0%,rgba(4,6,14,.7) 30%,rgba(4,6,14,.36) 62%,rgba(4,6,14,.1) 100%),
    linear-gradient(180deg,rgba(4,6,14,.6) 0%,rgba(4,6,14,.04) 22%,rgba(4,6,14,.12) 56%,rgba(4,6,14,.86) 92%,#04060e 100%);
}
/* banner copy is centred on the same axis as the session strip below it */
.wb-hero-inner{position:relative;z-index:1;width:100%;text-align:left}
.wb-h1{font-size:clamp(38px,6.4vw,74px);font-weight:800;letter-spacing:-.038em;line-height:1.02;margin-top:12px}
.wb-lead{margin:18px 0 0;max-width:53ch;font-size:clamp(15px,1.55vw,17.5px);line-height:1.62;color:#c9d5ea}
.wb-hact{display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap;margin-top:30px}
@media (prefers-reduced-motion:no-preference){@keyframes wbTick{from{opacity:.4;transform:translateY(-2px)}to{opacity:1;transform:none}}}
/* ---- Schedule (light, frosted cards) ---- */
.wb-status{min-height:22px;margin:18px 0 6px;text-align:center;font-size:13px;color:var(--text-mute)}
.wb-textlink{margin-top:16px;align-self:flex-start}
.wb-textlink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue);cursor:pointer}
.wb-textlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.wb-textlink:hover svg{transform:translateX(4px)}
.wb-textlink--lg{font-size:15px}
/* ---- Curriculum bento (reuses the dark market-hours cards) ---- */
/* ---- Presenters ---- */
/* ---- Subscribe (dark, validated form) ---- */
.wb-tick{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:rgba(0,71,187,.32);color:#8fd6b4}
.wb-tick svg{width:14px;height:14px}
.wb-selwrap select{
  width:100%;font:inherit;font-size:14.5px;color:#fff;padding:13px 15px;border-radius:13px;
  background:rgba(4,8,18,.5);border:1px solid rgba(255,255,255,.14);outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.wb-selwrap select:focus{border-color:rgba(110,170,255,.7);background:rgba(4,8,18,.66);box-shadow:0 0 0 4px rgba(0,71,187,.28)}
.wb-selwrap{position:relative}
.wb-selwrap select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.wb-selwrap select option{background:#0b1224;color:#fff}
.wb-selchev{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#9db3d6;pointer-events:none}
/* ---- Explore more (3 cards) ---- */
.wb-more .fx-more-grid{grid-template-columns:repeat(3,1fr)}
/* ---- Responsive ---- */
/* short windows: tighten the banner so it collapses to the same height as the
   product-page banners instead of being propped open by the countdown box */
@media (min-width:721px) and (max-height:880px){.wb-hero{padding:calc(var(--nav-h) + 30px) 0 30px}
.wb-h1{font-size:clamp(34px,5vw,58px)}
.wb-lead{margin-top:14px}
.wb-hact{margin-top:22px}}
@media (max-width:1080px){.wb-more .fx-more-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.wb-hero{min-height:auto;padding:calc(var(--nav-h) + 46px) 0 52px}}
@media (max-width:560px){.wb-more .fx-more-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}}
/* ================= ECONOMIC CALENDAR PAGE ================= */
/* ---- Calendar section (live third-party feed) ---- */
@keyframes ecPing{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
/* ---- Reading the calendar: the market-hours bento, with a calendar legend ---- */
/* ---- Responsive ---- */
/* ---- Why-card additions for features the product pages don't cover.
   Same vocabulary as .fx-tx / .fx-cs / .fx-su: white chips on soft shadow,
   the blue gradient disc, frosted panels — only the composition is new. ---- */
@media (prefers-reduced-motion:no-preference){@keyframes fxSvWave{0%{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(.72)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(1.08)}}
@keyframes fxSvBar{0%,100%{opacity:.42}45%{opacity:1;box-shadow:0 0 9px rgba(91,157,255,.75)}}
@keyframes fxLqDepth{0%,100%{width:calc(var(--w) * .72);opacity:.75}50%{width:var(--w);opacity:1}}}
/* ================= NEWS ROOM PAGE ================= */
/* ---- Lead story ---- */
/* ---- The latest ---- */
.nr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* frosted card: meta header, copy, then the still filling the foot */
.nr-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.nr-card:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.nr-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.nr-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.nr-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.nr-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.nr-body{display:flex;flex-direction:column;padding:17px 18px 19px}
.nr-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.nr-h a{transition:color .25s}
.nr-card:hover .nr-h a{color:var(--blue)}
.nr-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nr-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)}
/* the still sits flush to the card's lower edge, corners clipped by the card */
.nr-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.nr-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.nr-card:hover .nr-media img{transform:scale(1.05)}
.nr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.nr-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.nr-readmark svg{width:15px;height:15px}
.nr-card:hover .nr-readmark{transform:translate(2px,-2px);background:#fff}
.nr-morerow{display:flex;justify-content:center;margin-top:44px}
.nr-morerow .btn svg{transition:transform .3s var(--ease)}
.nr-morerow .btn:hover svg{transform:translateY(2px)}
/* ---- In the spotlight ---- */
/* ---- Subscribe bar ---- */
.nr-sub{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(26px,3vw,44px);border-radius:var(--radius-xl);
}
.nr-sub-h{margin-top:12px;font-size:clamp(21px,2.3vw,29px);font-weight:800;letter-spacing:-.028em;line-height:1.16;color:var(--text)}
.nr-sub-copy p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.nr-sub-field{display:flex;gap:10px;flex-wrap:wrap}
.nr-sub-field input{
  flex:1 1 220px;min-width:0;font:inherit;font-size:14.5px;color:var(--text);
  padding:14px 16px;border-radius:70px;background:#fff;border:1px solid var(--line);outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.nr-sub-field input:focus{border-color:rgba(0,71,187,.5);box-shadow:0 0 0 4px rgba(0,71,187,.12)}
.nr-sub-field.is-bad input{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 4px rgba(239,68,68,.14)}
.nr-sub-field .btn{flex:none}
.nr-err{margin-top:9px;font-size:12.5px;color:#c0392f}
.nr-sub-ok{margin-top:11px;font-size:13.5px;font-weight:600;color:#0f7d5c}
.nr-sub-note{margin-top:11px;font-size:12px;line-height:1.55;color:var(--text-mute)}
/* ---- Responsive ---- */
@media (max-width:1080px){.nr-grid{grid-template-columns:repeat(2,1fr)}
.nr-sub{grid-template-columns:1fr}}
@media (max-width:720px){.nr-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* ================= NEWS ARTICLE PAGE ================= */
/* TOC rail on the left, article column on the right, both centred as a unit */
.ar{--ar-measure:min(760px,100%);--ar-rail:224px;background:#fff}
.ar-progress{position:fixed;top:calc(var(--topbar-h,44px) + var(--nav-h) - 3px);left:0;right:0;height:3px;z-index:899;pointer-events:none;background:rgba(20,44,96,.08)}
.ar-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#5b9dff);box-shadow:0 0 12px rgba(0,71,187,.55);transition:width .12s linear}
.ar-wrap{padding:calc(var(--nav-h) + 40px) 0 clamp(34px,4vw,54px);margin-top:calc(-1 * var(--nav-h))}
.ar-cols{
  display:grid;grid-template-columns:var(--ar-rail) var(--ar-measure);
  gap:clamp(26px,3.2vw,52px);align-items:start;justify-content:center;
}
/* left rail */
.ar-rail{position:sticky;top:calc(var(--chrome-h) + 26px);display:flex;flex-direction:column;gap:22px}
.ar-toc{--toc-pad:clamp(18px,2vw,26px);padding-right:var(--toc-pad);border-right:1px solid var(--line)}
.ar-toc nav{display:flex;flex-direction:column;gap:2px}
.ar-toc a{
  position:relative;padding:9px 0;font-size:14px;line-height:1.4;color:var(--text-mute);
  transition:color .25s;
}
.ar-toc a::after{
  content:"";position:absolute;right:calc(-1 * var(--toc-pad) - 1px);top:6px;bottom:6px;width:2px;border-radius:2px;
  background:transparent;transition:background .25s;
}
.ar-toc a:hover{color:var(--text)}
.ar-toc a.is-on{color:var(--blue);font-weight:600}
.ar-toc a.is-on::after{background:var(--blue)}
.ar-extras{display:flex;flex-direction:column;gap:14px}
.ar-side-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.ar-key,.ar-sub{padding:16px 16px 18px;border-radius:16px}
.ar-key ul{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.ar-key li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.ar-key li:last-child{border-bottom:none}
.ar-key span{font-size:12.5px;color:var(--text-soft)}
.ar-key b{font-size:13.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.ar-key-note{margin-top:9px;font-size:11px;color:var(--text-mute)}
.ar-sub p{margin:9px 0 14px;font-size:13px;line-height:1.55;color:var(--text-soft)}
/* article column */
.ar-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.ar-crumb a{padding:6px 12px;border-radius:70px;background:var(--bg-light);color:var(--text-soft);transition:background .25s,color .25s}
.ar-crumb a:hover{background:rgba(0,71,187,.1);color:var(--blue)}
.ar-h1{margin-top:22px;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.032em;line-height:1.12;color:var(--text)}
.ar-stand{margin-top:16px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;color:var(--text-soft)}
.ar-byline{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;margin-top:26px}
.ar-author{display:flex;align-items:center;gap:12px}
.ar-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 2px 10px rgba(20,44,96,.24)}
.ar-author-tx b{display:block;font-size:14.5px;color:var(--blue);letter-spacing:-.01em}
.ar-author-tx em{display:block;font-style:normal;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.ar-share{display:flex;align-items:center;gap:8px}
.ar-sh{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  color:var(--text-soft);background:var(--bg-light);border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s,transform .3s var(--ease);
}
.ar-sh svg{width:16px;height:16px}
.ar-sh:hover{color:var(--blue);border-color:rgba(0,71,187,.4);background:#fff;transform:translateY(-2px)}
.ar-copied{font-size:12px;font-weight:600;color:#0f7d5c}
.ar-fig{margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;background:#0b1220;border:1px solid var(--line)}
/* 16:9 matches the supplied artwork, so nothing is cropped */
.ar-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ar-fig figcaption{padding:12px 16px;font-size:12.5px;line-height:1.5;color:var(--text-mute);background:#fff;border-top:1px solid var(--line)}
/* prose */
.ar-body{margin-top:clamp(26px,3vw,36px);min-width:0;font-size:16.5px;line-height:1.78;color:var(--text-soft)}
.ar-lede{font-size:18px;line-height:1.7;color:var(--text)}
.ar-body p+p{margin-top:18px}
.ar-body h2{
  margin-top:42px;font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.026em;line-height:1.22;color:var(--text);
  scroll-margin-top:calc(var(--chrome-h) + 22px);
}
.ar-body h2+p{margin-top:14px}
.ar-body a{color:var(--blue);font-weight:600}
.ar-body a:hover{text-decoration:underline;text-underline-offset:3px}
.ar-levels{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.ar-levels li{
  display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:15px 18px;border-radius:14px;background:var(--bg-light);border:1px solid var(--line);
  transition:border-color .25s,transform .3s var(--ease);
}
.ar-levels li:hover{border-color:rgba(0,71,187,.28);transform:translateX(3px)}
.ar-levels b{font-size:17px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ar-levels span{font-size:14.5px;line-height:1.6}
.ar-quote{position:relative;margin:34px 0 0;padding:26px 28px 26px 30px;border-radius:18px;background:var(--bg-light);overflow:hidden}
.ar-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue),#5b9dff)}
.ar-quote p{font-size:17.5px;line-height:1.62;font-weight:600;color:var(--text);letter-spacing:-.012em}
.ar-quote cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.ar-note{margin-top:38px;padding:20px 22px;border-radius:16px;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.18)}
.ar-note b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#b0342f;margin-bottom:8px}
.ar-note p{font-size:13.5px;line-height:1.65;color:var(--text-soft)}
.ar-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.ar-tags-l{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.ar-tag{
  font-size:12.5px;font-weight:600;color:var(--text-soft);padding:7px 13px;border-radius:70px;
  background:var(--bg-light);border:1px solid var(--line);transition:color .25s,border-color .25s,transform .3s var(--ease);
}
.ar-tag:hover{color:var(--blue);border-color:rgba(0,71,187,.38);transform:translateY(-2px)}
/* prev / next */
.ar-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:clamp(30px,3.6vw,44px) 0 0}
.ar-pg{
  display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;
  background:var(--bg-light);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.ar-pg:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ar-pg .dir{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.ar-pg .dir svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.ar-pg:hover .dir svg{transform:translateX(-3px)}
.ar-pg .ttl{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.015em;line-height:1.35}
.ar-pg--next{text-align:right}
.ar-pg--next .dir{justify-content:flex-end}
.ar-pg--next:hover .dir svg{transform:translateX(3px)}
.ar-rel-sec{background:radial-gradient(56% 46% at 8% 0%,rgba(0,71,187,.06),transparent 62%),var(--bg-light-2)}
/* ---- Responsive ---- */
@media (max-width:1024px){/* rail unwraps: contents jump to the article column's flow */
.ar{--ar-measure:100%}
.ar-cols{grid-template-columns:minmax(0,1fr)}
.ar-rail{display:contents}
/* min-width:0 lets the jump-to row scroll instead of stretching the column */
.ar-toc{order:1;position:static;padding:0;border:0;min-width:0}
.ar-main{order:2;min-width:0}
.ar-extras{order:3;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
/* the contents list reads as a jump-to row above the article */
.ar-toc nav{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ar-toc nav::-webkit-scrollbar{display:none}
.ar-toc a{flex:none;padding:8px 14px;border-radius:70px;background:var(--bg-light);border:1px solid var(--line);white-space:nowrap;font-size:13px}
.ar-toc a::after{display:none}
.ar-toc a.is-on{background:rgba(0,71,187,.1);border-color:rgba(0,71,187,.4)}}
@media (max-width:720px){.ar-wrap{padding-top:calc(var(--nav-h) + 26px)}
.ar-body{font-size:16px}
.ar-levels li{grid-template-columns:1fr;gap:6px}
.ar-pager{grid-template-columns:1fr}
.ar-pg--next{text-align:left}
.ar-pg--next .dir{justify-content:flex-start}
.ar-extras{grid-template-columns:1fr}}
/* print: just the article, on paper */
@media print{.topbar,.site-header,.mobile-menu,.menu-backdrop,.ar-progress,.ar-rail,.ar-share,.ar-pager,.ar-rel-sec,.cta-banner,.site-footer,.to-top,.chat-fab,.chat-panel,.cookie{display:none !important}
.ar-wrap{padding:0;margin:0}
.ar-cols{display:block}
.ar-main{max-width:none}
.ar-h1{font-size:26pt}
.ar-body{font-size:11pt;line-height:1.55;color:#000}
.ar-fig{break-inside:avoid}
a{color:#000;text-decoration:underline}}
/* ================= ANNOUNCEMENTS PAGE ================= */
/* ---- Notices ---- */
/* the content slides in rather than snapping when a notice opens */
@media (prefers-reduced-motion:no-preference){@keyframes anOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
/* table inside a notice */
.an-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.an-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.an-table th,.an-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.an-table th:last-child,.an-table td:last-child{border-right:none}
.an-table tbody tr:last-child th,.an-table tbody tr:last-child td{border-bottom:none}
.an-table thead th{background:rgba(0,71,187,.05);font-size:12.5px;font-weight:700;color:var(--text)}
.an-table tbody th{font-weight:700;color:var(--text);background:rgba(20,40,80,.02)}
.an-table td{color:var(--text-soft)}
/* ---- Responsive ---- */
/* ---- Announcements: date tile, share action, filter dialog ---- */
@media (prefers-reduced-motion:no-preference){@keyframes anModalIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes anFadeIn{from{opacity:0}to{opacity:1}}}
.an-box{
  flex:none;width:21px;height:21px;margin-top:1px;border-radius:6px;display:grid;place-items:center;
  background:var(--bg-light);border:1.5px solid rgba(20,40,80,.18);color:transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.an-box svg{width:12px;height:12px}
.an-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 13px;border-radius:70px;
  font-size:12px;font-weight:600;color:var(--blue);background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.2);
}
.an-chip button{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--blue);background:rgba(0,71,187,.12);transition:background .2s,transform .25s var(--ease);
}
.an-chip button svg{width:9px;height:9px}
.an-chip button:hover{background:var(--blue);color:#fff;transform:rotate(90deg)}
.an-chip--clear{background:none;border-color:var(--line);color:var(--text-soft);padding:6px 13px;cursor:pointer}
.an-chip--clear:hover{color:var(--blue);border-color:rgba(0,71,187,.35)}
/* ================= CONTACT PAGE ================= */
@media (prefers-reduced-motion:no-preference){@keyframes ctVeil{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}}
.ct-form-sec{
  background:
    radial-gradient(52% 44% at 96% 10%,rgba(22,233,215,.07),transparent 62%),
    radial-gradient(56% 40% at 40% 104%,rgba(0,71,187,.06),transparent 62%),
    var(--bg-light-2);
  scroll-margin-top:calc(var(--chrome-h) + var(--chrome-gap));
}
.ct-form-sec{position:relative;isolation:isolate}
/* clip-path, not overflow: an overflow container would stop the aside pinning */
.ct-form-sec{clip-path:inset(0)}
.ct-form-sec>.container{position:relative;z-index:1}
/* ---- Channels — bento, same glass + hover as the news and webinars cards ---- */
/* ---- Form ---- */
.ct-aside-list{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.ct-aside-list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:var(--text-soft)}
.ct-aside-list .wb-tick{background:rgba(0,71,187,.1);color:var(--blue)}
.ct-inline-chat{
  font:inherit;font-size:inherit;font-weight:700;color:var(--blue);cursor:pointer;padding:0;
  border-bottom:1px solid rgba(0,71,187,.35);transition:border-color .25s}
.ct-inline-chat:hover{border-color:var(--blue)}
.ct-aside-note{margin-top:28px;padding:20px 22px;border-radius:16px;background:rgba(0,71,187,.05);border:1px solid rgba(0,71,187,.14)}
.ct-aside-note b{display:block;font-size:13px;color:var(--text);margin-bottom:6px}
.ct-aside-note p{font-size:13px;line-height:1.6;color:var(--text-soft)}
.ct-form-card{padding:clamp(26px,3.2vw,42px);border-radius:var(--radius-xl)}
.ct-panel{margin-top:2px}
@media (prefers-reduced-motion:no-preference){.ct-panel{animation:ctPanel .42s var(--ease-out)}
@keyframes ctPanel{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}}
/* fields carry a single rule under them rather than a boxed input */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.ct-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.ct-field label{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--text-soft)}
.ct-field label em{font-style:normal;font-weight:400;color:var(--text-mute)}
.ct-field input,.ct-field textarea,.ct-form-card .wb-selwrap select{
  width:100%;font:inherit;font-size:16px;color:var(--text);padding:11px 2px;
  background:transparent;border:0;border-bottom:1px solid rgba(20,44,96,.2);border-radius:0;outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.ct-field textarea{resize:vertical;min-height:104px;line-height:1.6}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-mute)}
.ct-field input:hover,.ct-field textarea:hover,.ct-form-card .wb-selwrap select:hover{border-bottom-color:rgba(20,44,96,.4)}
.ct-field input:focus,.ct-field textarea:focus,.ct-form-card .wb-selwrap select:focus{
  border-bottom-color:var(--blue);box-shadow:0 1px 0 0 var(--blue);
}
.ct-form-card .wb-selwrap{position:relative}
.ct-form-card .wb-selwrap select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:32px}
.ct-form-card .wb-selchev{color:var(--text-mute);right:2px}
.ct-field.is-bad input,.ct-field.is-bad textarea{border-bottom-color:#d0453b;box-shadow:0 1px 0 0 #d0453b}
.ct-err{font-size:12.5px;color:#c0392f;margin-top:2px}
.ct-below{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:2px}
.ct-count{font-size:12px;color:var(--text-mute);font-variant-numeric:tabular-nums;margin-left:auto}
.ct-count.is-over{color:#c0392f;font-weight:700}
.ct-panel>.ct-field+.ct-field,.ct-panel>.ct-grid+*{margin-top:26px}
.ct-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:28px;font-size:13.5px;line-height:1.55;color:var(--text-soft)}
.ct-check input{position:absolute;opacity:0;width:0;height:0}
.ct-check a{color:var(--blue);font-weight:600}
.ct-check.is-bad .an-box{border-color:rgba(239,68,68,.65)}
.ct-actions{margin-top:32px}
.ct-submit{width:100%;justify-content:center}
.ct-done{text-align:center;padding:14px 4px 6px}
.ct-done-ic{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#0f7d5c;
}
.ct-done-ic svg{width:28px;height:28px}
.ct-done h3{font-size:23px;letter-spacing:-.025em;color:var(--text)}
.ct-done h3:focus{outline:none}
.ct-done p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.ct-done-acts{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:24px}
/* ---- word-by-word heading reveal ---- */
/* the mask has to be taller than the line box or descenders get cut; the
   negative margin keeps line spacing exactly as it was */
.ct-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.2em;margin-bottom:-.2em}
.ct-w>i{display:inline-block;font-style:inherit;will-change:transform}
html.is-animate [data-ct-words] .ct-w>i{transform:translateY(130%)}
html.is-animate [data-ct-cards]>*{opacity:0}
/* ---- Responsive ---- */
@media (max-width:720px){.ct-grid{grid-template-columns:1fr}}
/* ================= REGULATION PAGE ================= */
/* ---- Entities ---- */
/* ---- Verify ---- */
/* ---- Scope (dark) ---- */
/* ---- Risk + restrictions ---- */
/* ---- Responsive ---- */
/* ================= PARTNER PAGES (hub, IB, affiliate, money manager, institutional) =================
   One vocabulary shared by all five so the programme pages read as a family. */
.pt-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(600px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 44px) 0 48px;
  background:
    radial-gradient(72% 78% at 80% 8%,rgba(0,71,187,.3),transparent 62%),
    radial-gradient(52% 60% at 4% 96%,rgba(22,233,215,.09),transparent 64%),
    linear-gradient(180deg,#04060e 0%,#070c1c 56%,#04060e 100%);
}
.pt-hero-in{position:relative;z-index:1;width:100%}
.pt-h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;letter-spacing:-.038em;line-height:1.04;margin-top:12px}
.pt-h1 .g{
  background:linear-gradient(90deg,#7fb2ff,#dbe8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;
}
.pt-lead{margin-top:18px;max-width:58ch;font-size:clamp(15px,1.5vw,17px);line-height:1.66;color:#c9d5ea}
.pt-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* the value + dark grids reuse the forex section shells; these only supply
   the partner pages' own backdrop so the shells stay untouched elsewhere */
/* the aura layer lives in here, so it has to clip and stack like .pt-sec does */
.pt-why{
  position:relative;isolation:isolate;overflow:clip;
  background:radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light);
}
.pt-why>.container{position:relative;z-index:1}
.pt-hours{scroll-margin-top:calc(var(--chrome-h) + var(--chrome-gap))}
/* ---- shared section shells ---- */
.pt-sec{position:relative;isolation:isolate;overflow:clip}
.pt-sec>.container{position:relative;z-index:1}
.pt-light{background:radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light)}
.pt-light-2{background:radial-gradient(52% 44% at 96% 10%,rgba(22,233,215,.07),transparent 62%),var(--bg-light-2)}
.pt-dark{
  color:#fff;
  background:
    radial-gradient(80% 60% at 12% 0%,rgba(0,44,130,.4),transparent 62%),
    linear-gradient(180deg,#04060e,#080b16 58%,#04060e);
}
.pt-dark .head-sub{color:#a9b7cf}
.pt-aura{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px)}
.pt-aura.a1{top:-80px;right:-70px;width:min(500px,54vw);aspect-ratio:1;background:radial-gradient(circle,rgba(0,71,187,.08),transparent 68%)}
.pt-aura.a2{bottom:-130px;left:-80px;width:min(440px,50vw);aspect-ratio:1;background:radial-gradient(circle,rgba(22,233,215,.07),transparent 68%)}
/* ---- the three programme models ---- */
.pt-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pt-model{
  position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:22px;min-width:0;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.pt-model:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.pt-model::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--blue),#5b9dff);
}
.pt-model-ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .45s var(--ease)}
.pt-model-ic svg{width:24px;height:24px}
.pt-model:hover .pt-model-ic{transform:translateY(-3px) scale(1.05)}
.pt-model-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:rgba(0,71,187,.08);border:1px solid rgba(0,71,187,.18);
  padding:5px 11px;border-radius:70px;margin-bottom:13px;align-self:flex-start;
}
.pt-model h3{font-size:20px;letter-spacing:-.025em;color:var(--text)}
.pt-model p{margin-top:11px;font-size:14px;line-height:1.65;color:var(--text-soft)}
.pt-model-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pt-model-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--text-soft)}
.pt-model-list .wb-tick{background:rgba(0,71,187,.1);color:var(--blue);flex:none}
.pt-model-go{
  margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--blue);
}
.pt-model-go svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.pt-model:hover .pt-model-go svg{transform:translateX(4px)}
.pt-model-go:hover{text-decoration:underline;text-underline-offset:3px}
/* ---- tier country chips ---- */
/* ---- document list (legal documents) ---- */
/* ---- liquidity providers ----
   One pane divided by hairlines rather than ten separate cards: ten logos in
   ten boxes reads as clutter, and the shared frame is what makes it a wall. */
.cp-lp-note{margin-top:22px;text-align:center;font-size:12.5px;line-height:1.7;color:var(--text-soft)}
/* ---- spec tables — the site's Account specifications pattern ---- */
.pt-spec-wrap{margin-top:26px}
.pt-spec{min-width:760px}
.pt-spec--2{min-width:640px}
.pt-spec thead th{font-size:16px}
.pt-spec thead th:first-child{font-size:13.5px}
.pt-spec tbody td{font-size:14px}
.pt-spec th,.pt-spec td{padding:18px 22px}
/* the note needs air under the table, not to butt against the last row */
.pt-table-note{margin-top:26px;font-size:12.5px;line-height:1.7;color:var(--text-soft)}
/* ---- tabbed application form ---- */
.pt-form-wrap{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(28px,3.6vw,58px);align-items:start}
.pt-form-aside{position:sticky;top:calc(var(--chrome-h) + 26px)}
.pt-aside-lead{margin-top:16px;font-size:15px;line-height:1.68;color:var(--text-soft)}
.pt-form-card{padding:clamp(24px,3vw,38px);border-radius:var(--radius-xl)}
/* tabs, because three programmes share one form rather than three near-identical pages of fields */
.pt-tabs{display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(20,44,96,.05);border:1px solid rgba(20,44,96,.08)}
.pt-tab{
  flex:1;min-width:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  padding:11px 10px;border-radius:10px;color:var(--text-soft);background:transparent;
  transition:background .25s,color .25s,box-shadow .25s;
}
.pt-tab:hover{color:var(--text)}
.pt-tab[aria-selected="true"]{background:#fff;color:var(--blue);box-shadow:0 8px 20px -12px rgba(20,44,96,.4)}
.pt-tabnote{
  display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.5;color:var(--text-soft);
  background:rgba(0,71,187,.055);border:1px solid rgba(0,71,187,.13);
}
.pt-tabnote svg{width:15px;height:15px;flex:none;color:var(--blue)}
.pt-panel{margin-top:22px}
@media (prefers-reduced-motion:no-preference){.pt-panel{animation:ptPanel .4s var(--ease-out)}
@keyframes ptPanel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
/* ---- FAQ + closing ---- */
.pt-cta-note{margin-top:20px;font-size:12.5px;color:var(--text-soft);text-align:center}
/* ---- Responsive ---- */
@media (max-width:1080px){.pt-models{grid-template-columns:1fr}
.pt-form-wrap{grid-template-columns:1fr;gap:30px}
.pt-form-aside{position:static}}
@media (max-width:860px){.pt-hero{min-height:min(500px,calc(100vh - var(--topbar-h,44px)));padding:calc(var(--nav-h) + 40px) 0 42px}}
@media (max-width:720px){.pt-hero{min-height:auto}
.pt-tabs{flex-wrap:wrap}
.pt-tab{flex:1 1 100%}
.pt-aura{filter:blur(54px)}}
/* ================= TRADING APP PAGE =================
   Banner follows the forex / commodities pattern: copy left, photographic
   render on the right bleeding from the disclaimer bar to the section base.
   The render is shot on pure black, so it is composited with mix-blend-mode
   rather than masked — the background dissolves into the banner exactly.
   For that to work nothing between .acct-hero (which isolates) and the image
   may create a stacking context, hence no z-index / filter on .ap-hero-visual. */
/* ---- Store buttons (shared by the banner and the download panel) ---- */
@media (prefers-reduced-motion:no-preference){@keyframes stSheen{from{left:-70%;opacity:1}to{left:120%;opacity:0}}}
/* ---- Banner ---- */
@media (prefers-reduced-motion:no-preference){@keyframes apBreathe{from{transform:scale(1)}to{transform:scale(1.022)}}}
/* ---- Feature spec grid (editorial hairlines, no card chrome) ---- */
@media (prefers-reduced-motion:no-preference){@keyframes apBar{from{transform:scaleY(.86)}to{transform:scaleY(1)}}}
/* ---- Download band (full-bleed, light blue) ----
   The render is photographed on white, so it composites with multiply: white
   dissolves into the gradient and the device keeps its own values. Nothing
   between .ap-dl2 and the image may create a stacking context, so the auras
   sit at z-index:-1 rather than the content being lifted above them. */
/* ---- Glass cards riding over the device ---- */
/* ---- Responsive ---- */
/* =================================================================
   EDUCATION — MARKET ANALYSIS + KNOWLEDGE CENTRE
   ================================================================= */
/* ---- Shared surfaces & controls ---- */
/* dark mirror of .glass, for frosted panels on the near-black sections */
.glass-dark{
  background:rgba(255,255,255,.062);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 70px -38px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.15);
}
/* filter chip — referenced by the news room and economic calendar markup but
   never defined, so those two pages were rendering unstyled buttons */
.ec-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  padding:9px 15px;border-radius:70px;color:var(--text-soft);
  background:#fff;border:1px solid var(--line);
  transition:color .25s,background .25s,border-color .25s,transform .25s var(--ease);
}
.ec-chip:hover{color:var(--blue);border-color:rgba(0,71,187,.3);transform:translateY(-1px)}
.ec-chip.is-on{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 12px 26px -14px rgba(0,71,187,.7)}
/* =================== MARKET ANALYSIS =================== */
/* ---- choose your analysis (bento) ---- */
/* ---- reports ---- */
/* ---- method (scroll-linked) ---- */
/* ---- coverage ---- */
/* ---- subscribe ---- */
/* =================== KNOWLEDGE CENTRE =================== */
/* ---- learning path ---- */
/* ---- guides ---- */
.kc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* ---- videos ---- */
@media (prefers-reduced-motion:no-preference){@keyframes kcPing{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}}
/* ---- formats ---- */
/* ---- Responsive ---- */
@media (max-width:1080px){.kc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.kc-grid{grid-template-columns:1fr}
.ma-levels{width:100%}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-dark{background:rgba(14,20,38,.95)}}
/* =================================================================
   PLATFORM PAGES (MT4/MT5, web traders, copy trading, PAMM)
   ================================================================= */
/* ---- Banner: the render is the background, no pattern overlay ---- */
.pf-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 60px;
  background:#04060e;
}
.pf-hero-bg{
  position:absolute;inset:0;z-index:-1;
  background-image:url("../img/platform-hero.webp");
  background-size:cover;background-position:50% 45%;
}
/* the render is already near-black under the copy, so this is a light safety
   wash rather than the heavy scrim a bright image would need — anything more
   and the ribbons go flat */
.pf-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,6,14,.72) 0%,rgba(4,6,14,.46) 30%,rgba(4,6,14,.12) 58%,rgba(4,6,14,0) 84%),
    linear-gradient(180deg,rgba(4,6,14,.5) 0%,transparent 22%,transparent 78%,rgba(4,6,14,.55) 100%);
}
.pf-hero-in{position:relative;z-index:1;width:100%}
.pf-hero-copy{max-width:720px;min-width:0}
.pf-badge{
  display:inline-block;margin-left:9px;vertical-align:middle;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--blue);padding:4px 9px;border-radius:70px;
}
.pf-h1{font-size:clamp(31px,4.4vw,52px);font-weight:800;letter-spacing:-.038em;line-height:1.08;margin-top:16px}
.pf-lead{margin-top:20px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.68;color:#c2cfe4;max-width:62ch}
.pf-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* ---- Feature grid ---- */
.pf-aura{position:absolute;z-index:0;border-radius:50%;filter:blur(92px);pointer-events:none}
.pf-aura.a1{width:520px;height:520px;top:-12%;right:-8%;background:radial-gradient(circle,rgba(0,71,187,.12),transparent 68%)}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-card{display:flex;flex-direction:column;border-radius:20px;padding:26px 24px 24px;min-width:0;overflow:hidden}
.pf-card-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .4s var(--ease);
}
.pf-card-ic svg{width:22px;height:22px}
.pf-card:hover .pf-card-ic{transform:translateY(-3px) scale(1.05)}
.pf-card h3{font-size:18px;letter-spacing:-.025em;color:var(--text)}
.pf-card h3 .hl{color:var(--blue)}
.pf-card p{margin-top:10px;font-size:13.5px;line-height:1.64;color:var(--text-soft)}
.pf-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:20px}
.pf-pills span{
  font-size:11px;font-weight:600;color:var(--text-soft);
  background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:70px;
  transition:border-color .3s,color .3s;
}
.pf-card:hover .pf-pills span{border-color:rgba(0,71,187,.24);color:var(--blue)}
/* ---- Detail + pattern render ---- */
.pf-split{background:#fff}
.pf-split-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.pf-split-copy{min-width:0}
.pf-split-body{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.pf-split-body p{font-size:14.5px;line-height:1.72;color:var(--text-soft)}
.pf-split-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:26px}
.pf-split-pts li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--text)}
.pf-split-pts svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--blue)}
.pf-split-go{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:13.5px;font-weight:700;color:var(--blue)}
.pf-split-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.pf-split-go:hover svg{transform:translateX(5px)}
/* the render the design manager likes — one per page, never repeated */
.pf-split-viz{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:4/3.2;box-shadow:0 40px 80px -44px rgba(20,44,96,.5);
}
.pf-split-viz img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pf-split-viz:hover img{transform:scale(1.04)}
/* ---- Steps ---- */
.pf-steps{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(80% 64% at 50% 0%,rgba(0,46,138,.32),transparent 60%),linear-gradient(180deg,#04060e,#060a18 52%,#04060e);
}
.pf-steps .h2,.pf-steps .h2-light{color:#fff}
.pf-steplist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-step{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--radius-xl);padding:28px 28px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.pf-step::after{
  content:"";position:absolute;top:0;left:16%;right:16%;height:2px;border-radius:2px;
  background:rgba(120,160,255,.85);box-shadow:0 0 18px 1px rgba(120,160,255,.85);
  opacity:.9;transition:opacity .35s,left .45s var(--ease),right .45s var(--ease);
}
.pf-step:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.4);box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.pf-step:hover::after{left:6%;right:6%;opacity:1}
.pf-step-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:#6fa8ff}
.pf-step h3{margin-top:10px;font-size:20px;letter-spacing:-.026em;color:#fff}
.pf-step p{margin-top:10px;font-size:13.5px;line-height:1.64;color:#a9bcdb}
.pf-steps-cta{display:flex;justify-content:center;margin-top:38px}
/* ---- Responsive ---- */
@media (max-width:1080px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-split-in{grid-template-columns:1fr;gap:36px}
.pf-split-viz{max-width:460px;margin-inline:auto;width:100%}
.pf-steplist{grid-template-columns:1fr}}
@media (max-width:860px){.pf-hero{min-height:auto;padding:calc(var(--nav-h) + 44px) 0 54px}
.pf-hero-bg{background-position:66% 50%}
.pf-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.74) 0%,rgba(4,6,14,.6) 46%,rgba(4,6,14,.88) 100%)}}
@media (max-width:720px){.pf-h1 br,.pf-lead br,.pf-split .h2 br{display:none}
.pf-hero-copy{max-width:none}
.pf-grid{grid-template-columns:1fr}
.pf-split-pts{grid-template-columns:1fr}
.pf-hact .btn{width:100%;justify-content:center}}
/* =================================================================
   SPONSORSHIP, COMPANY AND HELP-CENTRE PAGES
   ================================================================= */
/* in-page nav in the banner — short pages get none, long ones get anchors */
.pf-subnav{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.pf-subnav a{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:#c9d5ea;
  padding:8px 16px;border-radius:70px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.pf-subnav a:hover{transform:translateY(-2px);color:#fff;background:rgba(255,255,255,.12);border-color:rgba(120,175,255,.44)}
/* ---- Partner grid (sponsorship index) ---- */
/* ---- Listing filter bar (CSR / events / media / achievements) ---- */
.pg-list{background:#fff}
.pg-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:14px;border-radius:20px;margin-bottom:22px;
}
.pg-cats{display:flex;flex-wrap:wrap;gap:8px}
.pg-status{font-size:12.5px;color:var(--text-mute);margin:0}
.pg-empty{max-width:460px;margin:8px auto 0;text-align:center;padding:38px 26px;border-radius:22px;background:var(--bg-light);border:1px dashed var(--line)}
.pg-empty p{font-size:14.5px;color:var(--text-soft);margin-bottom:18px}
/* the listing reuses .nr-card, but these cards do not link out to an article body */
.pg-list .nr-media{cursor:default}
/* ---- Fixtures (ICC) ---- */
.pg-sched{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(80% 64% at 50% 0%,rgba(0,46,138,.32),transparent 60%),linear-gradient(180deg,#04060e,#060a18 52%,#04060e);
}
.pg-sched .h2,.pg-sched .h2-light{color:#fff}
.pg-sched .head-sub{color:#a9bcdb}
.pg-fixtures{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto}
.pg-fix{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.pg-fix::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#6fa8ff,#0047BB);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.pg-fix:hover{transform:translateX(4px);border-color:rgba(120,175,255,.34);background:rgba(255,255,255,.075)}
.pg-fix:hover::before{transform:scaleY(1)}
.pg-fix-t{display:flex;flex-direction:column;gap:3px}
.pg-fix-t b{font-size:16px;letter-spacing:-.02em;color:#fff}
.pg-fix-t em{font-style:normal;font-size:12px;color:#8ea4c6}
.pg-fix-tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bcd6ff;background:rgba(0,71,187,.34);padding:6px 12px;border-radius:70px}
/* ---- CEO quote ---- */
.pg-quote{background:var(--bg-light-2)}
.pg-quote-card{position:relative;max-width:900px;margin-inline:auto;padding:clamp(30px,4vw,52px);border-radius:26px;text-align:center}
.pg-quote-mark{position:absolute;top:6px;left:clamp(20px,3vw,40px);font-size:110px;line-height:1;color:rgba(0,71,187,.1);font-weight:800}
.pg-quote-card blockquote p{position:relative;font-size:clamp(16px,2vw,21px);line-height:1.66;letter-spacing:-.018em;color:var(--text)}
.pg-quote-card figcaption{margin-top:22px;display:flex;flex-direction:column;gap:3px}
.pg-quote-card figcaption b{font-size:14.5px;color:var(--ink)}
.pg-quote-card figcaption span{font-size:12.5px;color:var(--text-mute)}
/* ---- PCCME telemetry: the one bespoke block on these pages ---- */
.pg-tel{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(76% 62% at 76% 6%,rgba(0,71,187,.34),transparent 62%),linear-gradient(180deg,#04060e,#070c1c 52%,#04060e);
}
.pg-tel .h2,.pg-tel .h2-light{color:#fff}
.pg-tel .head-sub{color:#a9bcdb}
.tel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.tel-dash{border-radius:26px;padding:24px}
.tel-dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tel-sym{display:flex;flex-direction:column;gap:3px}
.tel-sym b{font-size:18px;letter-spacing:-.025em}
.tel-sym em{font-style:normal;font-size:12px;color:#9fb2d0}
.tel-gear{display:flex;flex-direction:column;align-items:center;gap:2px}
.tel-gear i{font-style:normal;font-size:26px;font-weight:800;letter-spacing:-.04em;color:#6fa8ff;font-variant-numeric:tabular-nums}
.tel-gear u{text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.16em;color:#6f86ad}
.tel-gauge{position:relative;margin-top:16px}
.tel-gauge svg{width:100%;height:auto;display:block;overflow:visible}
/* no non-scaling-stroke here: it computes the dash in device space while the
   dasharray is authored in user units, which breaks the fill proportion */
.tel-arc-bg,.tel-arc{fill:none;stroke-width:10;stroke-linecap:round}
.tel-arc-bg{stroke:rgba(255,255,255,.09)}
.tel-arc{stroke:#6fa8ff;stroke-dasharray:315;stroke-dashoffset:315;transition:stroke-dashoffset .9s var(--ease)}
.tel-read{position:absolute;left:0;right:0;bottom:6px;display:flex;flex-direction:column;align-items:center;gap:1px}
.tel-read b{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.tel-read em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8ea4c6}
.tel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.tel-stats div{display:flex;flex-direction:column;gap:3px;align-items:center}
.tel-stats dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f86ad}
.tel-stats dd{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tel-laps{display:flex;flex-direction:column;gap:10px}
.tel-lap{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  padding:16px 18px;border-radius:16px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.tel-lap:hover{transform:translateX(4px);background:rgba(255,255,255,.075)}
.tel-lap.is-on{border-color:rgba(120,175,255,.44);background:rgba(255,255,255,.085)}
.tel-lap-n{
  grid-row:span 2;align-self:center;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:#6f86ad;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:color .35s,background .35s;
}
.tel-lap.is-on .tel-lap-n{color:#0b1220;background:#6fa8ff;border-color:transparent}
.tel-lap-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tel-lap-tx b{font-size:15px;letter-spacing:-.022em;color:#fff}
.tel-lap-tx em{font-style:normal;font-size:12px;color:#8ea4c6}
.tel-lap-bar{grid-column:2;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.tel-lap-bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#6fa8ff,#16e9d7);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.tel-lap.is-on .tel-lap-bar i{transform:scaleX(1)}
.tel-note{margin-top:6px;font-size:12.5px;line-height:1.6;color:#8ea4c6}
/* ---- Help centre ---- */
.hc-assist{background:var(--bg-light-2)}
.hc-assist-card{
  position:relative;overflow:hidden;border-radius:28px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,44px);align-items:center;
  padding:clamp(30px,4vw,52px);
  background:radial-gradient(74% 84% at 88% 6%,rgba(0,71,187,.46),transparent 62%),linear-gradient(152deg,#0b1224,#050914 56%,#04060e);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 46px 100px -50px rgba(0,20,70,.82),inset 0 1px 0 rgba(255,255,255,.13);
}
.hc-assist-aura{position:absolute;z-index:0;width:420px;height:420px;top:-40%;right:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 66%);filter:blur(60px)}
.hc-assist-tx,.hc-assist-act{position:relative;z-index:1}
.hc-assist-tx h2{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.032em;line-height:1.16}
.hc-assist-tx p{margin-top:12px;font-size:14.5px;line-height:1.66;color:#a9bcdb;max-width:52ch}
.hc-assist-act{display:flex;flex-wrap:wrap;gap:12px}
/* ---- Help article ---- */
/* ---- Responsive ---- */
@media (max-width:1080px){.tel{grid-template-columns:1fr}
.hc-assist-card{grid-template-columns:1fr}}
@media (max-width:720px){.pf-subnav a{flex:1 1 calc(50% - 5px);justify-content:center}
.pg-tel .h2 br{display:none}
.pg-fix{flex-direction:column;align-items:flex-start;gap:12px}
.hc-assist-act .btn{flex:1 1 100%;justify-content:center}}
/* =================================================================
   MT4 / MT5 PAGES
   ================================================================= */
/* ---- Banner: gradient rather than a photo, with the render bleeding
        into the bottom-right corner of the section ---- */
/* flat dark only — the render carries its own light, and stacking gradients
   behind it was what made it look muddy */
.pf-hero--mt{background:#04060e;overflow:hidden}
.pf-hero--mt .pf-hero-copy{max-width:min(560px,52%)}
/* the render is shot on pure black, so it composites instead of being masked;
   nothing between .pf-hero--mt and the image may create a stacking context */
.pf-hero--mt{isolation:isolate}
/* the render spans the banner from the disclaimer bar to the base */
.mt-hero-visual{position:absolute;top:0;right:0;bottom:0;width:min(58%,920px);pointer-events:none}
.mt-hero-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:56% center;
  mix-blend-mode:lighten;transform-origin:center right;
  /* one mask, not two composited — intersecting them left a visible seam
     where the radial's edge crossed the linear fade */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%,#000 100%);
}
@media (prefers-reduced-motion:no-preference){.mt-hero-img{animation:mtBreathe 9s var(--ease) infinite alternate}
@keyframes mtBreathe{from{transform:scale(1)}to{transform:scale(1.018)}}}
.mt-chip{
  position:absolute;z-index:2;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:15px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.75);
}
.mt-chip-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(0,71,187,.4);color:#bcd6ff}
.mt-chip-ic svg{width:15px;height:15px}
.mt-chip-tx{display:flex;flex-direction:column;line-height:1.25}
.mt-chip-tx b{font-size:12.5px;color:#fff;letter-spacing:-.015em;white-space:nowrap}
.mt-chip-tx em{font-style:normal;font-size:10px;color:#a9bcdb;white-space:nowrap}
.mt-chip.c1{top:20%;left:2%}
.mt-chip.c2{bottom:22%;left:16%}
/* ---- Why choose: features grouped into three cards ---- */
.mt-why{
  position:relative;isolation:isolate;overflow:clip;
  background:radial-gradient(50% 44% at 94% 2%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2);
}
.mt-why>.container{position:relative;z-index:1}
.mt-why .head-sub{max-width:74ch}
.mt-fgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* one gradient across all three — the blue reads best against the section */
.mt-fgroup--a,.mt-fgroup--b,.mt-fgroup--c{background:linear-gradient(180deg,rgba(0,71,187,.09),rgba(255,255,255,.62) 46%)}
.mt-fgroup-ic{background:rgba(0,71,187,.11);color:var(--blue)}
.mt-fgroup{
  display:flex;flex-direction:column;border-radius:22px;padding:28px 26px 24px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.mt-fgroup:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.mt-fgroup-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .4s var(--ease);
}
.mt-fgroup-ic svg{width:22px;height:22px}
.mt-fgroup:hover .mt-fgroup-ic{transform:translateY(-3px) scale(1.05)}
.mt-fgroup h3{font-size:18px;letter-spacing:-.026em;color:var(--text)}
.mt-fgroup ul{display:flex;flex-direction:column;margin-top:14px}
.mt-fgroup li{
  display:flex;align-items:flex-start;gap:11px;padding:11px 0;font-size:13.5px;line-height:1.5;color:var(--text-soft);
  border-bottom:1px solid var(--line);transition:color .3s var(--ease),transform .3s var(--ease);
}
.mt-fgroup li:last-child{border-bottom:0;padding-bottom:0}
.mt-fgroup li:hover{color:var(--blue);transform:translateX(3px)}
.mt-fgroup li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--blue)}
/* ---- Beyond: a horizontal rail the page scroll drives ---- */
.mt-beyond{
  position:relative;overflow:clip;color:#fff;background:#04060e;
}
.mt-beyond .h2,.mt-beyond .h2-light{color:#fff}
.mt-beyond .head-sub{color:#a9bcdb}
/* no scroll-snap: the rail's inline padding aligns the first card with the
   container, and snap immediately pulled past it so "previous" never disabled */
.mt-rail-vp{
  overflow-x:auto;overflow-y:hidden;padding-block:6px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.mt-rail-vp::-webkit-scrollbar{display:none}
.mt-rail{display:flex;gap:20px;width:max-content;padding-inline:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));will-change:transform}
.mt-rail-card{
  position:relative;flex:none;width:clamp(280px,26vw,360px);min-height:clamp(320px,30vw,400px);
  display:flex;flex-direction:column;border-radius:24px;padding:28px 26px 26px;overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.mt-rail-card:hover{transform:translateY(-4px);border-color:rgba(120,175,255,.4);box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.mt-rail-n{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#6f86ad}
.mt-rail-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin:16px 0 16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe0ff;
  transition:transform .4s var(--ease),border-color .3s;
}
.mt-rail-ic svg{width:22px;height:22px}
.mt-rail-card:hover .mt-rail-ic{transform:translateY(-3px);border-color:rgba(120,175,255,.5)}
.mt-rail-card h3{font-size:19px;letter-spacing:-.026em;color:#fff}
.mt-rail-card p{margin-top:10px;font-size:13.5px;line-height:1.64;color:#a9bcdb}
/* the first card is the video */
.mt-rail-card--video{width:clamp(320px,34vw,480px);padding:0;border:1px solid rgba(255,255,255,.12)}
.mt-rail-card--video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mt-rail-card--video:hover img{transform:scale(1.05)}
.mt-rail-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.2) 0%,rgba(4,6,14,.32) 46%,rgba(4,6,14,.9) 100%)}
.mt-rail-play{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 20px 44px -16px rgba(0,0,0,.7);
  transition:transform .45s var(--ease),background .35s;
}
.mt-rail-play svg{width:24px;height:24px;margin-left:3px}
.mt-rail-card--video:hover .mt-rail-play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
@media (prefers-reduced-motion:no-preference){.mt-rail-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:kcPing 2.8s ease-out infinite}}
.mt-rail-vmeta{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-rail-tag{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(0,71,187,.86);padding:6px 11px;border-radius:70px}
.mt-rail-dur{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;background:rgba(4,6,14,.6);padding:5px 10px;border-radius:70px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.mt-rail-dur svg{width:12px;height:12px}
.mt-rail-vtx{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:6px}
.mt-rail-vtx b{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.16}
.mt-rail-vtx em{font-style:normal;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.76)}
/* closing card links to the other platform */
.mt-rail-card--end{
  background:linear-gradient(160deg,rgba(0,71,187,.34),rgba(255,255,255,.03));
  border:1px solid rgba(120,175,255,.28);
}
.mt-rail-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:13px;font-weight:700;color:#bcd6ff}
.mt-rail-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.mt-rail-card--end:hover .mt-rail-go svg{transform:translateX(5px)}
.mt-rail-foot{display:flex;align-items:center;gap:24px;margin-top:32px}
.mt-rail-progress{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.mt-rail-progress i{display:block;height:100%;width:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#0047BB,#6fa8ff 60%,#16e9d7);transition:transform .25s var(--ease)}
.mt-rail-nav{display:flex;gap:10px;flex:none}
.mt-rail-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s,border-color .3s,transform .3s var(--ease),opacity .3s;
}
.mt-rail-btn svg{width:19px;height:19px}
.mt-rail-btn:hover:not(:disabled){background:rgba(0,71,187,.55);border-color:rgba(120,175,255,.5);transform:translateY(-2px)}
.mt-rail-btn:disabled{opacity:.32;cursor:default}
/* ---- Download: centred render composited into the section ---- */
.mt-dl{
  position:relative;overflow:clip;isolation:isolate;color:#fff;
  background:#04060e;
}
.mt-dl .h2,.mt-dl .h2-light{color:#fff}
.mt-dl .head-sub{color:#a9bcdb;max-width:64ch}
.mt-dl>.container{position:relative}
/* the backdrop is crushed to black in the asset, so lighten melts it into the
   section — no frame, no visible rectangle */
.mt-dl-stage{position:relative;max-width:min(980px,94%);margin:0 auto}
.mt-dl-img{
  display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(78% 84% at 50% 46%,#000 62%,rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(78% 84% at 50% 46%,#000 62%,rgba(0,0,0,0) 96%);
}
.mt-dl-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:10px auto 0}
.mt-dl-btn{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:14px 24px 14px 14px;border-radius:18px;flex:0 1 236px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
/* each platform lights in its own colour on hover */
.mt-dl-btn::after{
  content:"";position:absolute;left:50%;bottom:-32px;width:70%;height:56px;transform:translateX(-50%);
  border-radius:50%;filter:blur(22px);opacity:0;transition:opacity .4s var(--ease);
  background:var(--glow,rgba(120,175,255,.9));
}
.mt-dl-btn:hover{transform:translateY(-4px);border-color:var(--edge,rgba(120,175,255,.5));box-shadow:0 26px 50px -24px rgba(0,0,0,.8)}
.mt-dl-btn:hover::after{opacity:.55}
.mt-dl-tile{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.mt-dl-btn:hover .mt-dl-tile{transform:translateY(-2px) scale(1.04);border-color:var(--edge,rgba(120,175,255,.5))}
.mt-dl-ic{width:24px;height:24px}
.mt-dl-tile.apple{--x:#fff}
.mt-dl-tile.apple .mt-dl-ic{color:#fff}
.mt-dl-btn:has(.apple){--glow:rgba(190,210,240,.75);--edge:rgba(220,232,248,.5)}
.mt-dl-btn:has(.win){--glow:rgba(0,164,239,.85);--edge:rgba(0,164,239,.55)}
.mt-dl-btn:has(.droid){--glow:rgba(61,220,132,.8);--edge:rgba(61,220,132,.5)}
.mt-dl-tile.win{background:rgba(0,164,239,.14);border-color:rgba(0,164,239,.28)}
.mt-dl-tile.droid{background:rgba(61,220,132,.13);border-color:rgba(61,220,132,.26)}
.mt-dl-tx{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.mt-dl-tx em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8ea4c6}
.mt-dl-tx b{font-size:16px;font-weight:700;letter-spacing:-.022em;color:#fff;white-space:nowrap}
/* ---- Why STARTRADER: the gradient ray boxes, three up ---- */
.mt-whyst-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mt-whyst-grid .fx-mh-card{min-height:0}
/* ---- Responsive ---- */
@media (max-width:1180px){.mt-hero-visual{width:min(64%,780px)}
.mt-chip.c1{left:8%}
.mt-chip.c2{left:-2%}}
@media (max-width:1080px){.pf-hero--mt{padding-bottom:clamp(300px,36vw,440px)}
.pf-hero--mt .pf-hero-copy{max-width:none}
.mt-hero-visual{top:auto;height:clamp(280px,34vw,420px);width:100%;right:0}
.mt-fgroups{grid-template-columns:1fr}
.mt-whyst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.pf-hero--mt{padding-bottom:clamp(220px,58vw,340px)}
.mt-hero-visual{height:clamp(220px,52vw,320px)}
.mt-chip{display:none}
.mt-dl-btn{flex:1 1 100%}
.mt-dl-stage{max-width:112%;margin-inline:-6%}
.mt-whyst-grid{grid-template-columns:1fr}
.mt-dl .h2 br{display:none}}
/* MT4: the extra blocks its content needs */
.mt-quickdl{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.mt-quickdl .mt-dl-btn{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(20,44,96,.32);
}
.mt-quickdl .mt-dl-btn:hover{border-color:var(--edge,rgba(0,71,187,.4));box-shadow:0 26px 50px -26px rgba(20,44,96,.42)}
.mt-quickdl .mt-dl-tx em{color:var(--text-mute)}
.mt-quickdl .mt-dl-tx b{color:var(--text)}
.mt-quickdl .mt-dl-tile{background:rgba(20,44,96,.05);border-color:var(--line)}
.mt-quickdl .mt-dl-tile.apple .mt-dl-ic{color:#0a1020}
.mt-sysreq{margin-top:28px;text-align:center;font-size:12.5px;line-height:1.6;color:#8ea4c6}
.mt-sysreq b{color:#c2cfe4;margin-right:6px}
.mt-pair-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-pair-note{margin-top:30px;text-align:center;font-size:12px;line-height:1.6;color:#7f92b3}
.mt-dl-cta{display:flex;justify-content:center;margin-top:30px}
@media (max-width:1080px){.mt-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.mt-pair-grid{grid-template-columns:1fr}
.mt-quickdl .mt-dl-btn{flex:1 1 100%}}
/* =================================================================
   COPY TRADING
   ================================================================= */
.ct-bpanel--alt:hover{border-color:rgba(138,100,64,.34)}
.ct-path-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:13.5px;font-weight:700;color:var(--blue)}
.ct-path-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
/* ---- video ---- */
/* ---- steps reuse htrade; only the switch is new ---- */
.ct-switch{position:relative;align-self:flex-start;display:inline-flex;width:auto;gap:4px;padding:5px;border-radius:70px;background:rgba(20,44,96,.06);margin:22px 0 26px}
.ct-switch-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:70px;background:var(--blue);box-shadow:0 14px 28px -14px rgba(0,71,187,.75);transition:transform .42s var(--ease),width .42s var(--ease)}
.ct-tab{position:relative;z-index:1;padding:10px 22px;border-radius:70px;font-size:13.5px;font-weight:700;color:var(--text-soft);transition:color .3s}
.ct-tab:hover{color:var(--text)}
.ct-tab.is-on{color:#fff}
.ct-panel{min-width:0;animation:ctIn .45s var(--ease) both}
@keyframes ctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ct-panel{animation:none}}
/* ---- benefits ---- */
.ct-ben-sec{background:var(--bg-light)}
.ct-bens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ct-bpanel{border-radius:24px;padding:30px 28px 24px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.ct-bpanel:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ct-bpanel header{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ct-ben-chip{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);padding:7px 14px;border-radius:70px}
.ct-ben-chip.alt{background:#8a6440}
.ct-bpanel header b{font-size:20px;letter-spacing:-.028em;color:var(--text)}
.ct-brows{display:flex;flex-direction:column}
.ct-brows li{
  display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.ct-brows li:last-child{border-bottom:0;padding-bottom:4px}
.ct-brows li:hover{transform:translateX(4px)}
.ct-brow-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(0,71,187,.1);color:var(--blue);transition:transform .35s var(--ease)}
.ct-bpanel--alt{background:linear-gradient(180deg,rgba(223,197,174,.4),rgba(255,255,255,.66) 44%)}
.ct-bpanel--alt .ct-brow-ic{background:rgba(223,197,174,.55);color:#8a6440}
.ct-brow-ic svg{width:18px;height:18px}
.ct-brows li:hover .ct-brow-ic{transform:scale(1.06)}
.ct-brow-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.ct-brow-tx b{font-size:15px;letter-spacing:-.022em;color:var(--text)}
.ct-brow-tx em{font-style:normal;font-size:13px;line-height:1.6;color:var(--text-soft)}
/* ---- ranking: an auto-scrolling rail, same construction as the awards row ---- */
.ct-rail{
  position:relative;z-index:1;width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ct-track{display:flex;gap:18px;width:max-content;padding:4px 0;will-change:transform}
/* ---- Responsive ---- */
@media (max-width:1080px){.ct-bens{grid-template-columns:1fr}
.ct-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.ct-cards{grid-template-columns:1fr}
.ct-switch{width:100%}
.ct-tab{flex:1;padding-inline:10px}}
/* =================================================================
   STAR COPY
   shares the copy-trading language — glass cards, the sand accent for
   the master side, the same pill switch — with its own section shapes
   ================================================================= */
/* ---- benefits: one expanding rail, so only the open panel spends space ---- */
@keyframes scDwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- the two roles: the shared htrade stepper, switched by role ---- */
/* where the stepper sits in a switchable panel, keep it the height of the intro card */
.htrade .ct-panel{display:flex}
.htrade .ct-panel .htrade-steps{height:100%}
/* ---- master board: the figures animate in once, on scroll ---- */
.sc-strat-aura{position:absolute;z-index:0;width:680px;height:420px;top:-8%;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.2),transparent 70%);filter:blur(96px)}
/* ---- Responsive ---- */
/* =================================================================
   STAR WEB TRADING
   ================================================================= */
/* ---- the dashboard, built rather than photographed: the panel you pick is
   the panel that lights, and the rest step back ---- */
@keyframes swPing{0%{opacity:.9;transform:scale(.7)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
/* ---- benefits as a bento: the lead cell carries the weight ---- */
/* ---- key features: one list, one panel, kept in step ---- */
@keyframes swFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---- access from anywhere: the ray-gradient cards from the forex hours grid ---- */
/* ---- Responsive ---- */
/* =================================================================
   WEB TRADER
   ================================================================= */
/* ---- ten reasons: a spec sheet, not ten boxes ---- */
/* ---- the stage: one framed screen, one aligned strip, nothing floating ---- */
.wt-stage-sec{
  position:relative;overflow:clip;color:#fff;
  background:
    radial-gradient(62% 46% at 50% 2%,rgba(10,92,245,.28),transparent 64%),
    linear-gradient(180deg,#060b18,#0a1122 50%,#050912);
}
.wt-stage-sec .h2,.wt-stage-sec .h2-light{color:#fff}
.wt-stage-sec .head-sub{color:#a9bcdb}
.wt-stage-sec>.container{position:relative;z-index:1}
.wt-frame{
  position:relative;max-width:min(940px,100%);margin:0 auto;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#101a30,#0a1120);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 56px 110px -46px rgba(0,0,0,.95),0 0 0 1px rgba(10,92,245,.14),inset 0 1px 0 rgba(255,255,255,.1);
}
.wt-frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1)}
.wt-frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.wt-frame-bar i:first-child{background:#ff6058}
.wt-frame-bar i:nth-child(2){background:#ffbe2f}
.wt-frame-bar i:nth-child(3){background:#28ca42}
.wt-frame-url{
  flex:1;margin-left:8px;max-width:280px;display:flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:70px;font-size:11px;color:#c8d6ec;
  background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.1);
}
.wt-frame-url svg{width:11px;height:11px;color:#3fd9a8}
.wt-frame-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8ea4c6}
.wt-frame-live b{position:relative;width:6px;height:6px;border-radius:50%;background:#3fd9a8}
@media (prefers-reduced-motion:no-preference){.wt-frame-live b::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(63,217,168,.7);animation:wtPing 2.4s ease-out infinite}}
@keyframes wtPing{0%{opacity:.9;transform:scale(.7)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
.wt-frame>img{display:block;width:100%;height:auto}
/* an MT4-style view drawn rather than screenshotted, so it stays crisp */
.wt-ui{padding:12px;display:flex;flex-direction:column;gap:10px;font-variant-numeric:tabular-nums}
.wt-ui-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.wt-ui-tabs,.wt-ui-tfs{display:flex;gap:5px}
.wt-ui-tabs span,.wt-ui-tfs span{font-size:9.5px;font-weight:700;color:#8ea4c6;padding:5px 9px;border-radius:6px;background:rgba(255,255,255,.05)}
.wt-ui-tabs span.on,.wt-ui-tfs span.on{color:#fff;background:rgba(61,139,255,.34)}
.wt-ui-main{display:grid;grid-template-columns:214px minmax(0,1fr);gap:10px}
.wt-ui-mw,.wt-ui-plot,.wt-ui-term{border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);padding:11px}
.wt-ui-hd{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#6f86ad;margin-bottom:9px}
.wt-ui-q{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:10px;white-space:nowrap}
.wt-ui-q:last-child{border-bottom:0}
.wt-ui-q b{color:#e6edf8;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.wt-ui-q em{font-style:normal;color:#c8d6ec}
.wt-ui-q u{text-decoration:none;font-weight:700;text-align:right}
.wt-ui-q u.up{color:#3fd9a8}
.wt-ui-q u.down{color:#ff7a7a}
.wt-ui-plot{position:relative;padding-right:56px}
.wt-ui-sym{position:absolute;top:11px;left:12px;z-index:1;font-size:9.5px;font-weight:600;color:#8ea4c6}
.wt-ui-sym b{color:#fff;font-weight:700}
.wt-ui-chart{display:block;width:100%;height:196px;margin-top:14px}
.ku{fill:#3fd9a8}
.kd{fill:#ff6b6b}
.kuw{stroke:#3fd9a8;stroke-width:1;vector-effect:non-scaling-stroke}
.kdw{stroke:#ff6b6b;stroke-width:1;vector-effect:non-scaling-stroke}
.wt-ui-axis{position:absolute;top:32px;right:10px;bottom:11px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:9px;color:#6f86ad}
.wt-ui-axis .now{color:#08281c;background:#3fd9a8;font-weight:700;padding:2px 5px;border-radius:4px}
.wt-ui-th,.wt-ui-tr{display:grid;grid-template-columns:1.1fr .7fr .7fr .9fr .9fr .9fr;gap:8px;align-items:center;font-size:10.5px}
.wt-ui-th{padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.09);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#6f86ad}
.wt-ui-tr{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#c8d6ec}
.wt-ui-tr:last-child{border-bottom:0}
.wt-ui-tr b{color:#fff;font-weight:600}
.wt-ui-tr u{text-decoration:none;font-weight:700}
.wt-ui-tr u.up{color:#3fd9a8}
.wt-ui-tr u.down{color:#ff7a7a}
.wt-ui-side{display:inline-flex;align-items:center;gap:5px;text-transform:capitalize}
.wt-ui-side::before{content:"";width:5px;height:5px;border-radius:2px;background:#3fd9a8}
.wt-ui-side.s::before{background:#ff7a7a}
.wt-caps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:min(1000px,100%);margin:36px auto 0;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.wt-cap{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:24px 16px;text-align:center;border-left:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.wt-cap:first-child{border-left:0}
.wt-cap:hover{background:rgba(255,255,255,.05)}
.wt-cap-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(61,139,255,.16);border:1px solid rgba(61,139,255,.26);color:#8ec0ff;transition:transform .35s var(--ease)}
.wt-cap-ic svg{width:18px;height:18px}
.wt-cap:hover .wt-cap-ic{transform:translateY(-3px)}
.wt-cap b{font-size:14px;letter-spacing:-.022em;color:#fff;line-height:1.28}
.wt-cap em{font-style:normal;font-size:11.5px;line-height:1.5;color:#8ea4c6}
.wt-req{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px;
  max-width:820px;margin:30px auto 0;padding:15px 24px;border-radius:70px;
  font-size:12.5px;line-height:1.6;text-align:center;color:#a9bcdb;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.wt-req b{color:#fff;font-weight:700}
.wt-req svg{width:15px;height:15px;flex:none;color:#3fd9a8}
.wt-stage-cta{display:flex;justify-content:center;margin-top:28px}
/* ---- Responsive ---- */
@media (max-width:980px){.wt-caps{grid-template-columns:repeat(3,minmax(0,1fr))}
.wt-cap:nth-child(4){border-left:0}
.wt-cap:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}}
@media (max-width:980px){.wt-ui-main{grid-template-columns:1fr}
.wt-ui-chart{height:170px}}
@media (max-width:720px){/* keep four columns and drop the two mid ones, so profit stays on its row */
.wt-ui-th,.wt-ui-tr{grid-template-columns:1.1fr .8fr .7fr .9fr;gap:8px}
.wt-ui-th span:nth-child(4),.wt-ui-th span:nth-child(5),.wt-ui-tr span:nth-child(4),.wt-ui-tr span:nth-child(5){display:none}
.wt-caps{grid-template-columns:repeat(2,minmax(0,1fr))}
.wt-cap:nth-child(odd){border-left:0}
.wt-cap:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
.wt-stage-sec .h2 br{display:none}
.wt-req{border-radius:20px;text-align:left;justify-content:flex-start}}
/* =================================================================
   PLATFORM PAGES — shared light cards, each with its own accent
   (a clean glass base, not a gradient wash)
   ================================================================= */
.pl-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.pl-sec>.container{position:relative;z-index:1}
.pl-sec--plain{background:var(--bg-light)}
.pl-intro{display:grid;grid-template-columns:104px minmax(0,1fr);gap:26px;align-items:start;max-width:880px;margin:0 auto 46px}
.pl-intro img{width:104px;height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
.pl-intro p{font-size:15px;line-height:1.76;color:var(--text-soft)}
/* the same shell, top bar and lift as the regulator cards on why-startrader */
.pl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pl-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);padding:20px 20px 18px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 28px -18px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .38s var(--ease),box-shadow .38s,border-color .3s;
}
.pl-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2a72ff,#0b43c6);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.pl-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 24px 46px -24px rgba(0,71,187,.4)}
.pl-card:hover::before{transform:scaleX(1)}
.pl-card-hd{display:flex;align-items:center;gap:12px}
.pl-card-ic{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(0,71,187,.1);color:var(--blue);
  transition:transform .38s var(--ease),background .3s,color .3s;
}
.pl-card-ic svg{width:19px;height:19px}
.pl-card:hover .pl-card-ic{transform:translateY(-2px);background:var(--blue);color:#fff}
.pl-card-hd h3{font-size:15.5px;font-weight:700;letter-spacing:-.022em;line-height:1.28;color:var(--text)}
.pl-card p{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--text-soft)}
.pl-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:42px}
/* the per-step action inside the shared stepper */
.htrade-txt .ct-path-go{margin-top:12px;padding-top:0}
/* ---- strategy managers: the figures animate in once, on scroll ---- */
/* ---- talk to the desk ---- */
@media (max-width:980px){.pl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pl-cards{grid-template-columns:1fr}}
@media (max-width:720px){.pl-intro{grid-template-columns:1fr;gap:18px}
.pl-intro img{width:88px}}
/* lettered instrument badge, for indices, shares, ETFs and the CFD umbrella */
.fx-inst-tx{
  flex:none;display:grid;place-items:center;min-width:52px;height:32px;padding:0 9px;border-radius:9px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--blue);
  background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.16);
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.ta-table tbody tr:hover .fx-inst-tx{transform:translateY(-1px);background:var(--blue);color:#fff}
/* the 3D mark closes out the stepper's intro card, where there was dead space */
.htrade-mark{display:block;width:118px;height:auto;margin:34px 0 0 auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
@media (max-width:1080px){.htrade-mark{width:96px;margin-top:26px}}
/* the video is the banner: no scrim over it, and the frame is set so its subject
   lands on the right where the copy is not */
.fx-hero .acct-hero-video{opacity:1;object-position:64% center}
.fx-hero .acct-hero-bg::after{background:none}
@media (prefers-reduced-motion:reduce){.fx-hero .acct-hero-video{display:none}}
/* a Trade action on every row of an instrument board */
.ta-table th.ta-th-act,.ta-table td.ta-td-act{text-align:right;padding-left:12px}
.fx-trade{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 16px;border-radius:70px;font-size:12.5px;font-weight:700;
  color:var(--blue);background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.18);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .35s var(--ease);
}
.fx-trade svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.fx-trade:hover{background:var(--blue);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,71,187,.6)}
.fx-trade:hover svg{transform:translateX(3px)}
.ta-table tbody tr:hover .fx-trade{background:var(--blue);color:#fff;border-color:transparent}
@media (max-width:860px){.fx-trade{padding:8px 13px;font-size:11.5px}
.fx-trade svg{display:none}}
@media (max-width:860px){/* a fifth column earns its room back from the cell padding */
.ta-table th,.ta-table td{padding:16px 14px}
.ta-table{min-width:700px}}
/* the flyout's group headings are the family pages */
.fly-group h5 a{color:inherit;transition:color .2s}
.fly-group h5 a:hover,.fly-group h5 a:focus-visible{color:#5b9dff}
/* =================================================================
   CSR — commitments, gallery, initiative timeline
   ================================================================= */
.csr-intro{display:grid;grid-template-columns:104px minmax(0,1fr);gap:26px;align-items:start;max-width:880px;margin:0 auto 46px}
.csr-intro img{width:104px;height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
.csr-intro p{font-size:15px;line-height:1.76;color:var(--text-soft)}
/* ---- gallery: a bento of stills, each one opens ---- */
/* ---- lightbox ---- */
/* ---- initiatives: a horizontal milestone scrubber ---- */
@keyframes csrSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* the shield gets a container of its own rather than floating beside a heading */
.pl-sign{
  display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:22px;
  padding:26px 32px;border-radius:24px;
  background:linear-gradient(110deg,rgba(0,71,187,.075),rgba(255,255,255,.68) 56%);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 22px 46px -30px rgba(20,44,96,.34),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.pl-sign:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.pl-sign img{width:88px;height:auto;flex:none;filter:drop-shadow(0 18px 24px rgba(20,44,96,.24))}
.pl-sign-tx{flex:1;min-width:min(280px,100%);display:flex;flex-direction:column;gap:7px}
.pl-sign-tx b{font-size:17px;letter-spacing:-.028em;color:var(--text)}
.pl-sign-tx em{font-style:normal;font-size:14px;line-height:1.68;color:var(--text-soft)}
.pl-sign .btn{flex:none}
@media (max-width:720px){.pl-sign{padding:24px}}
/* =================================================================
   EVENTS — a stage gallery, and the shared kinds/band pattern
   ================================================================= */
/* ---- gallery: a full-bleed editorial rail, captions under the frame ---- */
/* =================================================================
   MEDIA COVERAGE — a rated-outlet rail and a wall of clippings
   ================================================================= */
.mc-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.mc-sec>.container{position:relative;z-index:1}
/* ---- the outlets, on a slow rail ---- */
/* ---- the wall: clippings flowing down columns ---- */
/* =================================================================
   ACHIEVEMENTS — the award wall
   ================================================================= */
/* =================================================================
   NBA PARTNERSHIP — an arena page: its own type, its own motion.
   Nothing here is shared with the other company pages on purpose.
   ================================================================= */
/* ---------------- hero ---------------- */
/* ---------------- the arc of values ---------------- */
/* ---------------- wallpapers: the locker ---------------- */
/* ---------------- the repeatedly panels ---------------- */
/* ---------------- the CEO word ---------------- */
/* ---------------- responsive ---------------- */
@media (max-width:1080px){.nb-hero-viz{order:-1;width:min(78%,420px)}}
/* =================================================================
   PORSCHE CARRERA CUP MIDDLE EAST
   A racing page: dark cinema, a studio for the car, a circuit you can
   read, and the real wallpapers on a moving rail. Scoped to .pcx.
   ================================================================= */
/* ---------------- banner: the same frame as the NBA page ---------------- */
/* ---------------- performance x precision: six reasons, plainly set ---------------- */
/* ---------------- engineered for excellence: the circuit ---------------- */
/* ---------------- beyond the finish line ---------------- */
/* ---------------- wallpapers on a moving rail ---------------- */
/* ---------------- start your journey ---------------- */
/* ---------------- a word from our CEO ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   UAE NATIONAL CRICKET TEAM — ICC MEN'S T20 WORLD CUP 2026
   Brand palette only. The cricket furniture is drawn, not photographed:
   stumps, a ball on its arc, fielding positions, a stitched seam.
   Scoped to .ckt.
   ================================================================= */
.ckt{--acc:#0047bb;--acc-2:#2a72ff;--acc-3:#7fb2ff;--seam:#2a72ff;
     --ink:#05070d;--glass:rgba(255,255,255,.06)}
/* ---------------- banner ---------------- */
.ck-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(900px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;padding:calc(var(--nav-h) + 70px) 0 96px;
  background:var(--ink);
}
.ck-hero-bg{
  position:absolute;inset:-8% 0;z-index:-3;will-change:transform;
  background:url("../img/icc-banner.webp") center/cover no-repeat;
}
.ck-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(3,8,20,.95) 0%,rgba(3,8,20,.88) 30%,rgba(3,8,20,.56) 50%,rgba(3,8,20,.12) 72%,transparent 88%),
    linear-gradient(180deg,rgba(3,8,20,.6),transparent 24%,rgba(3,8,20,.9));
}
.ck-hero-in{position:relative;z-index:2;width:100%}
.ck-hero-copy{max-width:min(100%,620px)}
.ck-badge{
  display:inline-flex;align-items:center;gap:13px;padding:8px 19px 8px 11px;border-radius:70px;
  background:var(--glass);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.ck-badge img{height:38px;width:auto;display:block}
.ck-badge span{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#e6edf8}
.ck-h1{margin-top:26px;font-size:clamp(36px,5vw,70px);font-weight:800;letter-spacing:-.05em;line-height:.98}
.ck-h1 span{display:block}
.ck-h1 .hollow{
  color:transparent;-webkit-text-stroke:1.4px rgba(127,178,255,.8);
  text-shadow:0 0 30px rgba(42,114,255,.5),0 0 70px rgba(0,71,187,.44);
}
.ck-h1 span:first-child{text-shadow:0 0 46px rgba(0,71,187,.5)}
.ck-lead{margin-top:24px;max-width:50ch;font-size:clamp(15px,1.5vw,17px);line-height:1.72;color:#c4cedf}
.ck-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ck-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:70px;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
  box-shadow:0 18px 38px -16px rgba(0,71,187,.9);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ck-btn:hover{transform:translateY(-3px);box-shadow:0 26px 48px -16px rgba(42,114,255,.95)}
.ck-btn svg{width:15px;height:15px;flex:none}
.ck-btn--ghost{color:#fff;background:var(--glass);border:1px solid rgba(255,255,255,.2);box-shadow:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ck-btn--ghost:hover{background:rgba(255,255,255,.13);box-shadow:none}
/* shared headings */
.ck-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-2);text-align:center}
.ck-h2{margin-top:16px;font-size:clamp(28px,3.7vw,50px);font-weight:800;letter-spacing:-.042em;line-height:1.06;text-align:center}
.ck-sub{margin:18px auto 0;max-width:62ch;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.7;text-align:center}
/* ---------------- the bento ---------------- */
.ck-bento-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#f5f8fc,#eef3fa)}
.ck-bento-sec .ck-eyebrow{color:var(--acc)}
.ck-bento-sec .ck-h2{color:var(--ink)}
.ck-bento-sec .ck-sub{color:#4d5c74}
.ck-bento{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);margin-top:clamp(32px,4vw,50px);
}
.ck-cell{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 12px 30px -20px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .42s var(--ease),box-shadow .42s,border-color .32s;
}
.ck-cell:hover{transform:translateY(-6px);border-color:rgba(42,114,255,.5);
  box-shadow:0 28px 52px -26px rgba(0,71,187,.36)}
/* the stitch across the top runs when you point at a cell */
.ck-cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--seam) 0 7px,transparent 7px 14px);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.ck-cell:hover::before{transform:scaleX(1)}
.ck-cell-n{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--acc);
}
.ck-cell-n i{
  width:16px;height:11px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,71,187,.5) 0 2px,transparent 2px 5px);
}
.ck-cell h3{position:relative;z-index:1;margin-top:13px;font-size:clamp(17px,1.9vw,22px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ck-cell p{position:relative;z-index:1;margin-top:10px;font-size:13.6px;line-height:1.68;color:#5a6a83}
/* --- the drawn elements, one per cell, each answering the pointer --- */
.ck-viz{position:relative;z-index:1;display:block;align-self:stretch;margin-top:auto;padding-top:24px;height:118px}
/* three stumps and a bail */
.ck-viz--stumps{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.ck-viz--stumps i{
  width:6px;border-radius:3px 3px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--acc-2),rgba(42,114,255,.2));
  transition:height .55s var(--ease),transform .55s var(--ease);
}
.ck-viz--stumps i:nth-child(1){height:46px}
.ck-viz--stumps i:nth-child(2){height:58px}
.ck-viz--stumps i:nth-child(3){height:46px}
.ck-cell:hover .ck-viz--stumps i:nth-child(1){height:60px;transform:rotate(-7deg)}
.ck-cell:hover .ck-viz--stumps i:nth-child(2){height:74px}
.ck-cell:hover .ck-viz--stumps i:nth-child(3){height:60px;transform:rotate(7deg)}
.ck-viz--stumps::after{
  content:"";position:absolute;left:50%;bottom:60px;transform:translateX(-50%);
  width:36px;height:3px;border-radius:3px;background:var(--acc);
  transition:bottom .55s var(--ease),opacity .45s,transform .55s var(--ease);
}
.ck-cell:hover .ck-viz--stumps::after{bottom:78px;opacity:.35;transform:translateX(-50%) rotate(-8deg)}
/* a ball travelling its arc */
.ck-viz--arc{padding-inline:8px}
.ck-viz--arc svg{display:block;width:100%;height:92px;overflow:visible}
.ck-viz--arc .track{fill:none;stroke:rgba(0,71,187,.2);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.ck-viz--arc .draw{
  fill:none;stroke:var(--acc-2);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s var(--ease);
}
.ck-cell:hover .ck-viz--arc .draw{stroke-dashoffset:0}
.ck-ball{
  position:absolute;left:0;bottom:8px;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 70%);
  box-shadow:0 0 14px rgba(42,114,255,.85);
  transform:translateX(0);transition:transform 1.1s var(--ease);
}
.ck-cell:hover .ck-ball{transform:translateX(calc(100% + 240px))}
@supports (offset-path:path("M0 0 L1 1")){.ck-ball{
    left:auto;bottom:auto;top:24px;
    offset-path:path("M6 84 C 62 -2, 178 -2, 234 84");offset-distance:0%;
    transition:offset-distance 1.1s var(--ease);transform:none;
  }
.ck-cell:hover .ck-ball{offset-distance:100%;transform:none}}
/* fielders spreading to the boundary */
.ck-viz--field{display:block}
.ck-viz--field .ring{
  position:absolute;left:50%;top:calc(50% + 10px);transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;border:1px dashed rgba(0,71,187,.3);
  transition:transform .6s var(--ease);
}
.ck-cell:hover .ck-viz--field .ring{transform:translate(-50%,-50%) scale(1.12) rotate(22deg)}
.ck-viz--field i{
  position:absolute;left:50%;top:calc(50% + 10px);width:7px;height:7px;border-radius:50%;
  background:var(--acc-2);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-16px);
  transition:transform .6s var(--ease);
}
.ck-cell:hover .ck-viz--field i{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-44px)}
.ck-viz--field i:nth-child(2){transition-delay:.03s}
.ck-viz--field i:nth-child(3){transition-delay:.06s}
.ck-viz--field i:nth-child(4){transition-delay:.09s}
.ck-viz--field i:nth-child(5){transition-delay:.12s}
.ck-viz--field i:nth-child(6){transition-delay:.15s}
.ck-viz--field i:nth-child(7){transition-delay:.18s}
/* a run rate climbing */
.ck-viz--bars{display:flex;align-items:flex-end;justify-content:center;gap:9px}
.ck-viz--bars i{
  width:15px;border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(.3);
  background:linear-gradient(180deg,var(--acc-2),rgba(42,114,255,.18));
  transition:transform .6s var(--ease);
}
.ck-viz--bars i:nth-child(1){height:34px}
.ck-viz--bars i:nth-child(2){height:48px}
.ck-viz--bars i:nth-child(3){height:40px}
.ck-viz--bars i:nth-child(4){height:62px}
.ck-viz--bars i:nth-child(5){height:76px}
.ck-cell:hover .ck-viz--bars i{transform:scaleY(1)}
.ck-cell:hover .ck-viz--bars i:nth-child(2){transition-delay:.06s}
.ck-cell:hover .ck-viz--bars i:nth-child(3){transition-delay:.12s}
.ck-cell:hover .ck-viz--bars i:nth-child(4){transition-delay:.18s}
.ck-cell:hover .ck-viz--bars i:nth-child(5){transition-delay:.24s}
/* the lead cell: a blurred ground with a white card floating on it */
.ck-cell--lead{
  grid-column:span 2;grid-row:span 2;
  padding:clamp(18px,2.2vw,30px);border:0;
  background:#08183a;
  align-items:center;justify-content:center;
  box-shadow:0 26px 60px -34px rgba(8,24,58,.9);
}
.ck-cell--lead::before{z-index:3}
.ck-lead-bg{
  position:absolute;inset:0;z-index:0;
  background:url("../img/icc-ground.webp") center 32%/cover no-repeat;
  transform:scale(1.06);transition:transform 1.1s var(--ease);
}
.ck-cell--lead:hover .ck-lead-bg{transform:scale(1.12)}
.ck-lead-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,12,32,.3),rgba(4,12,32,.12) 42%,rgba(4,12,32,.4));
}
.ck-lead-card{
  position:relative;z-index:2;width:min(100%,410px);
  padding:clamp(20px,2.2vw,28px);border-radius:clamp(18px,2vw,26px);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 34px 70px -26px rgba(4,12,32,.6),inset 0 1px 0 #fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ck-cell--lead:hover .ck-lead-card{transform:translateY(-5px);box-shadow:0 44px 84px -26px rgba(4,12,32,.7)}
.ck-lead-hd{display:flex;align-items:center;gap:11px}
.ck-lead-ic{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(158deg,var(--acc-2),var(--acc));
  box-shadow:0 10px 20px -10px rgba(0,71,187,.7);
}
.ck-lead-ic svg{width:16px;height:16px;color:#fff}
.ck-lead-hd b{font-size:15px;font-weight:700;letter-spacing:-.026em;color:var(--ink)}
.ck-lead-tag{
  margin-left:auto;padding:5px 12px;border-radius:70px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
}
.ck-lead-big{display:flex;align-items:baseline;gap:9px;margin-top:18px}
.ck-lead-big b{font-size:clamp(40px,4.6vw,58px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ck-lead-big em{font-style:normal;font-size:13px;font-weight:700;color:#7a8aa4}
.ck-lead-card > p{margin-top:12px;font-size:13.4px;line-height:1.66;color:#5a6a83}
/* a run-rate line over a dotted grid, the way a scorecard plots it */
.ck-spark{
  position:relative;display:block;height:86px;margin-top:18px;border-radius:10px;overflow:hidden;
  background-image:radial-gradient(rgba(20,44,96,.16) 1px,transparent 1px);
  background-size:9px 9px;background-position:2px 2px;
}
.ck-spark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ck-spark .ghost{fill:none;stroke:rgba(20,44,96,.2);stroke-width:2;stroke-linecap:round}
.ck-spark .live{
  fill:none;stroke:url(#ckSpark);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;
}
.ck-spark.is-drawn .live{transition:stroke-dashoffset 1.5s var(--ease);stroke-dashoffset:0}
.ck-spark i{
  position:absolute;left:63%;top:76%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(42,114,255,.22);
  opacity:0;transform:scale(.4);transition:opacity .4s .9s,transform .5s .9s var(--ease);
}
.ck-spark.is-drawn i{opacity:1;transform:scale(1)}
.ck-lead-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin-top:18px}
.ck-lead-stats span{display:flex;flex-direction:column;gap:5px}
.ck-lead-stats span::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--acc-2);
}
.ck-lead-stats b{font-size:clamp(17px,1.9vw,22px);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ck-lead-stats em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#7a8aa4}
/* ---------------- the schedule ---------------- */
/* ---------------- why it matters ---------------- */
/* ---------------- a word from our CEO ---------------- */
.ck-ceo{position:relative;overflow:hidden;background:linear-gradient(180deg,#f2f6fc,#fff)}
.ck-ceo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--seam) 0 9px,transparent 9px 18px);opacity:.34;
}
.ck-ceo-in{position:relative;max-width:900px;margin-inline:auto;text-align:center}
.ck-ceo .ck-eyebrow{color:var(--acc)}
.ck-ceo-mark{
  display:block;margin:18px auto -6px;font:700 104px/.72 Georgia,"Times New Roman",serif;
  color:transparent;background:linear-gradient(180deg,var(--acc-2),rgba(0,71,187,.42));
  -webkit-background-clip:text;background-clip:text;
}
.ck-ceo-in blockquote{
  margin-top:18px;font-size:clamp(18px,2.5vw,30px);font-weight:500;line-height:1.5;
  letter-spacing:-.03em;color:var(--ink);
}
.ck-ceo-by{
  display:inline-flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,38px);
  padding:10px 22px 10px 10px;border-radius:70px;
  background:rgba(255,255,255,.9);border:1px solid rgba(20,44,96,.09);
  box-shadow:0 16px 36px -22px rgba(20,44,96,.34);
}
.ck-ceo-face{
  position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:#0b1018;box-shadow:0 0 0 2px rgba(42,114,255,.34);
}
.ck-ceo-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 20%;display:block}
.ck-ceo-who{display:flex;flex-direction:column;gap:3px;text-align:left}
.ck-ceo-who b{font-size:14.5px;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.ck-ceo-who em{font-style:normal;font-size:11.5px;color:#7a8aa4}
.ck-ceo-rules{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(24px,3vw,34px)}
.ck-ceo-rules i{width:min(120px,22vw);height:1px;background:linear-gradient(90deg,transparent,rgba(20,44,96,.22),transparent)}
.ck-ceo-rules span{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#8496b0}
/* ---------------- responsive ---------------- */
@media (max-width:1080px){.ck-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.ck-cell--lead{grid-column:span 2;grid-row:span 1}}
@media (max-width:720px){.ck-hero{min-height:0;padding-bottom:80px}
.ck-bento{grid-template-columns:1fr}
.ck-cell--lead{grid-column:span 1}
.ck-lead-stats{gap:14px 20px}}
/* ---------------- Asia Cup: the gallery ---------------- */
/* =================================================================
   PFL ROAD TO DUBAI CHAMPIONS SERIES
   Light throughout bar the banner. The two gradient panels are the
   STAR Copy pair — blue and sand. The corner is a dial, not a grid of
   cards. Scoped to .flx.
   ================================================================= */
/* ---------------- banner ---------------- */
/* ---------------- the two panels: the cage and the market ---------------- */
/* ---------------- the corner: a dial, not a grid ---------------- */
/* ---------------- what it means: a staggered strip ---------------- */
/* ---------------- a word from our CEO, as on the cricket pages ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   MENA INVESTMENT CONGRESS 2025
   A forum, not a fixture: the banner sets the artwork beside the words,
   the beliefs read as a ledger rather than a grid of cards, and the
   figures count themselves up. Scoped to .mnx.
   ================================================================= */
/* ---------------- banner: one plate, the words on the left ---------------- */
/* ---------------- the beliefs, as a ledger ---------------- */
/* ---------------- about the congress ---------------- */
/* ---------------- a word from our CEO ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   PROMOTIONS
   Light and glassy. The offers are coupons — notched, perforated, with
   a stub that carries the reward — on the brand's blue and sand
   gradients. Scoped to .prx.
   ================================================================= */
.prx{--acc:#0047bb;--acc-2:#2a72ff;--acc-3:#7fb2ff;--mint:#16e9d7;
     --sand:#dfc5ae;--sand-ink:#8a6440;--ink:#04060d}
/* ---------------- banner: the video plays light ---------------- */
.pm-hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(1 * var(--nav-h));
  min-height:min(760px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;padding:calc(var(--nav-h) + 62px) 0 78px;
  background:#eef2f8;
}
.pm-hero-video{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;display:block;
}

@media (max-width: 768px) {
    .pm-hero-video{display: none;}
}

.pm-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(244,247,252,.96) 0%,rgba(244,247,252,.86) 34%,rgba(244,247,252,.4) 58%,transparent 80%),
    linear-gradient(180deg,rgba(244,247,252,.7),transparent 26%,rgba(238,242,248,.62));
}
.pm-hero-in{position:relative;z-index:1;width:100%}
.pm-hero-copy{max-width:min(100%,700px)}
.pm-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
/* two lines: the type gives way rather than wrapping */
.pm-h1{margin-top:18px;font-size:clamp(31px,3.9vw,55px);font-weight:800;letter-spacing:-.05em;line-height:1.12;color:var(--ink)}
.pm-h1 span:first-child{white-space:nowrap}
.pm-h1 span{display:block}
.pm-h1 .lit{
  display:inline-block;padding-bottom:.08em;color:transparent;
  background:linear-gradient(96deg,var(--acc) 6%,var(--acc-2) 52%,#12b9ad 96%);
  -webkit-background-clip:text;background-clip:text;
}
.pm-lead{margin-top:20px;max-width:50ch;font-size:clamp(15px,1.5vw,17px);line-height:1.72;color:#4d5c74}
.pm-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pm-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:70px;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
  box-shadow:0 18px 38px -16px rgba(0,71,187,.65);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pm-btn:hover{transform:translateY(-3px);box-shadow:0 26px 48px -16px rgba(42,114,255,.75)}
.pm-btn svg{width:15px;height:15px;flex:none}
/* shared headings */
.pm-eyebrow-c{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);text-align:center}
.pm-h2{margin-top:16px;font-size:clamp(28px,3.7vw,50px);font-weight:800;letter-spacing:-.042em;line-height:1.06;text-align:center;color:var(--ink)}
.pm-sub{margin:18px auto 0;max-width:62ch;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.7;text-align:center;color:#4d5c74}
/* ---------------- the offers, as coupons ---------------- */
/* ---------------- the sign-off band ---------------- */
/* ---------------- how a claim works ---------------- */
/* ---------------- responsive ---------------- */
@media (max-width:760px){.pm-h1 span:first-child{white-space:normal}.pm-hero{min-height: 600px;}}
@media (max-width:640px){.pm-hero{min-height:500px;padding-bottom:56px}
.pm-hero::before{
    background:
      linear-gradient(180deg,rgba(244,247,252,.94) 0%,rgba(244,247,252,.8) 48%,rgba(244,247,252,.5) 100%);
  }}
/* =================================================================
   DEPOSIT BONUS / SWITCH REWARDS
   Shares the promotions palette. The two rewards sit on the blue and
   sand gradients, and the estimator does the arithmetic in front of you.
   Scoped to .dbx.
   ================================================================= */
/* ---------------- why switch ---------------- */
/* ---------------- the two rewards ---------------- */
/* ---------------- the estimator ---------------- */
/* ---------------- how to switch ---------------- */
/* ---------------- the account form ---------------- */
/* ---------------- open an account: its own section ---------------- */
@media (max-width:1000px){.ct-form-card[data-db-form]{max-width:560px;margin-inline:auto;width:100%}}
/* ---------------- responsive ---------------- */
/* =================================================================
   DEPOSIT BONUS 50/20
   Shares the promotions palette and its coupon language. The two tiers
   carry their percentage as the artwork; the estimator does the sums.
   ================================================================= */
/* ---------------- the estimator ---------------- */
/* ---------------- how to get it ---------------- */
/* =================================================================
   VPS
   Promotions palette. Six reasons on glass, the two reimbursement tiers
   as the centrepiece with a checker, then the house case as a hairline
   list. Scoped with the .prx page class.
   ================================================================= */
/* ---------------- the reimbursement tiers ---------------- */
/* =================================================================
   POINT MALL
   Promotions palette. The rewards read as a bento: one lead cell that
   states the deal, four category tiles filling the rest exactly.
   ================================================================= */
/* ---------------- how it works ---------------- */
/* =================================================================
   KNOWLEDGE ARTICLE
   The article furniture is the shared ar-* system; only the sign-up
   block and two body details are new.
   ================================================================= */
/* the body has no h3 rhythm of its own, so give the sub-headings room */
.ar-body h3{margin-top:26px;font-size:clamp(17px,1.9vw,20px);font-weight:700;
  letter-spacing:-.03em;line-height:1.3;color:var(--ink)}
.ar-body h3+p,.ar-body h3+.an-tablewrap{margin-top:12px}
/* tables sit in the body with the same rhythm as paragraphs */
.ar-body .an-tablewrap{margin:22px 0}
.ar-body .faq-list{margin-top:18px}
/* ---- guide cards: the same card the news index uses ---- */
.kc-guide{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.kc-guide:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.kc-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.kc-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.kc-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
/* each product keeps its own accent on the icon */
.kc-cat.commodities svg{color:#c9862f}
.kc-cat.indices svg{color:#0f9d7a}
.kc-cat.shares svg{color:#7b5cd6}
.kc-cat.crypto svg{color:#e08a1e}
.kc-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.kc-body{display:flex;flex-direction:column;padding:17px 18px 19px}
.kc-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.kc-h a{transition:color .25s}
.kc-guide:hover .kc-h a{color:var(--blue)}
.kc-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kc-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute)}
/* the plate sits flush to the card's lower edge, corners clipped by the card */
.kc-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.kc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.kc-guide:hover .kc-media img{transform:scale(1.05)}
.kc-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.kc-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.kc-readmark svg{width:15px;height:15px}
.kc-guide:hover .kc-readmark{transform:translate(2px,-2px);background:#fff}
/* every card is the same shape, so the plates line up across a row */
.kc-guide{height:100%}
.kc-body{flex:1}
/* ---- report cards: the same card the news index uses ---- */
/* ---- event page: the four stills inside the body ---- */
/* ---- coverage page: the outlet run inside the body, and clickable clippings ---- */
/* ---- footer brand line ---- */
.foot-brand{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,20px);min-width:0;flex-wrap:wrap}
.foot-tag{
  font-family:'Zodiak',Georgia,'Times New Roman',serif;
  font-size:clamp(13px,1.35vw,16px);font-weight:400;font-style:normal;
  letter-spacing:.01em;line-height:1.25;color:#DAE3ED;opacity:.4;
}
@media (max-width:640px){.foot-tag{flex-basis:100%}}
/* the intro panel and the steps list share a row, so they share a height */
.htrade>div{display:flex;min-width:0}
.htrade>div>.htrade-steps{flex:1}
/* =================================================================
   MT4 vs MT5 — the comparison dialog
   Dark and glassy: a lit edge, two gradient wells behind the card, and a
   blurred backdrop. Native <dialog>, so Escape and the backdrop are free.
   ================================================================= */
.cmp{
  width:min(940px,calc(100vw - 32px));max-height:min(88vh,900px);
  margin:auto;inset:0;
  padding:0;border:0;border-radius:clamp(18px,2.2vw,26px);background:none;overflow:visible;
  color:#eaf0fa;
}
.cmp::backdrop{background:rgba(2,5,12,.72);backdrop-filter:blur(8px) saturate(1.1)}
.cmp[open]{animation:cmpIn .34s var(--ease)}
@keyframes cmpIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmp[open]{animation:none}}
.cmp-card{
  position:relative;max-height:inherit;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(22px,2.6vw,34px);border-radius:inherit;
  /* two wells of light behind the glass, one blue and one teal */
  background:
    radial-gradient(58% 46% at 12% 0%,rgba(42,114,255,.28),transparent 62%),
    radial-gradient(46% 40% at 92% 8%,rgba(22,233,215,.16),transparent 64%),
    linear-gradient(180deg,rgba(16,24,44,.86),rgba(8,12,24,.92));
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.14);
}
/* a lit hairline across the top edge of the glass */
.cmp-card::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(127,178,255,.9),rgba(22,233,215,.7),transparent);
}
.cmp-x{
  position:sticky;top:0;float:right;z-index:2;margin:-4px -4px 0 0;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#cfe0ff;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s;
}
.cmp-x:hover{background:rgba(42,114,255,.85);border-color:transparent;color:#fff;transform:rotate(90deg)}
.cmp-x svg{width:15px;height:15px}
.cmp-head{text-align:center;max-width:56ch;margin-inline:auto}
.cmp-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#7fb2ff}
.cmp-h{margin-top:12px;font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.042em;
  line-height:1.08;color:#fff}
.cmp-sub{margin-top:12px;font-size:14.5px;line-height:1.7;color:#a9bcd8}
.cmp-tablewrap{
  margin-top:clamp(22px,2.6vw,32px);overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.cmp-table{
  width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13.5px;
}
.cmp-table th,.cmp-table td{
  padding:11px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);
}
.cmp-table th:last-child,.cmp-table td:last-child{border-right:0}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table thead th{background:rgba(255,255,255,.06);padding:14px 15px}
.cmp-table tbody th{width:34%;font-weight:700;color:#e4ecf8;background:rgba(255,255,255,.025)}
.cmp-table td{color:#9fb2ce}
/* the column for the page you are on is lit */
.cmp-table td.is-current{
  color:#fff;font-weight:600;
  background:linear-gradient(180deg,rgba(42,114,255,.16),rgba(42,114,255,.07));
}
.cmp-flag{
  display:inline-flex;flex-direction:column;gap:3px;
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:#e4ecf8;
}
.cmp-flag em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#16e9d7}
.cmp-flag.is-current{color:#fff}
.cmp-note{margin-top:clamp(18px,2.2vw,26px);font-size:13px;line-height:1.7;color:#8ea4c6}
.cmp-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
/* the dialog is dark, so its buttons cannot inherit the page's light ones */
.cmp-act .btn-primary{background:linear-gradient(180deg,#2a72ff,#0047bb);color:#fff;border:0;
  box-shadow:0 18px 38px -16px rgba(0,71,187,.9)}
.cmp-act .btn-primary:hover{background:linear-gradient(180deg,#4f9bff,#0a53d0)}
.cmp-act .btn-ghost{background:rgba(255,255,255,.08);color:#eaf0fa;
  border:1px solid rgba(255,255,255,.2)}
.cmp-act .btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}
/* the rail's last card is a button now: reset the control, but never its size —
   .mt-rail-card already sets width and min-height for the track */
button.mt-rail-card{
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
@media (max-width:640px){.cmp-card{padding:20px 14px}
.cmp-act .btn{width:100%;justify-content:center}}
/* =============================================================
   SWIPER MARQUEE RAILS (appended batch — plugin migration)
   Rails keep their page classes for the skin; Swiper owns layout.
   The wrapper's own gap is zeroed because Swiper applies the gap
   as spaceBetween margins; the linear timing keeps the marquee
   gliding instead of easing between slides.
   ============================================================= */
.st-marquee{overflow:hidden}
.st-marquee .swiper-wrapper{width:auto;gap:0;transition-timing-function:linear;will-change:transform}
/* slides keep the width their own card class declares; only the ticker's
   bare spans need auto width because the bundle defaults slides to 100% */
.st-marquee .swiper-slide{flex-shrink:0}
.nb-ticker-track .swiper-slide,.nb-ticker-track.swiper-wrapper span{width:auto}

/* =============================================================
   AOS REVEALS (appended batch — plugin migration)
   ============================================================= */
/* no-JS / reduced-motion safety: content is never left hidden */
html:not(.js-aos) [data-aos]{opacity:1 !important;transform:none !important;transition:none !important}
/* the house reveal travels 28px, not AOS's default 100px */
[data-aos="fade-up"]{transform:translate3d(0,28px,0)}

/* =============================================================
   MARKET ANALYSIS FAMILY (appended batch — analysis cadence pages)
   Shared by market-analysis.html and the four cadence pages:
   daily-technical, daily-fundamental, weekly, monthly.
   ============================================================= */
/* =================== MARKET ANALYSIS =================== */
.ma-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(660px,calc(100vh - var(--topbar-h,44px)));
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 56px) 0 24px;
  background:
    radial-gradient(80% 74% at 76% 16%,rgba(0,71,187,.34),transparent 62%),
    radial-gradient(54% 58% at 4% 92%,rgba(22,233,215,.1),transparent 62%),
    linear-gradient(180deg,#04060e 0%,#070c1c 50%,#04060e 100%);
}
.ma-hero-aura{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(90px)}
.ma-hero-aura.a1{width:560px;height:560px;top:-18%;right:2%;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 68%)}
.ma-hero-aura.a2{width:440px;height:440px;bottom:-14%;left:-6%;background:radial-gradient(circle,rgba(22,233,215,.16),transparent 68%)}
.ma-hero-in{position:relative;z-index:1;width:100%}
.ma-hero-copy{max-width:720px;min-width:0}
.ma-h1{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.036em;line-height:1.1;margin-top:16px}
.ma-lead{margin-top:20px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.68;color:#c2cfe4;max-width:62ch}
.ma-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---- reports ---- */
.ma-reports{background:#fff}
.ma-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px;border-radius:20px;margin-bottom:22px}
.ma-search{position:relative;flex:1 1 260px;display:flex;align-items:center}
.ma-search-ic{position:absolute;left:14px;width:17px;height:17px;color:var(--text-mute);pointer-events:none}
.ma-search-ic svg{width:100%;height:100%}
.ma-search input{
  width:100%;height:44px;padding:0 40px 0 40px;border-radius:70px;
  background:#fff;border:1px solid var(--line);font:inherit;font-size:14px;color:var(--text);
  transition:border-color .25s,box-shadow .25s;
}
.ma-search input::placeholder{color:var(--text-mute)}
.ma-search input:focus{outline:none;border-color:rgba(0,71,187,.42);box-shadow:0 0 0 4px rgba(0,71,187,.1)}
.ma-clear{position:absolute;right:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-mute);background:rgba(20,44,96,.07)}
.ma-clear svg{width:12px;height:12px}
.ma-clear:hover{color:var(--text);background:rgba(20,44,96,.13)}
.ma-cats{display:flex;flex-wrap:wrap;gap:8px}
.ma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ma-rep mark{background:rgba(255,214,102,.5);color:inherit;border-radius:3px;padding:0 2px}
.ma-empty{
  max-width:520px;margin:12px auto 0;text-align:center;padding:44px 30px;border-radius:22px;
  background:var(--bg-light);border:1px dashed var(--line);
}
.ma-empty-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:16px;display:grid;place-items:center;background:rgba(0,71,187,.08);color:var(--blue)}
.ma-empty-ic svg{width:24px;height:24px}
.ma-empty h3{font-size:19px;letter-spacing:-.022em}
.ma-empty p{margin:10px 0 20px;font-size:14px;color:var(--text-soft);line-height:1.6}
.ma-morerow{display:flex;justify-content:center;margin-top:34px}

/* ---- subscribe ---- */
.ma-sub{background:#fff}
.ma-sub-panel{
  position:relative;overflow:hidden;border-radius:28px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(26px,3.4vw,52px);align-items:center;
  padding:clamp(32px,4vw,54px);
  background:radial-gradient(74% 84% at 88% 6%,rgba(0,71,187,.46),transparent 62%),linear-gradient(152deg,#0b1224,#050914 56%,#04060e);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 46px 100px -50px rgba(0,20,70,.82),inset 0 1px 0 rgba(255,255,255,.13);
}
.ma-sub-aura{position:absolute;z-index:0;width:460px;height:460px;top:-38%;right:4%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.36),transparent 66%);filter:blur(60px)}
.ma-sub-copy,.ma-sub-form{position:relative;z-index:1;min-width:0}
.ma-sub-copy h2{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.032em;line-height:1.16}
.ma-sub-copy>p{margin-top:14px;font-size:14.5px;line-height:1.66;color:#a9bcdb;max-width:46ch}
.ma-sub-pts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.ma-sub-pts li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c2cfe4}
.ma-sub-pts svg{width:14px;height:14px;flex:none;color:#3fd9a8}
.ma-sub-field{display:flex;gap:10px;flex-wrap:wrap}
.ma-sub-field input{
  flex:1 1 200px;height:52px;padding:0 18px;border-radius:14px;font:inherit;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.ma-sub-field input::placeholder{color:#7f92b3}
.ma-sub-field input:focus{outline:none;background:rgba(255,255,255,.11);border-color:rgba(120,175,255,.6);box-shadow:0 0 0 4px rgba(0,71,187,.24)}
.ma-sub-field .btn{height:52px;border-radius:14px;padding-inline:24px}
.ma-sub-note{margin-top:14px;font-size:11.5px;line-height:1.5;color:#7f92b3}
.ma-sub-note.is-ok{color:#3fd9a8}
.ma-sub-note.is-err{color:#ff8078}

/* ---- report cards: the same card the news index uses ---- */
.ma-rep{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;height:100%;padding:0;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.ma-rep:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ma-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.ma-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.ma-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.ma-cat.fa svg{color:#0f9d76}
.ma-cat.wk svg{color:#a2650a}
.ma-cat.mo svg{color:#6d3fd9}
.ma-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.ma-body{display:flex;flex-direction:column;flex:1;padding:17px 18px 19px}
.ma-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.ma-h a{transition:color .25s}
.ma-rep:hover .ma-h a{color:var(--blue)}
.ma-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ma-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute)}
.ma-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.ma-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ma-rep:hover .ma-media img{transform:scale(1.05)}
.ma-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.ma-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.ma-readmark svg{width:15px;height:15px}
.ma-rep:hover .ma-readmark{transform:translate(2px,-2px);background:#fff}
.ma-rep mark{background:rgba(255,214,102,.5);color:inherit;border-radius:3px;padding:0 2px}
  
/* ---- family responsive ---- */
@media (max-width:1080px){
.ma-hero-copy{max-width:none}
.ma-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-sub-panel{grid-template-columns:1fr;gap:30px}
}
@media (max-width:860px){
.ma-hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 54px}
.ma-bar{padding:12px}
}
@media (max-width:720px){
.ma-hact .btn{width:100%;justify-content:center}
.ma-sub-field .btn{flex:1 1 100%}
}
@media (max-width:520px){
.ma-cats{width:100%}
}

/* =============================================================
   EVENTS FAMILY (appended batch — expo page)
   Shared by events.html and expo.html: the gallery rail and the
   tinted section shells.
   ============================================================= */
/* =================================================================
   EVENTS — a stage gallery, and the shared kinds/band pattern
   ================================================================= */
.ev-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.ev-sec>.container{position:relative;z-index:1}
/* ---- gallery: a full-bleed editorial rail, captions under the frame ---- */
.ev-gal-sec{position:relative;overflow:clip;background:var(--bg-light-2)}
.ev-gal-sec>.container{position:relative;z-index:1}
.ev-rail{
  position:relative;width:100vw;margin-left:calc(-50vw + 50%);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;overscroll-behavior-x:contain;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ev-rail::-webkit-scrollbar{display:none}
.ev-rail.dragging{cursor:grabbing}
.ev-track{display:flex;gap:clamp(18px,2.4vw,32px);width:max-content;padding:6px max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
.ev-frame{flex:0 0 clamp(240px,25vw,340px)}
.ev-shot{
  position:relative;display:block;overflow:hidden;border-radius:20px;aspect-ratio:4/5;
  background:rgba(20,44,96,.05);
  box-shadow:0 24px 50px -30px rgba(20,44,96,.36);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.ev-shot img{
  position:absolute;top:0;left:0;width:112%;height:100%;object-fit:cover;
  transform:translate3d(calc(var(--px,.5) * -10.7%),0,0);
  will-change:transform;
}
.ev-frame:hover .ev-shot{transform:translateY(-6px);box-shadow:0 34px 64px -30px rgba(20,44,96,.5)}
.ev-cap{margin-top:18px}
.ev-cap b{display:block;font-size:15.5px;letter-spacing:-.026em;line-height:1.34;color:var(--text)}
.ev-cap em{display:block;margin-top:6px;font-style:normal;font-size:13px;line-height:1.6;color:var(--text-soft)}
.ev-progress{display:block;width:min(320px,54vw);height:2px;margin:40px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
.ev-progress i{display:block;height:100%;width:22%;border-radius:2px;background:var(--blue);transform-origin:left;transition:transform .25s linear}
.ev-hint{margin-top:16px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
@media (max-width:720px){.ev-frame{flex:0 0 clamp(210px,62vw,270px)}
.ev-cap b{font-size:14.5px}}

/* =============================================================
   CT-CHECK CHECKED STATE (appended batch — banner account form)
   The an-box never showed its tick anywhere on the site; now every
   ct-check (contact, partnership, promo forms) fills blue when
   checked, radios draw round, and keyboard focus is visible.
   ============================================================= */
.ct-check input:checked + .an-box{background:var(--blue);border-color:var(--blue);color:#fff}
.ct-check input:focus-visible + .an-box{outline:2px solid var(--blue);outline-offset:2px}
.ct-check input[type="radio"] + .an-box{border-radius:50%}
.ct-check:hover .an-box{border-color:rgba(0,71,187,.45)}

/* =============================================================
   KNOWLEDGE FAMILY HERO (appended batch — knowledge-basics page)
   Shared by knowledge.html and knowledge-basics.html.
   ============================================================= */
.kc-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  display:flex;align-items:center;
  min-height:min(660px,calc(100vh - var(--topbar-h,44px)));
  padding:calc(var(--nav-h) + 56px) 0 60px;
  background:
    radial-gradient(72% 68% at 50% 6%,rgba(0,71,187,.36),transparent 62%),
    radial-gradient(48% 52% at 8% 96%,rgba(22,233,215,.11),transparent 62%),
    linear-gradient(180deg,#04060e 0%,#070c1c 48%,#04060e 100%);
}
.kc-hero-aura{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(96px)}
.kc-hero-aura.a1{width:600px;height:600px;top:-20%;right:2%;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 68%)}
.kc-hero-aura.a2{width:440px;height:440px;bottom:-22%;right:-6%;background:radial-gradient(circle,rgba(22,233,215,.16),transparent 68%)}
.kc-hero-in{position:relative;z-index:1;width:100%}
.kc-hero-copy{max-width:720px;min-width:0}
.kc-h1{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.038em;line-height:1.06;margin-top:16px}
.kc-lead{margin-top:20px;max-width:64ch;font-size:clamp(15px,1.5vw,17px);line-height:1.68;color:#c2cfe4}
.kc-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
@media (max-width:1080px){
.kc-hero-copy{max-width:none}
}
@media (max-width:860px){
.kc-hero{min-height:auto;padding:calc(var(--nav-h) + 44px) 0 56px}
}
@media (max-width:720px){
.kc-hact .btn{width:100%;justify-content:center}
.kc-h1 br,.kc-lead br,.kc-path .head-sub br{display:none}
}
.kc-guides{background:#fff}

/* the more-row must wrap when it carries two buttons (350px floor) */
.ma-morerow{flex-wrap:wrap;gap:12px}

/* =============================================================
   KNOWLEDGE VIDEO CARDS (appended batch — knowledge-videos page)
   The feature tile and play chip, shared by the centre's theatre
   and the full video library.
   ============================================================= */
.kc-feature{display:flex}
.kc-feature-media{
  position:relative;display:block;width:100%;border-radius:22px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 34px 70px -38px rgba(20,44,96,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.kc-feature-media:hover{transform:translateY(-4px);box-shadow:0 44px 84px -40px rgba(20,44,96,.62)}
.kc-playlist{justify-content:flex-start}
.kc-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kc-feature-media:hover img{transform:scale(1.05)}
.kc-feature-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.1) 0%,rgba(4,6,14,.28) 46%,rgba(4,6,14,.88) 100%)}
.kc-feature-meta{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.kc-feature-chip{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(0,71,187,.86);padding:6px 12px;border-radius:70px}
.kc-feature-dur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(4,6,14,.62);padding:6px 11px;border-radius:70px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.kc-feature-dur svg{width:13px;height:13px}
.kc-feature-copy{position:absolute;left:22px;right:22px;bottom:26px;display:flex;flex-direction:column;gap:7px}
.kc-feature-copy b{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.16}
.kc-feature-copy em{font-style:normal;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch}
.kc-feature-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.kc-feature-bar i{display:block;height:100%;width:26%;background:linear-gradient(90deg,#4d94ff,#16e9d7);transition:width .7s var(--ease)}
.kc-feature-media:hover .kc-feature-bar i{width:62%}
.kc-playlist{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px -24px rgba(20,44,96,.26)}
.kc-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--blue);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transition:transform .45s var(--ease),background .35s;
}
.kc-play svg{width:24px;height:24px;margin-left:3px}
.kc-feature-media:hover .kc-play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
@media (prefers-reduced-motion:no-preference){
.kc-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:kcPing 2.8s ease-out infinite}
}

/* =============================================================
   NEWS SPOTLIGHT CARDS (appended batch — spotlight page)
   The dark glass appearance cards, shared by the news room and
   the full spotlight archive.
   ============================================================= */
.nr-meta--light{color:#93a4c2}
.nr-spot{
  position:relative;color:#fff;
  background:
    radial-gradient(80% 60% at 12% 0%,rgba(0,44,130,.42),transparent 62%),
    linear-gradient(180deg,#04060e,#080b16 58%,#04060e);
}
.nr-spot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.nr-spot-all{color:#9fc0ff}
.nr-spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nr-spot-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.024));
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.nr-spot-card:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.42);box-shadow:0 30px 64px -34px rgba(0,60,180,.6)}
.nr-spot-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.nr-spot-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.nr-spot-card:hover .nr-spot-media img{transform:scale(1.05)}
.nr-spot-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.2) 0%,rgba(4,8,18,.05) 40%,rgba(4,8,18,.62) 100%)}
.nr-spot-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 12px 30px -8px rgba(0,0,0,.55);
  transition:transform .35s var(--ease),background .3s;
}
.nr-spot-play svg{width:19px;height:19px;margin-left:3px}
.nr-spot-card:hover .nr-spot-play{transform:scale(1.08);background:#fff}
.nr-spot-body{display:flex;flex-direction:column;padding:18px 20px 22px}
.nr-spot-body h3{margin-top:10px;font-size:17px;letter-spacing:-.02em;line-height:1.3;color:#fff;transition:color .25s}
.nr-spot-card:hover .nr-spot-body h3{color:#bcd6ff}
.nr-spot-body p{margin-top:9px;font-size:13.5px;line-height:1.6;color:#a7b6d0}
@media (max-width:1080px){
.nr-spot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.nr-spot-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
.nr-spot-head{align-items:flex-start}
}

/* =============================================================
   LEGAL PAGES (appended batch — policy & disclaimer family)
   Dark title band, sticky frosted contents rail with scroll-spy,
   and numbered glass section cards. Shared by privacy-policy-app
   and star-copy-disclaimer.
   ============================================================= */
/* =================================================================
   PRIVACY & SECURITY POLICY — a legal document you can actually read.
   A quiet title band, a sticky frosted contents rail that knows where
   you are, and the policy itself in numbered glass cards.
   ================================================================= */
.pp-top{position:relative;isolation:isolate;overflow:clip;color:#fff;padding:clamp(52px,6.5vw,92px) 0 clamp(36px,4.4vw,56px);
  background:
    radial-gradient(70% 90% at 14% -10%,rgba(0,64,190,.5),transparent 62%),
    radial-gradient(50% 70% at 88% 10%,rgba(22,233,215,.1),transparent 58%),
    linear-gradient(180deg,#04060e,#081020 60%,#04060e)}
.pp-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,150,255,.5),rgba(22,233,215,.4),transparent)}
.pp-top>.container{position:relative;z-index:1}
.pp-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:40px;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#9fc0ff;
  background:rgba(90,150,255,.1);border:1px solid rgba(90,150,255,.24)}
.pp-h1{margin-top:16px;font-size:clamp(28px,3.8vw,48px);font-weight:800;letter-spacing:-.038em;line-height:1.08;color:#fff}
.pp-h1 span{color:#5b9dff}
.pp-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-size:12.5px;font-weight:600;color:#8ea4c6}
.pp-meta b{color:#cdd9ec;font-weight:700}

.pp-body{position:relative;isolation:isolate;overflow:clip;padding:clamp(30px,4vw,56px) 0 clamp(64px,7vw,100px);
  background:
    radial-gradient(44% 38% at 88% 8%,rgba(0,71,187,.05),transparent 60%),
    radial-gradient(40% 36% at 6% 90%,rgba(22,233,215,.05),transparent 58%),
    var(--bg-light-2)}
.pp-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}

/* the contents rail */
.pp-toc{position:sticky;top:calc(var(--chrome-h,114px) + 18px);
  border-radius:22px;padding:20px 8px 20px 20px;max-height:calc(100vh - var(--chrome-h,114px) - 40px);overflow:auto;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 24px 54px -36px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.9);
  scrollbar-width:thin}
.pp-toc b{display:block;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);margin-bottom:12px}
.pp-toc a{display:flex;gap:9px;align-items:baseline;padding:7px 10px;border-radius:10px;
  font-size:12.5px;line-height:1.4;color:var(--text-soft);transition:background .25s,color .25s}
.pp-toc a em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--text-mute);min-width:16px;transition:color .25s}
.pp-toc a:hover{background:rgba(0,71,187,.05);color:var(--text)}
.pp-toc a.is-on{background:rgba(0,71,187,.09);color:var(--blue);font-weight:600}
.pp-toc a.is-on em{color:var(--blue)}

/* the sections */
.pp-secs{display:grid;gap:clamp(14px,1.8vw,22px)}
.pp-card{border-radius:clamp(18px,2vw,26px);padding:clamp(22px,2.8vw,34px);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 22px 50px -36px rgba(20,44,96,.3),inset 0 1px 0 rgba(255,255,255,.9);
  scroll-margin-top:calc(var(--chrome-h,114px) + 20px);
  transition:border-color .35s,box-shadow .35s}
.pp-card:target,.pp-card.is-here{border-color:rgba(0,71,187,.28);box-shadow:0 30px 60px -36px rgba(0,60,180,.4),inset 0 1px 0 rgba(255,255,255,.9)}
.pp-card h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(16.5px,1.7vw,20px);letter-spacing:-.022em;line-height:1.3;color:var(--ink)}
.pp-num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  font-size:12.5px;font-weight:800;color:var(--blue);
  background:rgba(0,71,187,.08);border:1px solid rgba(0,71,187,.14);transform:translateY(4px)}
.pp-card p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--text-soft)}
.pp-card ul{margin-top:12px;display:grid;gap:8px;padding-left:2px}
.pp-card li{display:flex;gap:10px;font-size:13.5px;line-height:1.65;color:var(--text-soft)}
.pp-card li svg{flex:none;width:14px;height:14px;margin-top:4px;color:var(--blue)}
.pp-card a{color:var(--blue);font-weight:600}

/* contact card stands out a touch */
.pp-card--contact{background:linear-gradient(180deg,rgba(0,71,187,.08),rgba(255,255,255,.7) 55%)}

@media (max-width:980px){
  .pp-grid{grid-template-columns:1fr}
  .pp-toc{position:static;max-height:none;order:-1}
}

/* =============================================================
   STAR PANEL FAN (appended batch — star-matrix page)
   The auto-advancing benefit panels, shared by STAR Copy and
   STAR Matrix.
   ============================================================= */
.sc-fan{display:flex;gap:14px;height:372px}
.sc-panel{
  position:relative;flex:0 0 96px;min-width:96px;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(0,71,187,.09),rgba(255,255,255,.62) 48%);
  transition:flex-grow .62s var(--ease),flex-basis .62s var(--ease),min-width .62s var(--ease),
             box-shadow .42s var(--ease),border-color .3s;
}
.sc-panel:nth-child(even){background:linear-gradient(180deg,rgba(223,197,174,.5),rgba(255,255,255,.62) 50%)}
.sc-panel.is-on{flex:1 1 0;min-width:0;border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.sc-panel.is-on:nth-child(even){border-color:rgba(138,100,64,.34)}
.sc-panel-hit{position:absolute;inset:0;z-index:2;width:100%;font-size:0;color:transparent;padding:0}
.sc-panel-hit:focus-visible{outline:2px solid var(--blue);outline-offset:-4px;border-radius:24px}
.sc-panel-n{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--blue);
  transition:left .55s var(--ease),transform .55s var(--ease);
}
.sc-panel:nth-child(even) .sc-panel-n{color:#8a6440}
.sc-panel.is-on .sc-panel-n{left:28px;transform:none}
.sc-panel-vt{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  transition:opacity .3s;
}
.sc-panel.is-on .sc-panel-vt{opacity:0}
.sc-panel-in{
  position:absolute;top:58px;left:28px;right:28px;bottom:30px;min-width:266px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:11px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s .14s var(--ease),transform .5s .14s var(--ease);
}
.sc-panel.is-on .sc-panel-in{opacity:1;transform:none}
.sc-panel-ico{position:absolute;right:2px;top:42%;transform:translateY(-50%);width:min(38%,166px);height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.24))}
.sc-panel-in b{max-width:26ch;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.03em;line-height:1.2;color:var(--text)}
.sc-panel-in em{max-width:46ch;font-style:normal;font-size:13.5px;line-height:1.68;color:var(--text-soft)}
.sc-panel-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(20,44,96,.07);opacity:0;transition:opacity .3s}
.sc-panel.is-on .sc-panel-bar{opacity:1}
.sc-panel-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--blue)}
.sc-panel:nth-child(even) .sc-panel-bar i{background:#8a6440}
@media (prefers-reduced-motion:no-preference){
.sc-panel.is-on .sc-panel-bar i{animation:scDwell 6.5s linear forwards}
}
.sc-fan:hover .sc-panel.is-on .sc-panel-bar i,.sc-fan:focus-within .sc-panel.is-on .sc-panel-bar i,.sc-fan:not(.is-live) .sc-panel.is-on .sc-panel-bar i{animation-play-state:paused}
@media (max-width:1000px){
.sc-fan{display:grid;grid-template-columns:1fr;height:auto}
.sc-panel,.sc-panel.is-on{flex:auto;min-width:0;padding:26px 24px;box-shadow:0 18px 40px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.96)}
.sc-panel-hit,.sc-panel-vt,.sc-panel-bar{display:none}
.sc-panel-n,.sc-panel.is-on .sc-panel-n{position:static;left:auto;transform:none;display:block;margin-bottom:16px}
.sc-panel-in,.sc-panel.is-on .sc-panel-in{position:static;min-width:0;opacity:1;transform:none}
.sc-panel-ico{position:static;top:auto;right:auto;transform:none;width:84px;margin-bottom:6px}
.sc-panel-in b,.sc-panel-in em{max-width:none}
}
/* the fan's light section shell */
.sc-ben{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 8% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light-2)}
.sc-ben>.container{position:relative;z-index:1}

/* =============================================================
   WEBINAR REPLAY CARDS (appended batch — previous-webinars page)
   Shared by webinars.html and the replay archive.
   ============================================================= */
.wb-rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wb-rep{
  position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.wb-rep:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.wb-rep-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.wb-rep-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.wb-rep-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.wb-rep-cat i{width:3px;height:3px;border-radius:50%;background:var(--text-mute);flex:none;margin-inline:1px}
.wb-rep-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.wb-rep-body{padding:17px 18px 19px}
.wb-rep-title{font-size:17.5px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.wb-rep-title a{transition:color .25s}
.wb-rep:hover .wb-rep-title a{color:var(--blue)}
.wb-rep-desc{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wb-rep-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.wb-rep-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wb-rep:hover .wb-rep-media img{transform:scale(1.05)}
.wb-rep-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.12) 0%,rgba(4,8,18,.08) 46%,rgba(4,8,18,.5) 100%);
}
.wb-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
  transition:transform .35s var(--ease),background .3s;
}
.wb-play svg{width:19px;height:19px;margin-left:3px}
.wb-rep:hover .wb-play{transform:scale(1.08);background:#fff}
.wb-dur,.wb-lvl{
  position:absolute;bottom:12px;z-index:2;font-size:11px;font-weight:600;color:#fff;
  padding:5px 11px;border-radius:70px;background:rgba(8,14,26,.56);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wb-dur{left:12px;font-variant-numeric:tabular-nums}
.wb-lvl{right:12px;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.wb-allrow{display:flex;justify-content:center;margin-top:40px}
@media (max-width:1080px){
.wb-rep-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.wb-rep-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}
/* the replay archive's light section shell */
.wb-sched{
  background:
    radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),
    radial-gradient(52% 44% at 96% 16%,rgba(22,233,215,.07),transparent 62%),
    radial-gradient(56% 40% at 48% 104%,rgba(0,71,187,.06),transparent 62%),
    var(--bg-light);
}

/* =============================================================
   MEGA MENU — FULL-LENGTH MINIMAL (appended batch, preview)
   The dropdown becomes one full-width panel under the header:
   flat near-black, text-only columns, no icon chips — headings
   in muted grey, items as plain links aligned to the site grid.
   ============================================================= */
.mega,.mega--center{
  left:0;right:0;top:100%;
  max-width:none;width:auto;
  border-radius:0;
  background:#070a12;
  border-top:1px solid rgba(255,255,255,.06);
  border-left:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:0 48px 80px -38px rgba(0,0,0,.85);
  padding:40px max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter))) 48px;
  gap:clamp(30px,4.5vw,84px);
  transform:translateY(8px);
}
.mega--center{transform:translateY(8px)}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega,
.nav-item.has-mega:hover .mega--center,.nav-item.has-mega:focus-within .mega--center{transform:translateY(0)}
.mega .mega-ico{display:none}
.mega-col{padding:0}
.mega-head{padding-left:0;margin-bottom:14px;text-transform:none;letter-spacing:.02em;font-size:13px;font-weight:600;color:#8592ad}
.mega-item{gap:0;padding:10px 0;border-radius:0;background:none}
.mega-item:hover,.mega-item:focus-visible{background:none}
.mega-txt b{font-weight:500;font-size:14.5px;color:#e6ebf4;transition:color .2s}
.mega-item:hover .mega-txt b,.mega-item:focus-visible .mega-txt b{color:#5b9dff}
.mega-txt em{display:none}
.mega-subchev{margin-left:6px}
/* the panel must span the header, not the container */
.site-header .nav{position:static}
/* alignment pass: arrows lead from the left, columns tighten, dividers go */
.mega-col+.mega-col{border-left:0}
.mega,.mega--center{gap:clamp(40px,5vw,72px)}
.mega-col{min-width:210px}
.mega-item{align-items:center}
.mega-item .mega-chev,.mega-item .mega-subchev{order:-1;margin:0 10px 0 0;width:14px;height:14px;flex:none;color:#6d7893}
.mega-item:hover .mega-chev{color:#5b9dff;transform:translateX(2px)}
.mega-item .mega-subchev{transform:none}
.mega-item[aria-expanded="true"] .mega-subchev,.mega-sub.is-open .mega-subchev{transform:rotate(90deg);color:#5b9dff}
.mega-subitems{padding-left:24px}
.fly-inner{margin-left:0;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
/* arrows belong to the children: parents keep their indicator beside the
   label, every sub-menu entry leads with a small arrow */
.mega-item .mega-chev,.mega-item .mega-subchev{order:0;margin:0 0 0 8px}
.mega-item:hover .mega-chev{transform:none}
.mega-subitems a,.fly-group a{display:flex;align-items:center}
.mega-subitems a::before,.fly-group a:not(:first-child)::before,.fly-group h5+a::before{content:"›";margin-right:9px;font-weight:600;color:#6d7893;transition:color .2s}
.fly-group a::before{content:"›";margin-right:9px;font-weight:600;color:#6d7893;transition:color .2s}
.fly-group h5 a::before{content:none}
.mega-subitems a:hover::before,.fly-group a:hover::before{color:#5b9dff}
.mega-subitems{padding-left:8px}
/* columns take their natural width — the gap alone does the spacing,
   so the flyout docks right beside its column */
.mega-col{min-width:0}
.mega-flyout .fly-inner{margin-left:0}
/* the column wrapper stays content-sized so the flyout docks beside it,
   and the current page reads as blue text — not a boxed pill */
.mega-main{display:flex;gap:clamp(40px,5vw,72px);flex:0 0 auto}
.mega-item:hover,.mega-item.active,.mega-item.is-current{background:none}
.mega-item.active .mega-txt b,.mega-item.is-current .mega-txt b{color:#5b9dff}
.mega-item.active .mega-chev,.mega-item.is-current .mega-chev{color:#5b9dff}
/* the flyout lays its groups side by side — a third of the height */
.mega.flyout-open .mega-flyout{width:auto;max-width:640px}
.mega-flyout .fly-inner{width:100%;min-width:0}
.mega-flyout [data-fly-panel].is-on{display:flex;gap:clamp(14px,1.6vw,26px);align-items:flex-start}
.mega-flyout .fly-title{flex:none}
.mega-flyout [data-fly-panel].is-on .fly-title{width:100%;margin-bottom:4px}
.mega-flyout [data-fly-panel].is-on{flex-wrap:wrap}
.mega-flyout .fly-group{margin-bottom:0;min-width:118px;flex:1}
/* the navbar and the panel are one surface: same black glass */
.site-header,.site-header.scrolled{
  background:rgba(5,8,15,.82);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:none;border-bottom:1px solid rgba(255,255,255,.05)}
.mega,.mega--center{border-top:0}
/* where the browser cannot blur the backdrop, the glass goes solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,.site-header.scrolled{background:rgba(5,8,15,.98)}
}
/* the flyout overlays inside the panel instead of stretching it —
   the menu's height never moves */
.mega-flyout{position:absolute;top:34px;bottom:40px;
  left:calc(max(var(--gutter),(100vw - var(--maxw))/2 + var(--gutter)) + 620px);
  right:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));
  width:auto;overflow:visible;transition:opacity .28s var(--ease);opacity:0;pointer-events:none}
.mega.flyout-open .mega-flyout{width:auto;opacity:1;pointer-events:auto}
.mega-flyout .fly-inner{height:100%;overflow:auto;scrollbar-width:thin}
/* menus crossfade in place — no slide offset, so the panel never
   detaches from the navbar while switching items */
.mega,.mega--center{transform:none}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega,
.nav-item.has-mega:hover .mega--center,.nav-item.has-mega:focus-within .mega--center{transform:none}
.site-header:has(.nav-item.has-mega:hover){border-bottom-color:transparent}
/* identical solid panels swap instantly — a crossfade only lets the
   page ghost through and reads as a colour shift */
.mega,.mega--center{transition:none}

/* ===== MOBILE HARDENING (appended batch) =====
   Root-level guard: no page may scroll sideways on a phone, whatever an
   individual element does. body already clips; the root now matches. */
html{overflow-x:clip}

/* ===== I18N HARDENING + MOBILE MENU V2 (appended batch) =====
   Dev feedback: fixed-width chrome breaks once EN copy is swapped for
   CN/AR/JP. The 130% width reserve now reaches the disclaimer bar, the
   cookie pill and the top nav; the mobile menu gains the sub-category
   accordion and a language switcher. */
/* 1 — top disclaimer: copy may run long in translation; scale and wrap */
.topbar p{font-size:clamp(10.5px,1.4vw,12.5px);line-height:1.45}
@media (max-width:640px){.topbar .container{padding-block:9px}}
/* 1 — cookie pill: text gets flexible room and the pill may wrap */
.cookie{flex-wrap:wrap;row-gap:8px}
.cookie-text{flex:1 1 200px;min-width:0;font-size:clamp(12.5px,1.6vw,14px);line-height:1.45}
@media (max-width:560px){
  .cookie{left:14px;right:14px;max-width:none;border-radius:20px;padding:12px 14px;transform:translateY(16px)}
  .cookie.show{transform:none}
}
/* 4 — nav: labels never break to a second line; spacing flexes instead */
.nav-menu{gap:clamp(2px,0.6vw,10px)}
.nav-menu .nav-link{white-space:nowrap}
.mega-head{white-space:nowrap}
/* 2 — mobile menu v2: sub-category accordion + language switcher */
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;color:#dbe0ec;font:500 17px/1.3 inherit;font-family:inherit;text-align:left;
  padding:13px 6px;border-radius:10px;cursor:pointer}
.mobile-menu .mm-top:hover{background:rgba(255,255,255,.05)}
.mm-top svg{width:15px;height:15px;flex:0 0 auto;color:#8b97ae;transition:transform .3s var(--ease)}
.mm-acc.open .mm-top svg{transform:rotate(180deg)}
.mm-panel{display:none;padding:0 6px 8px}
.mm-acc.open .mm-panel{display:block}
.mm-group{display:block;margin:12px 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5b9dff}
.mobile-menu .mm-panel a{display:block;padding:8px;font-size:14.5px;font-weight:500;color:#c7cddb;border-radius:8px}
.mobile-menu .mm-panel a:hover{background:rgba(255,255,255,.05)}
.mm-lang{margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.mm-lang b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8b97ae;margin-bottom:10px}
.mm-langs{display:flex;flex-wrap:wrap;gap:8px}
.mm-langs button{padding:7px 13px;border-radius:24px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#c7cddb;font:600 12.5px/1 inherit;font-family:inherit;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.mm-langs button:hover{border-color:rgba(255,255,255,.35);color:#fff}
.mm-langs button.is-on{background:var(--blue);border-color:transparent;color:#fff}

/* ===== MOBILE MENU V3 — full-sheet redesign (appended batch) =====
   Modern sheet menu in the capital.com / Rise grammar: logo + close
   header, search that filters the links, oversized drill items with
   right chevrons, pinned pill CTAs and a folded language switcher. */
.mobile-menu{width:min(100vw,470px);padding:18px 22px 30px;display:flex;flex-direction:column}
.mobile-menu nav{flex:1;display:flex;flex-direction:column;gap:2px}
.mm-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mm-head-row img{width:150px;height:auto;display:block}
.mm-x{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e6ecf7;cursor:pointer;
  transition:background .25s,transform .35s var(--ease)}
.mm-x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.mm-x svg{width:16px;height:16px}
.mm-search{position:relative;margin:2px 0 14px}
.mm-search svg{position:absolute;left:15px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:#8b97ae}
.mm-search input{width:100%;padding:13px 16px 13px 41px;border-radius:40px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:#fff;font:500 14.5px/1.2 inherit;font-family:inherit;outline:none;transition:border-color .25s}
.mm-search input::placeholder{color:#8b97ae}
.mm-search input:focus{border-color:rgba(91,157,255,.55)}
.mobile-menu .mm-top{font-size:clamp(22px,6vw,26px);font-weight:700;letter-spacing:-.022em;
  color:#fff;padding:14px 4px}
.mm-top svg{width:18px;height:18px}
.mm-acc.open .mm-top svg{transform:rotate(90deg)}
.mm-panel{padding:0 4px 12px}
.mobile-menu .mm-panel a{font-size:15px;padding:9px 8px}
.mm-new{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:#ff8a3d;text-transform:uppercase;font-style:normal}
.mm-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mm-cta a{display:flex;align-items:center;justify-content:center;width:100%;height:52px;
  border-radius:40px;font-size:15.5px;font-weight:700;padding:0}
.mm-cta .mm-login{background:#eef1f6;color:#0c1526}
.mm-cta .mm-login:hover{background:#fff}
.mobile-menu .mm-cta .btn{margin:0;width:100%;height:52px;border-radius:40px}
.mobile-menu .mm-lang{margin-top:auto;padding-top:22px;border-top:0}
.mm-lang-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  color:#dbe0ec;font:600 14.5px/1 inherit;font-family:inherit;cursor:pointer;padding:6px 4px}
.mm-lang-btn svg{width:14px;height:14px;color:#8b97ae;transition:transform .3s var(--ease)}
.mm-lang.open .mm-lang-btn svg{transform:rotate(180deg)}
.mobile-menu .mm-langs{display:none;margin-top:12px}
.mm-lang.open .mm-langs{display:flex}
.mm-empty{padding:18px 6px;font-size:13.5px;color:#8b97ae}

/* ===== MOBILE SCROLL + LANGUAGE POLISH (appended batch) =====
   Native scrolling on phones (Lenis now stands down there); the sticky
   chrome drops its expensive blur below 720px, and the sheet menu's
   language switcher moves up under the CTAs with full language names. */
@media (max-width:720px){
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,8,15,.97)}
  .topbar{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.mobile-menu .mm-lang{margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)}
.mobile-menu .mm-langs button{font-size:13px;padding:8px 14px}

/* ===== LANGUAGE PANEL — MEGA CLOTH, SCREEN CENTRE (appended batch) =====
   The panel lives inside the blurred header, and Chrome cannot nest
   backdrop-filters — the same quirk that made the mega menu solid. It now
   wears the mega panel's exact background and sits dead centre. */
/* the blurred header is the panel's containing block, so viewport maths
   resolve against the bar — hang it centred beneath the nav, mega-style */
.lang-pop{top:calc(100% + 12px);background:#070a12;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(255,255,255,.1);max-height:min(78vh,calc(100vh - 160px))}

/* ===== MOBILE SHEET STANDS DOWN ON DESKTOP (appended batch) =====
   The sheet could linger open when the viewport grew past the hamburger
   breakpoint (devtools closing, tablet rotation). Above 900px it simply
   does not exist. */
@media (min-width:901px){.mobile-menu,.menu-backdrop{display:none !important}}

/* ===== COOKIE ALIGNMENT + PLAIN NEW BADGES (appended batch) =====
   The pill's close control stays on the row, vertically centred at the
   right, at every width; New markers in both menus become plain blue text. */
@media (max-width:560px){
  .cookie{flex-wrap:nowrap;align-items:center;gap:12px}
  .cookie-x{margin-left:auto;flex:0 0 auto}
}
.mega-badge{background:none;border:0;padding:0;color:#5b9dff}
.mm-new{color:#5b9dff}

/* ===== MOBILE SCROLL SMOOTHNESS (appended batch) =====
   Two per-frame costs leave phones: hero heights key to the small viewport
   (100svh) so the collapsing address bar no longer re-lays the page out
   mid-scroll, and decorative glass loses its backdrop blur on coarse
   pointers — the tints stay, the per-frame repaint bill goes. */
@supports (min-height:100svh){
  .hero{min-height:min(760px,calc(100svh - var(--topbar-h,44px)))}
  .howto{min-height:100svh}
  .acct-hero,.fx-hero,.gl-hero,.wb-hero,.pf-hero{min-height:min(780px,calc(100svh - var(--topbar-h,44px)))}
  .pt-hero{min-height:min(600px,calc(100svh - var(--topbar-h,44px)))}
  .ck-hero{min-height:min(900px,calc(100svh - var(--topbar-h,44px)))}
  /* .pm-hero{min-height:min(760px,calc(100svh - var(--topbar-h,190px)))} */
  .ma-hero{min-height:min(660px,calc(100svh - var(--topbar-h,44px)))}
  @media (max-width:860px){.pt-hero{min-height:min(500px,calc(100svh - var(--topbar-h,44px)))}}
}
@media (pointer: coarse){
  .mkx-card,.mkt-card,.plat-web,.plat-mt,.play,.award-card,.hub-core,.cta-card,.cta-bubble,.cta-chip,.to-top,
  .acct-hero-points li,.ta-panel,.fx-stat,.fx-cat,.fx-pairs .ta-spec-wrap,.fx-mh-card,.fx-mh-panel,.fx-mh-tile,
  .fx-pw-row,.fx-cs-meter,.mkt-pill,.co-stat,.co-card,.glass,.glass-dark,.ma-levels,.pf-step,.pf-subnav a,
  .mt-chip,.mt-rail-dur,.mt-rail-btn,.mt-dl-btn,.pl-card,.pl-sign,.ck-badge,.ck-btn--ghost,.ck-cell,.ck-lead-card,
  .cmp-card,.cmp-x,.kc-feature-dur,.nr-spot-card,.pp-toc,.pp-card,.wb-dur,.wb-lvl,.chat-panel,.cookie{
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ===== FEEDBACK SHEET 2026-08-11 (appended batch) =====
   Cookie pill widened for translations up to 865px; the brand can no
   longer be crushed by long menu copy; the sheet menu calms its type;
   open menus scroll under the wheel; the sheet's account button keeps
   its gradient on hover; and a smart app banner greets phones. */
@media (max-width:865px){
  .cookie{left:14px;right:14px;max-width:none;border-radius:20px;padding:12px 14px;
    transform:translateY(16px);flex-wrap:nowrap;align-items:center;gap:12px}
  .cookie.show{transform:none}
  .cookie-x{margin-left:auto;flex:0 0 auto}
}
.nav-brandwrap{flex:0 0 auto}
.brand img{min-width:140px}
.nav-menu{min-width:0}
@media (max-width:1280px){.header-partners,.hp-divider{display:none}}
.mobile-menu .mm-top{font-size:clamp(17px,4.6vw,20px);font-weight:600;padding:12px 4px}
.mega,.mega--center{max-height:calc(100vh - var(--topbar-h,44px) - var(--nav-h,64px));
  overflow-y:auto;overscroll-behavior:contain}
.lang-pop{overscroll-behavior:contain}
.mobile-menu .mm-cta a.btn:hover{background:linear-gradient(180deg,#2a72ff,#0047bb)}
.mobile-menu .mm-cta a.mm-login:hover{background:#fff}
/* smart app banner — phones only, all pages, dismissible per visit */
.sb-bar{display:none}
@media (max-width:768px){
  .sb-bar{position:relative;z-index:902;display:flex;align-items:center;gap:11px;padding:10px 12px;
    background:linear-gradient(120deg,#13cbb4,#0aa896);color:#04241f}
  .sb-x{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:0 0 auto;
    border:0;background:rgba(4,36,31,.14);color:#04241f;cursor:pointer}
  .sb-x svg{width:12px;height:12px}
  .sb-ico{width:38px;height:38px;border-radius:10px;background:#05070e;display:grid;place-items:center;flex:0 0 auto}
  .sb-ico img{width:22px;height:22px;display:block}
  .sb-txt{flex:1;min-width:0;line-height:1.3}
  .sb-txt b{display:block;font-size:12.5px;font-weight:700}
  .sb-txt span{display:block;font-size:10.5px;opacity:.78}
  .sb-get{flex:0 0 auto;padding:8px 15px;border-radius:30px;background:#05070e;color:#7ef0d2;
    font-size:12px;font-weight:800;letter-spacing:.02em}
}

/* ===== SMART BANNER — FIGMA 184:1421 (appended batch) =====
   The phone banner takes the designed form — frosted white card,
   blue-gradient app tile, 4.5 stars, gradient Install pill — and moves
   to the foot of the screen; the cookie pill and chat bubble step up
   while it is present. */
@media (max-width:768px){
  .sb-bar{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    z-index:902;display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:20px;
    background:rgba(255,255,255,.72);border:1px solid #fff;color:#1c1f2a;
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 24px 54px -22px rgba(10,20,50,.45)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .sb-bar{background:rgba(255,255,255,.96)}
  }
  .sb-x{position:absolute;top:-9px;right:-4px;width:26px;height:26px;border-radius:50%;
    background:#fff;color:#50555b;border:1px solid rgba(28,31,42,.12);
    box-shadow:0 8px 18px -8px rgba(10,20,50,.4)}
  .sb-ico{width:56px;height:56px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(180deg,#0047bb,#001489)}
  .sb-ico img{width:24px;height:31px;display:block}
  .sb-txt{flex:1;min-width:0;line-height:1.32}
  .sb-txt b{display:block;font-size:14px;font-weight:600;color:#1c1f2a}
  .sb-txt span{display:block;font-size:12px;font-weight:500;color:#50555b;opacity:1}
  .sb-txt .sb-stars{display:flex;gap:3px;margin-top:4px}
  .sb-stars img{width:11px;height:10px;display:block}
  .sb-get{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:36px;
    padding:0 24px;border-radius:70px;border:2px solid #0047bb;color:#fff;
    font-size:12.5px;font-weight:600;letter-spacing:.01em;
    background:linear-gradient(180deg,#0047bb,#002ea2 50%,#001489)}
  body.ck-open .sb-bar{bottom:calc(126px + env(safe-area-inset-bottom,0px))}
  body.has-sb .chat-fab{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  body.has-sb.ck-open .chat-fab{bottom:calc(208px + env(safe-area-inset-bottom,0px))}
}

/* ===== STACK POLISH (appended batch) =====
   The cookie keeps its glass on phones — one small fixed surface is
   cheap — and the chat bubble is measured above the banner stack by JS. */
@media (pointer: coarse){
  .cookie{-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cookie{background:rgba(10,16,30,.94)}
}

/* ===== COOKIE BACK TO THE FLOOR (appended batch) =====
   The lift from the first bottom arrangement lingered; the notice now
   hugs the screen foot and the measured banner and bubble follow. */
@media (max-width:865px){
  body.has-sb .cookie{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .cookie{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

/* ===== ZENDESK BEHIND THE BRAND LAUNCHER (appended batch) =====
   Zendesk's own turquoise launcher stays hidden; the site's chat bubble
   (already the house blue gradient) opens the real messaging window,
   which is framed as a floating glass card. Interior colours belong to
   Zendesk Admin's brand setting. */
/* Zendesk's own launcher never shows — not even during boot */
iframe[title="Button to launch messaging window"]{
  visibility:hidden !important;pointer-events:none !important;
}
iframe[title="Messaging window"],
iframe#webWidget{
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 40px 90px -34px rgba(7,20,60,.65),0 0 0 6px rgba(255,255,255,.06) !important;
  overflow:hidden !important;
}

/* ===== HEADER FITS AT PHONE WIDTHS (appended batch) =====
   The i18n logo guard pushed the hamburger past the right edge on
   390px screens, where the overflow guard clipped it invisible. Below
   480px the brand and CTA slim down so all three fit. */
@media (max-width:480px){
  .brand img{min-width:0;width:128px;height:auto}
  .nav .nav-cta{padding:9px 14px;font-size:12.5px}
  .nav{gap:10px}
}

/* ===== HEADER RIGHT CLUSTER (appended batch) =====
   With the menu hidden on small screens its auto margin vanished, so
   the CTA and burger sat against the brand. The CTA now carries the
   spacer and the pair returns to the right edge. */
@media (max-width:900px){
  .nav .nav-cta{margin-left:auto}
}

/* ===== NAV-RIGHT CARRIES THE SPACER (appended batch) =====
   The CTA's auto margin sat inside the content-sized wrapper where
   there was no space to take — the wrapper itself now claims the free
   width, and the burger trims its inner padding so its bars sit on the
   same 20px optical gutter as the logo. */
@media (max-width:900px){
  .nav-right{margin-left:auto}
  .hamburger{margin-right:-6px}
}

/* ===== FOOTER TAGLINE, SET LARGE IN PERIWINKLE (appended batch) ===== */
.foot-tag{color:#7da4f7;font-size:clamp(24px,3.4vw,44px);letter-spacing:0;line-height:1.15}

/* ===== PLATFORM CARD BREATHES ON SMALL PHONES (appended batch) =====
   Below 480px the app card's copy column was pinned to 40% width with a
   nowrap title, clipping the heading and stacking one word per line. */
@media (max-width:480px){
  .plat-app .plat-copy{max-width:100%}
  .plat-app .plat-copy h3{white-space:normal}
  .plat-copy p{max-width:none}
  .plat-hand{width:min(230px,64%)}
}

/* ===== TAGLINE SITS LEVEL WITH THE LOGO (appended batch) ===== */
.foot-tag{font-size:clamp(15px,1.6vw,20px)}

/* ===== MEGA MENU HOLDS OPEN FOR THE POINTER (appended batch) =====
   Open state is now JS-managed with a grace period, so a micro-break in
   the hover chain — trackpads, touchscreens, fast diagonals — can no
   longer slam the panel shut before a link is reached. */
.nav-item.has-mega.is-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* ===== LANGUAGE GLOBE AT PROPER SIZE (appended batch) ===== */
.lang-globe{width:21px;height:21px}
.lang-caret{width:12px;height:12px}

/* ===== EVENTS RAIL FULL-BLEED SHOTS (appended batch 2026-08-12) =====
   the parallax slack left visible gaps at the frame edges — every shot
   now covers its 4:5 frame exactly, like a background image would */
.ev-shot img{width:100%;transform:none}

/* ===== MOBILE MENU DROPDOWN AFFORDANCE (appended batch 2026-08-13) =====
   the four accordion rows read as plain headings: their chevron sat pinned to
   the far right of a 345px row, a long way from the label it belongs to, so
   nothing said the row opened. the caret now sits beside its label the way the
   desktop nav caret does, points down until the row opens, and the panel it
   reveals is indented under it so the dropdown clearly belongs to that item */
.mobile-menu .mm-top{justify-content:flex-start;gap:9px}
.mobile-menu .mm-acc .mm-top svg{color:#aab4c6;transform:rotate(90deg)}
.mobile-menu .mm-acc.open .mm-top svg{transform:rotate(-90deg)}
.mobile-menu .mm-panel{margin-left:5px;padding-left:13px;border-left:1px solid rgba(255,255,255,.1)}
/* second level: the desktop flyouts (Sponsorship and friends) keep their
   nesting on mobile — the label still goes to its own page, the caret beside
   it opens the children. deliberately NOT .mm-panel, or the parent
   accordion's own rule would reveal every nested list at once */
.mobile-menu .mm-sub-row{display:flex;align-items:center;gap:2px}
.mobile-menu .mm-sub-row a{flex:0 1 auto;min-width:0}
.mobile-menu .mm-sub-chev{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border:0;background:transparent;color:#8b97ae;cursor:pointer;border-radius:8px}
.mobile-menu .mm-sub-chev:hover{background:rgba(255,255,255,.06);color:#dbe3ef}
.mobile-menu .mm-sub-chev svg{width:14px;height:14px;transform:rotate(90deg);transition:transform .3s var(--ease)}
.mobile-menu .mm-sub.open .mm-sub-chev svg{transform:rotate(-90deg)}
.mobile-menu .mm-subpanel{display:none;margin:2px 0 6px 10px;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.1)}
.mobile-menu .mm-sub.open .mm-subpanel{display:block}
.mobile-menu .mm-subpanel a{display:block;padding:8px;font-size:14px;font-weight:500;color:#aeb7c7;border-radius:8px}
.mobile-menu .mm-subpanel a:hover{background:rgba(255,255,255,.05);color:#fff}

/* ===== SPONSORSHIP BENTO, TRANSLATION HEADROOM (appended batch 2026-08-13) =====
   the lead cell took half the row, so the four cards beside it were squeezed
   into narrow columns — and every extra line a translation added multiplied
   across them, stretching the section. the lead gives up some width to them */
@media (min-width:1081px){
  .ck-bento{grid-template-columns:minmax(0,.82fr) minmax(0,.82fr) minmax(0,1.18fr) minmax(0,1.18fr)}
}
/* on a ~360px screen the three stats wrapped raggedly, two on one line and the
   last stranded below; a fixed pair of columns keeps them tidy */
@media (max-width:430px){
  .ck-lead-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
}

/* ===== FX-MH SPAN LEAK, 641–720px BAND (appended batch 2026-08-13) =====
   the forex block's @media (max-width:720px) drops .fx-mh to a single column
   and resets its own --a…--e spans, but --wide/--full keep grid-column:span 2.
   grid then fabricates an implicit max-content column — a 438px card, since
   .fx-mh-card p is capped at 380px — squeezing the explicit track to as little
   as 143px and clipping the quote tile inside it. 44 pages carry these
   modifiers, so the reset belongs here rather than page by page */
@media (max-width:720px){.fx-mh--wide,.fx-mh--full{grid-column:auto}}
/* the header's right group overhangs its gutter by ~2px under 380px: with 20px
   padding either side there are 310px to spend, and the brand (128) plus the
   group (142 CTA + 18 gap + 34 burger = 194) asks for 322. overflow-x:clip was
   hiding the difference rather than fixing it — the group gives back 18px */
@media (max-width:380px){
  .nav-right{gap:8px}
  .nav-cta{padding-left:11px;padding-right:11px}
}

/* ===== FX-W2-VIZ FIXED HEIGHT (appended batch 2026-08-13) =====
   line 1081 gives this well a hard height:206px and centres its contents, so
   anything taller spills equally above and below — the panel's eyebrow then
   paints straight over the heading beneath it. It bites at 1081–1120px and
   under ~375px today, and at every width including 1440 once copy is
   translated (a 1.6x string overflowed by 87px on desktop). 13 pages carry the
   component. .fx-tx sized itself from that fixed height, so it is stretched
   explicitly rather than resolving height:100% against an auto height */
.fx-w2-viz{height:auto;min-height:206px}
.fx-w2-viz > .fx-tx{align-self:stretch;height:auto}

/* ===== HERO CTA ALIGNMENT ON TABLET (appended batch 2026-08-17) =====
   lines 869 and 1207 sit inside the trading-account and instrument 980px
   blocks, where the whole hero turns centred — but both wrote a bare
   .acct-hero-cta, so every other .acct-hero centres its button while the
   eyebrow, heading and subline stay left. It shows from 721 to 980px
   (iPad Air portrait lands at 820) on getting-started, funding and
   prime-ecn-account; below 721px line 784 centres the hero for real */
@media (min-width:721px) and (max-width:980px){
  .acct-hero:not(.ta-hero):not(.fx-hero) .acct-hero-cta{justify-content:flex-start}
}

/* ===== CLOSING CTA GUTTER (appended batch 2026-08-17) =====
   .cta-inner is a .container, but lines 544 and 728 set `padding:112px 0 …`
   and `padding:84px 0 150px` — the shorthand zeroed the inline gutter the
   container had given it, so on phones the heading and subline ran to within
   4px of both screen edges. Restores the gutter, with a little more air on
   phones where the centred copy fills every line. 75 pages carry this CTA */
.cta-inner{padding-inline:var(--gutter)}
@media (max-width:620px){.cta-inner{padding-inline:26px}}

/* ===== FX-MH WIDE CARD, 721–980px BAND (appended batch 2026-08-17) =====
   line 1063 drops .fx-mh to two columns but restates .fx-mh--wide's span 2,
   so the wide card eats a whole row and everything after it is left holding
   half a row: on the two-card pages (lloyd-insurance, legal-documents,
   financial-commission, liquidity-providers) that reads as one full-width
   card above one 60%-width card. One column each pairs them properly, and on
   the five-card pages it removes two holes rather than adding any. The band
   stops at 721 because line 4457 already releases the span for the single
   column below it. .fx-mh--full is deliberately left spanning */
@media (min-width:721px) and (max-width:980px){
  .fx-mh--wide{grid-column:span 1}
}

/* ===== HTRADE CTA WRAP, FX-PW LABEL COLUMN (appended batch 2026-08-19) =====
   Two narrow-screen findings from the money-manager review, both sitting in
   shared components rather than on that page.

   .btn is white-space:nowrap, so a button's minimum width is its whole label.
   Below 720px line 1292 stretches .htrade-btn across the intro panel, where it
   then has nowhere to give: "Become a Money Manager" needed 278px of a 268px
   panel at 362px and of a 256px panel at 350px, and the overflow pushed the
   32px arrow disc out through the pill's rounded cap — the clipped button in
   the review. This is the rule partner.html and ib-register.html already carry
   inline for the same reason; it belongs to the component, which 35 pages use.
   The button's height comes from the arrow disc rather than from the text, so
   the taller line-height leaves the one-line button at exactly 64px. Also
   catches synthetic.html (265px) and institutional.html (259px), over by less.

   .fx-pw-row is a `1fr auto auto` grid whose fixed parts — 14px of side
   padding, two 12px gaps and the 52px min-width reserving .q-chg's column —
   take 143px of a 223px row at 350px, leaving 57px for the label. "Expert
   advisors", "Manual trading", "Side by side", "Available balance", "Open
   positions", "Trading losses" and "Landing pages" all broke over two lines
   inside a 12.5px row. Below 560px the panel takes the full width of its viz
   instead of 90%, the gaps and side padding tighten, both text cells step down
   half a point, and .q-chg reserves only what a change cell measures. The row
   goes 223px -> 248px and the label column 57px -> 93-115px, which clears the
   longest label in the family ("Available balance", 102px) by 12% and puts
   every one of them back on a single line at 350px. The line-height is there
   for the translation that still will not fit: two tidy lines rather than the
   three cramped ones this started as.

   .q-chg's reserve lands on 46px rather than lower because the widest change
   cell is "-0.08%" at 45px. Under that, the percentage panels on company.html
   and forex.html would size their last column per row, and the middle column
   would fall out of line between rows. Every panel's alignment is the same
   after this batch as before it, bar money-manager's, which gains it. */
.htrade .htrade-btn{white-space:normal;line-height:1.25;min-width:0;max-width:100%;overflow-wrap:break-word}
@media (max-width:560px){
  .fx-pw{width:100%}
  .fx-pw-row{gap:8px;padding:11px 10px}
  .fx-pw-row .q-sym{font-size:12px;line-height:1.3}
  .fx-pw-row .q-px{font-size:12px}
  .fx-pw-row .q-chg{min-width:46px}
}

/* ===== FORM HINT ROOM, BACK-TO-TOP ABOVE THE STACK (appended batch 2026-08-19) =====
   Two more from the institutional.html review.

   The requirements textarea cut its own hint off. rows="4" at 16px/1.6 gives a
   124px box, and that page's placeholder — 111 characters, the longest in the
   form family — measures 124px across four lines at 390px and below: it fit by
   nought. Any of the ordinary reasons a line breaks earlier (a classic Windows
   scrollbar taking 17px out of the text width, wider rasterisation, a
   translation) tips it to five lines and the last one is cut, which is what the
   review caught. The controls stay at 16px deliberately — iOS Safari zooms the
   page in when a focused field is under 16px — so the room comes from height
   instead: 176px on phones holds six lines of the hint against the four the
   longest one needs today, and the shorter hints on the other five form pages
   simply get a more generous message box.

   .to-top never joined the fixed stack. It is pinned at bottom:94px on every
   viewport, while below 768px the smart app banner (z 902) and the cookie
   notice (z 860) sit at 575-663 and 668-766 on a 780px screen — the disc (z
   840, 640-686) was sandwiched behind both and could not be seen or pressed.
   The chat bubble was already lifted by a measured offset in layoutSb(); the
   disc now rides 10px above the bubble, the gap the pair keeps on desktop, and
   these are the pre-JS fallbacks under the same two body classes the bubble
   uses. Same batch fixes layoutSb() measuring the banner while it is
   display:none above 768px — its 0,0,0,0 rect read as a ceiling at the top of
   the screen and threw the chat bubble clean off the top of every desktop
   page. */
@media (max-width:560px){
  .ct-field textarea{min-height:176px}
}
@media (max-width:768px){
  body.has-sb .to-top{bottom:calc(174px + env(safe-area-inset-bottom,0px))}
  body.has-sb.ck-open .to-top{bottom:calc(278px + env(safe-area-inset-bottom,0px))}
}

/* ===== FIELD FOOTNOTE ROW WRAPS (appended batch 2026-08-19) =====
   .ct-below carries whatever sits under a field — the validation error, a
   hint, a character count, a Send code / Show button — on one baseline row
   that never wrapped. On switch-allowance.html those fields are in the
   two-column .ct-grid, so the row is only 208-240px wide from 760px up, and
   an error there had to share it with two more items: "8-16 characters, mixed
   case, a number and a symbol." was reading in a 96px column over four lines
   beside a 48px column of hint, an 80px-tall row of shredded text — the copy
   the review marked. It is worst on a full desktop screen, where the form
   card is narrowest relative to its grid.

   The row wraps now, and the error asks for 220px before it will share: on a
   wide row nothing moves, and on a narrow one the error takes the line to
   itself and the hint and button drop below it, each on one line. The count
   on the message forms stops breaking "0 / 800" over two lines at 362-430px
   for the same reason. */
.ct-below{flex-wrap:wrap}
.ct-below .ct-err{flex:1 1 220px}
.ct-count{white-space:nowrap}

/* ===== STYLED DROPDOWNS (appended batch 2026-08-19) =====
   A <select>'s popup belongs to the operating system — on iOS it is a wheel
   picker with none of its type, colour or spacing under our control, and the
   17 selects on the site were the one place the design stopped at the edge of
   the control. The native element stays exactly where it is, with its own
   markup, its own page CSS, its name and its value, so forms submit and every
   change listener still fires; it just stops taking pointer events. An
   invisible button covers it and opens a panel we draw ourselves.

   The closed control is therefore untouched on every page — the dark field on
   webinars, the underlined field in the contact forms, the pill in the
   calendar deck all keep the rules they already had, including their chevrons.
   Only the open list is new, and it takes its colour from the control's own
   text: light type means a dark surface, dark type a light one. */
.stsel{position:relative;display:block}
.stsel-native{pointer-events:none}
.stsel-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  border:0;background:none;cursor:pointer;border-radius:inherit;color:transparent;font:inherit}
.stsel-hit:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.stsel-panel{
  position:fixed;z-index:1200;overflow:auto;overscroll-behavior:contain;
  padding:6px;border-radius:14px;background:#fff;border:1px solid var(--line);
  box-shadow:0 26px 60px -24px rgba(20,44,96,.42),0 2px 8px rgba(20,44,96,.08);
  -webkit-overflow-scrolling:touch;
}
.stsel-panel:focus{outline:none}
.stsel-opt{
  padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:14px;line-height:1.35;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stsel-opt.is-active{background:rgba(0,71,187,.1);color:var(--blue)}
.stsel-opt.is-disabled{opacity:.45;cursor:not-allowed}
.stsel-panel--dark{background:#0b1224;border-color:rgba(255,255,255,.14);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.7)}
.stsel-panel--dark .stsel-opt{color:#e8eefb}
.stsel-panel--dark .stsel-opt.is-active{background:rgba(90,150,255,.22);color:#fff}
@media (max-width:560px){
  .stsel-opt{padding:11px 12px;font-size:14.5px;white-space:normal}
}

/* ===== THE COUNTRY FIELD JOINS ITS OWN FORM (appended batch 2026-08-19) =====
   The light treatment for a select in these forms was keyed to .ct-form-card,
   but institutional, affiliate-registration, ib-register, money-manager and
   partner never carry that class — their card is built differently. So while
   every input and textarea beside it took .ct-field's underlined light field,
   the country select fell through to the plain .wb-selwrap rule and rendered
   as a dark filled pill: white type on rgba(4,8,18,.5), in the middle of a
   white form. It is the odd control out in the review's screenshot of that
   page. Keying the same treatment to .ct-field, which is what actually marks a
   field of this form family, brings all five into line and leaves the four
   pages that do carry .ct-form-card exactly as they were. */
.ct-field .wb-selwrap select{
  width:100%;font:inherit;font-size:16px;color:var(--text);padding:11px 2px;
  background:transparent;border:0;border-bottom:1px solid rgba(20,44,96,.2);border-radius:0;outline:none;
  cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:32px;
  transition:border-color .25s,box-shadow .25s;
}
.ct-field .wb-selwrap select:hover{border-bottom-color:rgba(20,44,96,.4)}
.ct-field .wb-selwrap select:focus{border-bottom-color:var(--blue);box-shadow:0 1px 0 0 var(--blue)}
.ct-field .wb-selchev{color:var(--text-mute);right:2px}
.ct-field.is-bad .wb-selwrap select{border-bottom-color:#d0453b;box-shadow:0 1px 0 0 #d0453b}

/* ===== THREE FROM THE PLATFORM PAGES (appended batch 2026-08-19) =====

   .swx-bar is the browser chrome above the Web Trader mock, and every round
   thing in it — the three window dots, the shield in the address pill, the
   live dot — was a flex item free to shrink. At 350px the row runs out of
   width and the shield is the one that gives: 12 x 12 becomes 6.5 x 12, an
   oval where a shield should be. None of them may shrink now, and the address
   truncates instead, which is what a real address bar does anyway.

   .wt-caps is five cells in a five-column grid. At 980px it drops to three, so
   the second row holds two of them and leaves the third cell empty: the rule
   above that row stops two thirds of the way across and the divider beside the
   last cell runs down into nothing. At 720px it drops to two and the fifth
   cell is alone with the same result. Letting the last cell take the rest of
   its row closes both — three pages carry this component with five cells each.

   trading-app.html hides .fx-quote below 720px, and on the hero that quote is
   half the composition: the phone keeps a chip pinned at its top left and an
   empty space where the price card was, which is the missing piece in the
   review. It comes back at a size the narrower stage can hold. */
@media (max-width:980px){
  .wt-cap:last-child{grid-column:span 2}
}
.swx-bar > i{flex:none}
.swx-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swx-url svg{flex:none}
.swx-live{flex:none}
.swx-live b{flex:none}


/* ===== THE PANEL LABELS STOP OVERLAPPING (appended batch 2026-08-19) =====
   A .sc-panel carries two versions of itself: the vertical label it shows
   while it is 96px wide, and the horizontal block it shows once open. Opening
   one faded the label out over .3s while the block faded in over .5s after a
   .14s wait, and closing the neighbour ran the same pair the other way — so
   for about a third of a second every panel in transit showed both at once,
   the vertical name printed through its own heading. That is the afterimage in
   the review.

   The two now take turns. The label leaves in .14s with no delay, so it has
   gone before the block starts at .14s, and it does not come back until .34s,
   by which time the closing panel's block has cleared. visibility follows the
   opacity so nothing half-faded is left painting over the text. */
.sc-panel-vt{transition:opacity .18s var(--ease) .26s,visibility 0s linear .26s}
.sc-panel.is-on .sc-panel-vt{
  opacity:0;visibility:hidden;
  transition:opacity .14s var(--ease) 0s,visibility 0s linear .14s;
}
/* the block leaves quickly and arrives slowly, so a closing panel is clear of
   its own words well before the label comes back over them */
.sc-panel-in{transition:opacity .2s var(--ease) 0s,transform .2s var(--ease) 0s}
.sc-panel.is-on .sc-panel-in{transition:opacity .5s var(--ease) .18s,transform .5s var(--ease) .18s}
/* ===== THREE READABILITY FIXES (appended batch 2026-08-19) =====

   .syn-live is mint type with no background at all, sitting on top of a chart
   that is itself mint — on the PriceStep card the badge all but disappears
   into the line behind it. It takes the same dark glass chip the other
   over-chart badges on the site use, so it reads on any series colour.

   .ma-head lays a category label and a date in one row on align-items:center.
   Below 430px "Monthly Review" wraps to three lines while the date stays on
   one, so the date settled against the middle of the label block and the two
   read as misaligned by 10-11px. They share a top edge instead, and the row
   may wrap if even that will not fit. */
.syn-live{padding:4px 9px;border-radius:20px;background:rgba(4,10,22,.72);
  border:1px solid rgba(126,240,210,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:480px){
  /* once the card is a row the head shares a narrow column with the picture,
     and the label and the date were splitting it between them — "Monthly
     Review" came out over three lines beside a date that needed one. The date
     takes its own line under the label instead, which gives the label the
     column and puts it back on one. */
  .ma-head{align-items:flex-start;flex-wrap:wrap;row-gap:2px}
  .ma-cat{align-items:flex-start;flex:1 1 100%}
  .ma-cat svg{margin-top:2px}
  .ma-date{flex:none;white-space:nowrap}
}

/* ===== THE PRODUCT HERO COPY CLEARS ITS ARTWORK (appended batch 2026-08-19) =====
   The hero's artwork is the video itself, covering the whole section, and the
   copy is kept legible by a side-lit scrim: 95% opaque at the left edge, 74%
   at 32% across, 30% at 58%, 6% at the right. The copy is sized in pixels
   though — 560px with a 520px subline — so as the window narrows the text
   keeps its length while the scrim's dark end shrinks with the viewport. At
   1024px the subline reaches 53% across, where the scrim is down to about a
   third, and at 981px it reaches 55%: the tail of the sentence ends up on the
   bright part of the picture, which is the unreadable line in the review. From
   981px the copy is capped against the viewport instead, holding the subline
   inside the first 40% where the scrim is still around 65%. Below 980px the
   page already stacks the copy over the art and swaps in a vertical scrim, so
   the band ends there. It is the shared hero, so all 24 product pages that use
   it get the same clearance. */
@media (min-width:981px) and (max-width:1180px){
  .fx-hero-copy{max-width:min(560px,42vw)}
  .fx-hero .acct-hero-sub{max-width:min(520px,38vw)}
}

/* ===== THE REPORT GRID GOES ONE TO A ROW ON TABLET (appended batch 2026-08-19) =====
   .ma-grid went three columns to two at 1080px and then stayed at two all the
   way down: 354px cards at 768px, 230px at 520px and 165px at 390px, where the
   category label wrapped over three lines and the headline over twelve. One
   card to a row from 860px fixes that, but the card is built as a column with
   a 16/10 picture at its foot, so stacking it as-is would give a 512px-tall
   image on an 820px card and six of them would run past 4,000px. Between 860
   and 561 the card turns on its side instead — the label, headline and excerpt
   in a column, the picture beside them filling the row's height — which reads
   as a report list and keeps each row near 200px. Below 560px there is no room
   for two columns of anything, so the card returns to its stacked form at full
   width. Five pages carry this grid and all of them were cramped the same way. */
@media (max-width:860px){
  .ma-grid{grid-template-columns:1fr}
}
@media (max-width:860px) and (min-width:441px){
  .ma-rep{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,32%,300px);
    grid-template-areas:"head media" "body media";
  }
  .ma-head{grid-area:head}
  .ma-body{grid-area:body}
  .ma-media{grid-area:media;margin-top:0;aspect-ratio:auto;height:100%}
}
/* Under 440px the row is too short for a picture beside it: the media column
   came out 116px wide against a 250px-tall card, a sliver rather than a
   photograph. The card goes back to a stack there, with the picture full width
   under the copy on a 16/9 crop rather than 16/10 so six of them stay near
   2,300px instead of 2,800. */
@media (max-width:440px){
  .ma-media{aspect-ratio:16/9}
}

/* ===== THE PROMO HERO SCRIM COVERS ITS COPY (appended batch 2026-08-19) =====
   .pm-hero lights its copy with a side-lit scrim — 96% opaque at the left
   edge, 86% at 34% across, 40% at 58%, clear by 80% — and switches to a
   top-to-bottom one at 640px. The copy in between does not shrink with the
   window: the subline holds a fixed 549px from 900px down, so its right edge
   marches from 63% across at 900px to 78% at 730px and 89% at 641px, where the
   side-lit scrim has nothing left to give. Measured on the declared stops the
   scrim under the end of that sentence is 0.31 at 900px, 0.09 at 760px and 0.00
   from 700px down — the words are sitting on bare artwork, which is the
   obscured text in the review. The vertical scrim starts at 900px instead of
   640px, so the whole band where the copy outgrows the side light is covered.
   Ten promotion pages share this hero and all ten measure the same. */
@media (max-width:900px){
  .pm-hero::before{
    background:
      linear-gradient(180deg,rgba(244,247,252,.94) 0%,rgba(244,247,252,.8) 48%,rgba(244,247,252,.5) 100%);
  }
}
/* ! wwwstartr|2026-08-24 17:51:00 ! */