@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=satoshi@400,500,700&display=swap");

/*
 * Canonical inner-page typography and rhythm.
 * The About page is the visual source of truth for every page except index.html.
 */
:root {
  --inner-heading-font: "General Sans", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", -apple-system, "Segoe UI", sans-serif;
  --inner-body-font: "Satoshi", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", -apple-system, "Segoe UI", sans-serif;
  --inner-heading-color: #f4f8ff;
  --inner-card-heading-color: #f3f7ff;
  --inner-copy-color: rgba(188, 205, 229, .82);
  --inner-section-space: 56px;
  --inner-module-space: 56px;
  --inner-grid-row-gap: 28px;
  --inner-grid-column-gap: 30px;
}

/*
 * Inner-page scale contract.
 * About is the source of truth: a 1100px outer container with 24px gutters,
 * General Sans/Satoshi typography, and a 40px closing CTA heading.
 */
body[data-account-page] {
  --maxw: 1100px;
  --font: var(--inner-body-font);
  font-family: var(--inner-body-font);
}

body[data-account-page] main > section > .wrap,
main > :where(.cta, .closing) > .wrap {
  width: 100%;
  max-width: 1100px;
  padding-right: 24px;
  padding-left: 24px;
}

main > :where(.cta, .closing) :where(.cta-box, .closing-box) h2 {
  font-size: clamp(32px, 3vw, 40px) !important;
}

/* Keep the Awards metrics in normal flow immediately below its artwork. */
body.awards-page main > .page-hero { margin-bottom: 0 !important; }
body.awards-page main > .stats {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  margin: 0 !important;
  transform: none !important;
}
body.awards-page main > .stats > .wrap {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  transform: none !important;
}

/* Banner hierarchy: the same light kicker, gold primary line and white lead
   used on the About page. Both legacy hero-* and shared banner-* names are
   supported so no page has to change its content structure. */
main :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
  :where(.hero-copy, .banner-copy) h1 {
  display: grid;
  justify-items: start;
  gap: 2px;
  max-width: none;
  margin: 0;
  color: var(--inner-heading-color);
  font-family: "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", var(--inner-heading-font);
  line-height: 1;
  letter-spacing: 0;
  white-space: normal;
}

main :where(.hero-title-line, .banner-title-line) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

main :where(.hero-title-kicker, .banner-title-kicker) {
  color: rgba(238, 247, 255, .96);
  font-size: clamp(34px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .14em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .58);
}

main :where(.hero-title-accent, .banner-title-accent) {
  position: relative;
  padding: 3px 0 12px;
  color: #e8bd63;
  font-size: clamp(52px, 4.45vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .025em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .58);
  -webkit-text-fill-color: currentColor;
}

main :where(.hero-title-accent, .banner-title-accent)::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 88px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8bd63, rgba(232, 189, 99, 0));
}

main :where(.hero-lead, .banner-lead) {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .9);
  font-family: "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", var(--inner-body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.01em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .58);
}

/* Vertically center the visible copy against the banner artwork. Legacy page
   styles used a mix of asymmetric section padding, short inner wrappers and
   copy-level top padding, which made the same banner hierarchy sit at a
   different height from page to page. */
main > :where(.page-hero, .contact-banner) {
  display: grid;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

main > .page-hero > .hero-grid {
  width: 100%;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

main > .contact-banner > .banner-shell {
  width: 100%;
}

main > .stock-hero > .stock-hero-inner {
  height: 100%;
  min-height: 100% !important;
}

main > :where(.page-hero, .account-hero, .stock-hero, .contact-banner, .blank-hero)
  :where(.hero-copy, .banner-copy) {
  padding-top: 0 !important;
}

main > :where(.contact-banner, .blank-hero) > .banner-shell {
  padding-top: 0 !important;
}

body.about-page main > .page-hero {
  width: 100%;
  height: 666px !important;
  min-height: 666px !important;
}

/* Inner-page banner artwork should be shown at its original brightness. Page
   templates previously added dark gradients either through a pseudo-element
   or as extra background-image layers; remove only those dimming layers. */
main > :where(.page-hero, .account-hero, .contact-banner)::before {
  background: none !important;
}

main > .account-hero {
  background-image: var(--hero-image) !important;
}

main > .stock-hero {
  background-image: var(--stock-hero-image) !important;
}

body.institute-page main > .page-hero {
  background-image: url("institute/institute-office-hero.png") !important;
}

/* Statistic strips belong below the banner in normal document flow so the
   full hero artwork remains visible. */
main > .stats {
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding-bottom: 36px;
}

main > .stats > .wrap {
  max-width: none;
  padding: 0;
  transform: none;
}

main > .stock-stats {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  margin-top: 0 !important;
  transform: none !important;
  border-bottom: 1px solid rgba(120, 180, 240, .22);
}

/* Keep every inner-page banner fully visible. Legacy templates used negative
   margins, absolute positioning or translated content to pull statistic bars
   and first-page modules over the artwork. The homepage uses `.hero` and is
   intentionally outside this rule. */
main > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
  overflow: hidden;
}

main > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
  + :where(section, div) {
  position: relative !important;
  inset: auto !important;
  margin-top: 0 !important;
  transform: none !important;
}

main > .stats {
  position: relative !important;
  inset: auto !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* Partner pages use the product-page hero shell, but their corporate metrics
   should share the About page's full-width statbar treatment. */
:is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats {
  border-top: 1px solid rgba(120, 180, 240, .22);
  border-bottom: 1px solid rgba(120, 180, 240, .22);
  background: linear-gradient(180deg, rgba(13, 42, 72, .55), rgba(6, 22, 40, .42));
  box-shadow: 0 24px 70px rgba(0, 12, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats > div {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .05);
  transition: border-color .25s, background .25s;
}

:is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats > div:first-child {
  border-left: 0;
}

:is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats > div:hover {
  border-left-color: rgba(72, 180, 255, .22);
  background: rgba(30, 135, 245, .08);
}

/* Animated counters live inside <strong>; keep them visually attached to
   suffixes such as "th", "+", "万+" and "%" instead of inheriting the
   smaller caption styling applied to the following label span. */
:is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats strong .stat-count {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

@media (min-width: 821px) {
  :is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats {
    min-height: 100px;
    padding-inline: 0;
  }

  :is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats > div {
    gap: 0;
    padding: 24px 18px 22px;
  }

  :is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats strong {
    color: #fff;
    font-family: var(--inner-heading-font);
    font-size: 36px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
    line-height: 1;
  }

  :is(body[data-account-page="partner"], body[data-account-page="partner-support"]) .stock-stats span {
    margin-top: 10px;
    color: #1e87f5;
    font-size: 13px;
    letter-spacing: .08em;
  }
}

/* All direct content sections share the About page's 56px vertical rhythm.
   Heroes, statistic strips and closing calls-to-action retain their bespoke
   geometry. */
main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing) {
  padding-top: var(--inner-entry-space, var(--inner-section-space));
  padding-bottom: var(--inner-section-space);
}

/* Pages without a statistic strip need a calmer transition from the banner
   into their first text-led section, matching the About page's entry rhythm. */
main > :where(.page-hero, .account-hero, .stock-hero, .contact-banner, .blank-hero):not(:has(.stock-stats))
  + section:not(.stats) {
  --inner-entry-space: 112px;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  :where(h1, h2) {
  color: var(--inner-heading-color);
  font-family: var(--inner-heading-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  h3 {
  color: var(--inner-card-heading-color);
  font-family: var(--inner-heading-font);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  p {
  color: var(--inner-copy-color);
  font-family: var(--inner-body-font);
  font-size: 15.5px;
  line-height: 1.7;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  :where(h1, h2) + p {
  margin-top: 18px;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  h3 + p {
  margin-top: 12px;
}

main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
  p + p {
  margin-top: 18px;
}

main :where(.head-block, .section-head, .section-heading, .article-head, .faq-heading) {
  margin-bottom: var(--inner-module-space);
}

main :where(
  .value-grid,
  .award-grid,
  .license-grid,
  .legal-docs-grid,
  .news-grid,
  .analysis-grid,
  .learning-grid,
  .advantage-grid,
  .feature-grid,
  .benefit-grid,
  .stock-benefit-grid,
  .partner-benefit-grid,
  .partner-type-grid,
  .support-benefit-grid,
  .copy-benefit-grid,
  .audience-grid,
  .currency-grid,
  .market-grid
) {
  row-gap: var(--inner-grid-row-gap);
  column-gap: var(--inner-grid-column-gap);
}

/*
 * Unified banner viewport for every inner page except the About and Awards
 * pages, which intentionally retain their own art-directed proportions.
 */
body:not(.about-page):not(.awards-page) main
  > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
  width: 100%;
  height: 666px !important;
  min-height: 666px !important;
  background-position: center top;
  background-size: cover;
}

body:not(.about-page):not(.awards-page) main > .page-hero .hero-grid {
  min-height: 430px;
}

body:not(.about-page):not(.awards-page) main > .partner-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 900px) {
  body[data-account-page] main > section > .wrap,
  main > :where(.cta, .closing) > .wrap {
    padding-right: 20px;
    padding-left: 20px;
  }

  body:not(.about-page):not(.awards-page) main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
      height: 612px !important;
      min-height: 612px !important;
  }

  body.about-page main > .page-hero {
    height: 612px !important;
    min-height: 612px !important;
  }
}

@media (max-width: 820px) {
  main > .stats {
    margin-top: 0;
    padding-bottom: 28px;
  }

  main > .stats > .wrap {
    padding: 0;
  }

  main :where(.hero-title-kicker, .banner-title-kicker) {
    font-size: clamp(31px, 5vw, 38px);
  }

  main :where(.hero-title-accent, .banner-title-accent) {
    font-size: clamp(44px, 7vw, 56px);
  }

  main :where(.hero-lead, .banner-lead) {
    font-size: 17px;
  }

}

@media (max-width: 560px) {
  /* Inner pages use both legacy direct headers and the shared injected header.
     Keep direct headers out of document flow too, so every mobile banner starts
     at the same page origin. The homepage does not load this stylesheet. */
  body > header {
    height: 0;
  }

  /* Side-entry reveals may sit outside the viewport until their section is
     reached. Clip that transient geometry at the main content boundary so it
     cannot widen the mobile document or expose a horizontal scroll area. */
  body[data-mobile-banner] main {
    overflow-x: clip;
  }

  body[data-mobile-banner="about"] { --inner-mobile-banner-image: url("mobile-banners/about.jpg"); }
  body[data-mobile-banner="awards"] { --inner-mobile-banner-image: url("mobile-banners/awards.jpg"); }
  body[data-mobile-banner="analysis"] { --inner-mobile-banner-image: url("mobile-banners/analysis.jpg"); }
  body[data-mobile-banner="legal"] { --inner-mobile-banner-image: url("mobile-banners/legal.jpg"); }
  body[data-mobile-banner="regulation"] { --inner-mobile-banner-image: url("mobile-banners/regulation.jpg"); }
  body[data-mobile-banner="fund-safety"] { --inner-mobile-banner-image: url("mobile-banners/fund-safety.jpg"); }
  body[data-mobile-banner="news"] { --inner-mobile-banner-image: url("mobile-banners/news.jpg"); }
  body[data-mobile-banner="contact"] { --inner-mobile-banner-image: url("mobile-banners/contact.jpg"); }
  body[data-mobile-banner="partners"] { --inner-mobile-banner-image: url("mobile-banners/partners.jpg"); }
  body[data-mobile-banner="mt4"] { --inner-mobile-banner-image: url("mobile-banners/mt4.jpg"); }
  body[data-mobile-banner="mt5"] { --inner-mobile-banner-image: url("mobile-banners/mt5.jpg"); }
  body[data-mobile-banner="demo"] { --inner-mobile-banner-image: url("mobile-banners/demo.jpg"); }
  body[data-mobile-banner="stp"] { --inner-mobile-banner-image: url("mobile-banners/stp.jpg"); }
  body[data-mobile-banner="ecn"] { --inner-mobile-banner-image: url("mobile-banners/ecn.jpg"); }
  body[data-mobile-banner="pamm-mam"] { --inner-mobile-banner-image: url("mobile-banners/pamm-mam.jpg"); }
  body[data-mobile-banner="vps"] { --inner-mobile-banner-image: url("mobile-banners/vps.jpg"); }
  body[data-mobile-banner="stock"] { --inner-mobile-banner-image: url("mobile-banners/stock.jpg"); }
  body[data-mobile-banner="indices"] { --inner-mobile-banner-image: url("mobile-banners/indices.jpg"); }
  body[data-mobile-banner="metals"] { --inner-mobile-banner-image: url("mobile-banners/metals.jpg"); }
  body[data-mobile-banner="energy"] { --inner-mobile-banner-image: url("mobile-banners/energy.jpg"); }
  body[data-mobile-banner="futures"] { --inner-mobile-banner-image: url("mobile-banners/futures.jpg"); }
  body[data-mobile-banner="forex"] { --inner-mobile-banner-image: url("mobile-banners/forex.jpg"); }
  body[data-mobile-banner="copy-trading"] { --inner-mobile-banner-image: url("mobile-banners/copy-trading.jpg"); }
  body[data-mobile-banner="partner"] { --inner-mobile-banner-image: url("mobile-banners/partner.jpg"); }
  body[data-mobile-banner="partner-support"] { --inner-mobile-banner-image: url("mobile-banners/partner-support.jpg"); }
  body[data-mobile-banner="economic-calendar"] { --inner-mobile-banner-image: url("mobile-banners/economic-calendar.jpg"); }
  body[data-mobile-banner="institute"] { --inner-mobile-banner-image: url("mobile-banners/institute.jpg"); }

  /* The institute desktop hero also uses an !important background declaration.
     Keep this selector more specific so the portrait artwork wins on mobile. */
  body.institute-page[data-mobile-banner="institute"] main > .page-hero {
    background-image: var(--inner-mobile-banner-image) !important;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
    position: relative !important;
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3;
    margin-top: 0 !important;
    padding: 0 !important;
    background-image: var(--inner-mobile-banner-image) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }

  /* Remove the oversized decorative rings from mobile banners. They sit over
     the title area after the portrait artwork is repositioned below it. */
  body[data-mobile-banner] main > .stock-hero::before {
    content: none !important;
    display: none !important;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
    > :where(.wrap, .hero-grid, .stock-hero-inner, .banner-shell) {
    position: static !important;
    box-sizing: border-box;
    height: 100%;
    min-height: 100% !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
    :where(.hero-copy, .banner-copy) {
    position: absolute !important;
    top: clamp(118px, 34vw, 146px) !important;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    padding-top: 0 !important;
    transform: none !important;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
    :where(.hero-title-kicker, .banner-title-kicker) {
    font-size: 21px;
    line-height: 1.15;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
    :where(.hero-title-accent, .banner-title-accent) {
    padding-bottom: 8px;
    font-size: 34px;
    line-height: 1.08;
  }

  body[data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero)
    :where(.hero-lead, .banner-lead) {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
  }

  body[data-mobile-banner] main > .partner-banner > img {
    display: none;
  }

  body[data-account-page] main > section > .wrap,
  main > :where(.cta, .closing) > .wrap {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 16px;
    padding-left: 16px;
  }

  main > .closing .closing-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 18px;
    padding-left: 18px;
  }

  main > :where(.cta, .closing) :where(.cta-box, .closing-box) h2 {
    width: 100%;
    max-width: 100% !important;
    font-size: clamp(25px, 7.1vw, 30px) !important;
    line-height: 1.3;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  main > .closing .closing-box p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  :root {
    --inner-section-space: 58px;
    --inner-module-space: 30px;
    --inner-grid-row-gap: 16px;
    --inner-grid-column-gap: 16px;
  }

  main :where(.hero-title-kicker, .banner-title-kicker) {
    font-size: 26px;
    letter-spacing: .08em;
  }

  main > :where(.page-hero, .account-hero, .stock-hero, .contact-banner, .blank-hero):not(:has(.stock-stats))
    + section:not(.stats) {
    --inner-entry-space: 88px;
  }

  body:not(.about-page):not(.awards-page) main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
    height: 600px !important;
    min-height: 600px !important;
  }

  body.about-page main > .page-hero {
    height: 600px !important;
    min-height: 600px !important;
  }

  main :where(.hero-title-accent, .banner-title-accent) {
    padding-bottom: 10px;
    font-size: 38px;
    letter-spacing: .01em;
  }

  main :where(.hero-title-accent, .banner-title-accent)::after {
    width: 64px;
    height: 2px;
  }

  main :where(.hero-lead, .banner-lead) {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.75;
  }

  main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
    :where(h1, h2) {
    font-size: 28px;
  }

  main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
    h3 {
    font-size: 22px;
  }

  main > section:not(.page-hero):not(.account-hero):not(.stock-hero):not(.partner-banner):not(.contact-banner):not(.blank-hero):not(.stats):not(.cta):not(.closing)
    p {
    font-size: 15.5px;
    line-height: 1.75;
  }

  /* Final mobile override: the supplied artwork is exactly 480 × 720. Keep
     its 2:3 frame intact after legacy fixed-height hero rules are resolved. */
  body[data-mobile-banner][data-mobile-banner] main
    > :where(.page-hero, .account-hero, .stock-hero, .partner-banner, .contact-banner, .blank-hero) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3;
  }
}