body[data-account-page="indices"] { --stock-hero-image: var(--indices-hero-image,url("indices-banner.jpg")); }
body[data-account-page="indices"] .closing-box h2 {
  max-width: none;
  font-size: clamp(18px,3.4vw,48px);
  white-space: nowrap;
}
body[data-account-page="metals"] { --stock-hero-image: var(--metals-hero-image,url("metals-banner.jpg")); }
body[data-account-page="metals"] .closing-box h2 {
  max-width: none;
  font-size: clamp(18px,3.4vw,48px);
  white-space: nowrap;
}
body[data-account-page="energy"] { --stock-hero-image: var(--energy-hero-image,url("energy-banner.jpg")); }
body[data-account-page="energy"] .closing-box h2 {
  max-width: none;
  font-size: clamp(18px,3.4vw,48px);
  white-space: nowrap;
}
body[data-account-page="futures"] { --stock-hero-image: var(--futures-hero-image,url("futures-banner.jpg")); }
body[data-account-page="futures"] .closing-box h2 {
  max-width: none;
  font-size: clamp(18px,3.4vw,48px);
  white-space: nowrap;
}
body[data-account-page="forex"] { --stock-hero-image: var(--forex-hero-image,url("forex-banner.jpg")); }
body[data-account-page="forex"] .closing-box h2 {
  max-width: none;
  font-size: clamp(18px,3.4vw,48px);
  white-space: nowrap;
}

.metals-hero {
  background-image:
    linear-gradient(90deg,rgba(3,13,31,.98) 0%,rgba(3,13,31,.82) 43%,rgba(3,13,31,.25) 78%,rgba(3,13,31,.72) 100%),
    linear-gradient(180deg,rgba(4,16,36,.06),rgba(4,16,36,.2) 65%,#061026 100%),
    var(--stock-hero-image),
    radial-gradient(circle at 76% 44%,rgba(214,166,71,.19),transparent 24%),
    radial-gradient(circle at 78% 44%,rgba(72,180,255,.08),transparent 43%),
    linear-gradient(135deg,#061127 0%,#111a31 58%,#071329 100%);
}

body[data-account-page="indices"] #benefits { scroll-margin-top: 92px; }
.indices-benefits { grid-template-columns: repeat(3,1fr); }
.indices-benefits .stock-benefit { min-height: 244px; }
.indices-benefits .benefit-mark,
.metals-benefits .benefit-mark { font-family: var(--font); font-size: 18px; font-weight: 700; }
.index-market-grid .market-card ul { padding-block: 18px 25px; }
.index-market-grid .market-card li { min-height: 68px; grid-template-columns: 82px 1fr; }

.metals-benefits { grid-template-columns: repeat(3,1fr); }
.metals-benefits .stock-benefit { min-height: 246px; }
.metals-benefit-section {
  background:
    radial-gradient(circle at 50% 0,rgba(206,157,64,.1),transparent 40%),
    linear-gradient(180deg,rgba(5,23,48,.4),rgba(3,15,34,.7));
}

.contracts-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 5%,rgba(232,196,122,.08),transparent 28%),
    linear-gradient(180deg,#060d20,rgba(6,22,45,.76));
}
.contracts-section .section-head { max-width: 820px; }
body[data-account-page="metals"] .contracts-section .contract-note {
  text-align: center;
}
body[data-account-page="energy"] .contracts-section .contract-note {
  text-align: center;
}
.index-contracts {
  scroll-margin-top: 110px;
  background:
    radial-gradient(circle at 12% 15%,rgba(41,139,238,.12),transparent 30%),
    radial-gradient(circle at 88% 78%,rgba(232,196,122,.06),transparent 25%),
    linear-gradient(180deg,#060d20,rgba(6,22,45,.76));
}
.index-contract-heading {
  max-width: 820px !important;
  margin-inline: auto;
  text-align: center;
}
.index-contract-heading > div { min-width: 0; }
.index-contract-heading h2 { margin-top: 0; }
.index-contract-heading > div > p:last-child { margin-top: 10px; }
.index-contract-shell {
  border-color: rgba(68,151,230,.46);
  background:
    radial-gradient(circle at 12% 0,rgba(44,132,219,.12),transparent 35%),
    linear-gradient(180deg,rgba(8,35,70,.98),rgba(3,18,39,.99));
  box-shadow: 0 30px 74px rgba(0,11,32,.42),inset 0 1px 0 rgba(232,196,122,.13);
}
.index-contract-shell:focus-visible {
  outline: 2px solid #e8c47a;
  outline-offset: 4px;
}
.index-contract-table { min-width: 1180px; }
.index-contract-table th:nth-child(1) { width: 150px; }
.index-contract-table th:nth-child(2) { width: 115px; }
.index-contract-table th:nth-child(3) { width: 125px; }
.index-contract-table th:nth-child(4) { width: 90px; }
.index-contract-table th:nth-child(5),
.index-contract-table th:nth-child(6) { width: 235px; }
.index-contract-table th:nth-child(7) { width: 105px; }
.index-contract-table th:nth-child(8) { width: 125px; }
.index-contract-table td:first-child { color: #edf5ff; font-weight: 600; }
.index-contract-table th {
  border-right: 1px solid rgba(121,185,238,.12);
  border-bottom: 1px solid rgba(232,196,122,.28);
  background:
    radial-gradient(circle at 50% 0,rgba(60,151,235,.14),transparent 70%),
    linear-gradient(180deg,#123d6c,#0b2b52);
  color: #f0f5fc;
}
.index-contract-table td {
  border-right-color: rgba(89,158,220,.09);
  border-bottom-color: rgba(89,158,220,.12);
  color: #b9cde3;
}
.index-contract-table tbody tr:nth-child(even) { background: rgba(25,76,132,.16); }
.index-contract-table tbody tr:hover { background: rgba(35,103,174,.22); }
.index-contract-table td:nth-child(2) { color: #77bdf1; }
.index-contract-table td:nth-child(5),
.index-contract-table td:nth-child(6) { font-size: 11px; }
.index-contract-note {
  padding: 0 4px;
  line-height: 1.8;
}
.contract-table-shell {
  overflow-x: auto;
  border: 1px solid rgba(54,146,238,.55);
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(10,41,81,.98),rgba(3,19,41,.98));
  box-shadow: 0 28px 70px rgba(0,11,32,.36),inset 0 1px 0 rgba(255,255,255,.05);
  scrollbar-color: #328edc #06162d;
}
.contract-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}
.contract-table th {
  height: 74px;
  padding: 14px 13px;
  background: linear-gradient(180deg,#2878dc,#1f63c6);
  color: #f5f9ff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.contract-table th:nth-child(1) { width: 150px; }
.contract-table th:nth-child(2) { width: 115px; }
.contract-table th:nth-child(3) { width: 125px; }
.contract-table th:nth-child(4) { width: 90px; }
.contract-table th:nth-child(5),
.contract-table th:nth-child(6) { width: 205px; }
.contract-table th:nth-child(7),
.contract-table th:nth-child(8) { width: 105px; }
.contract-table td {
  padding: 20px 13px;
  border-right: 1px solid rgba(103,171,239,.1);
  border-bottom: 1px solid rgba(103,171,239,.13);
  color: #c6d8ed;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}
.contract-table tbody tr:nth-child(even) { background: rgba(38,103,205,.12); }
.contract-table tbody tr:hover { background: rgba(45,126,223,.18); }
.contract-table td:nth-child(2) { color: #6ec1ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.contract-table td:last-child,.contract-table th:last-child { border-right: 0; }
.contract-table tbody tr:last-child td { border-bottom: 0; }
.contract-note { margin-top: 17px; color: rgba(143,174,211,.66); font-size: 11px; }
.metals-example { background: radial-gradient(circle at 88% 30%,rgba(217,170,76,.08),transparent 30%),linear-gradient(180deg,rgba(4,18,39,.6),rgba(5,17,37,.25)); }

.energy-hero {
  background-image:
    linear-gradient(90deg,rgba(3,13,31,.98) 0%,rgba(3,13,31,.82) 43%,rgba(3,13,31,.25) 78%,rgba(3,13,31,.72) 100%),
    linear-gradient(180deg,rgba(4,16,36,.06),rgba(4,16,36,.2) 65%,#061026 100%),
    var(--stock-hero-image),
    radial-gradient(circle at 76% 44%,rgba(32,181,178,.16),transparent 24%),
    radial-gradient(circle at 78% 44%,rgba(72,180,255,.08),transparent 43%),
    linear-gradient(135deg,#061127 0%,#082333 58%,#071329 100%);
}
.futures-hero {
  background-image:
    linear-gradient(90deg,rgba(3,13,31,.98) 0%,rgba(3,13,31,.82) 43%,rgba(3,13,31,.25) 78%,rgba(3,13,31,.72) 100%),
    linear-gradient(180deg,rgba(4,16,36,.06),rgba(4,16,36,.2) 65%,#061026 100%),
    var(--stock-hero-image),
    radial-gradient(circle at 76% 44%,rgba(222,178,80,.19),transparent 24%),
    radial-gradient(circle at 78% 44%,rgba(72,180,255,.07),transparent 43%),
    linear-gradient(135deg,#061127 0%,#19192d 58%,#071329 100%);
}
.forex-hero {
  background-image:
    linear-gradient(90deg,rgba(3,13,31,.98) 0%,rgba(3,13,31,.82) 43%,rgba(3,13,31,.25) 78%,rgba(3,13,31,.72) 100%),
    linear-gradient(180deg,rgba(4,16,36,.06),rgba(4,16,36,.2) 65%,#061026 100%),
    var(--stock-hero-image),
    radial-gradient(circle at 76% 44%,rgba(87,110,255,.18),transparent 24%),
    radial-gradient(circle at 78% 44%,rgba(72,180,255,.09),transparent 43%),
    linear-gradient(135deg,#061127 0%,#101d3b 58%,#071329 100%);
}
.energy-benefit-section { background: radial-gradient(circle at 50% 0,rgba(39,183,169,.09),transparent 40%),linear-gradient(180deg,rgba(5,23,48,.4),rgba(3,15,34,.7)); }
.futures-benefit-section { background: radial-gradient(circle at 50% 0,rgba(218,174,78,.1),transparent 40%),linear-gradient(180deg,rgba(5,23,48,.4),rgba(3,15,34,.7)); }
.forex-benefit-section { background: radial-gradient(circle at 50% 0,rgba(87,110,255,.1),transparent 40%),linear-gradient(180deg,rgba(5,23,48,.4),rgba(3,15,34,.7)); }
.indices-benefits .benefit-mark svg,
.metals-benefits .benefit-mark svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 6px rgba(232,196,122,.24));
}
.energy-example { background: radial-gradient(circle at 88% 30%,rgba(39,183,169,.07),transparent 30%),linear-gradient(180deg,rgba(4,18,39,.6),rgba(5,17,37,.25)); }
.futures-example { background: radial-gradient(circle at 88% 30%,rgba(218,174,78,.08),transparent 30%),linear-gradient(180deg,rgba(4,18,39,.6),rgba(5,17,37,.25)); }
.forex-example { background: radial-gradient(circle at 88% 30%,rgba(87,110,255,.08),transparent 30%),linear-gradient(180deg,rgba(4,18,39,.6),rgba(5,17,37,.25)); }

.compact-contract-shell { max-width: 1040px; margin-inline: auto; }
.compact-contract-table { min-width: 900px; }
.compact-contract-table th { width: auto !important; }
.futures-warning {
  max-width: 1040px;
  margin: 20px auto 0;
  padding: 22px 25px;
  border: 1px solid rgba(232,196,122,.26);
  border-radius: 14px;
  background: rgba(232,196,122,.045);
  text-align: center;
}
.futures-warning strong { color: #e8c47a; font-size: 13px; }
.futures-warning p { margin-top: 8px; color: #99b3d2; font-size: 12px; line-height: 1.8; }

.currency-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 10%,rgba(87,110,255,.11),transparent 28%),
    linear-gradient(180deg,#060d20,rgba(6,22,45,.76));
}
.currency-section .section-head { max-width: 820px; }
.currency-contract-section {
  scroll-margin-top: 96px;
  background:
    radial-gradient(circle at 86% 10%,rgba(87,110,255,.11),transparent 28%),
    linear-gradient(180deg,#060d20,rgba(6,22,45,.76));
}
.currency-contract-heading { max-width: 900px !important; }
.currency-contract-heading .currency-contract-kicker {
  margin: 0 0 8px !important;
  color: #eef6ff !important;
  font-size: clamp(18px,2.2vw,28px) !important;
  font-weight: 650 !important;
  letter-spacing: .055em !important;
  line-height: 1.2 !important;
}
.currency-contract-heading h2 { margin-top: 0; }
.currency-contract-heading > p:last-child {
  max-width: none;
  margin-top: 16px !important;
  color: #99b3d2 !important;
  font-size: 13px !important;
}
.currency-contracts {
  max-width: 1320px;
  margin-inline: auto;
}
.currency-contract-panel { border-radius: 14px; }
.currency-contract-scroll { max-height: 650px; }
.currency-contract-table { min-width: 1120px; }
.currency-contract-table th,
.currency-contract-table td { white-space: pre-line; }
.currency-contract-table th { height: 76px; }
.currency-contract-table td {
  height: 96px;
  color: #d4e3f5;
  font-size: 12px;
  line-height: 1.65;
}
.currency-contract-table th:nth-child(1) { width: 155px; }
.currency-contract-table th:nth-child(2) { width: 115px; }
.currency-contract-table th:nth-child(3) { width: 105px; }
.currency-contract-table th:nth-child(4) { width: 230px; }
.currency-contract-table th:nth-child(5) { width: 245px; }
.currency-contract-table th:nth-child(6) { width: 115px; }
.currency-contract-table th:nth-child(7) { width: 135px; }
.currency-contract-table td:first-child { color: #f0f6ff; font-weight: 600; }
.currency-contract-table td:nth-child(2) {
  color: #67c0ff;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight: 700;
}
.currency-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  overflow: hidden;
  border: 1px solid rgba(64,149,236,.5);
  border-radius: 20px;
  background: linear-gradient(155deg,rgba(10,41,80,.94),rgba(2,18,39,.98));
  box-shadow: 0 26px 65px rgba(0,12,34,.3);
}
.currency-grid span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(72,180,255,.12);
  border-bottom: 1px solid rgba(72,180,255,.12);
  color: #c9dcf2;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 14px;
  letter-spacing: .04em;
  transition: color .2s,background .2s;
}
.currency-grid span:nth-child(5n) { border-right: 0; }
.currency-grid span:nth-last-child(-n+5) { border-bottom: 0; }
.currency-grid span:hover { color: #fff; background: rgba(53,138,231,.16); }

/* Keep every product specification visible inside its desktop card. Futures is
   intentionally excluded because its compact table keeps its existing sizing. */
@media (min-width: 821px) {
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table-shell {
    overflow-x: hidden;
  }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table {
    min-width: 0;
  }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th,
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table td {
    padding-right: 8px;
    padding-left: 8px;
  }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(1) { width: 13%; }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(2) { width: 10%; }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(3) { width: 11%; }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(4) { width: 8%; }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(5),
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(6) { width: 20%; }
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(7),
  body:is([data-account-page="indices"],[data-account-page="metals"],[data-account-page="energy"]) .contract-table th:nth-child(8) { width: 9%; }

  body[data-account-page="forex"] .currency-contract-table { min-width: 0; }
  body[data-account-page="forex"] .currency-contract-table th,
  body[data-account-page="forex"] .currency-contract-table td {
    padding-right: 8px;
    padding-left: 8px;
  }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(1) { width: 13%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(2) { width: 9%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(3) { width: 9%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(4) { width: 22%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(5) { width: 23%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(6) { width: 11%; }
  body[data-account-page="forex"] .currency-contract-table th:nth-child(7) { width: 13%; }
}

@media (max-width: 1000px) {
  .metals-benefits { grid-template-columns: repeat(2,1fr); }
  .currency-grid { grid-template-columns: repeat(3,1fr); }
  .currency-grid span:nth-child(5n) { border-right: 1px solid rgba(72,180,255,.12); }
  .currency-grid span:nth-child(3n) { border-right: 0; }
  .currency-grid span:nth-last-child(-n+5) { border-bottom: 1px solid rgba(72,180,255,.12); }
  .currency-grid span:nth-last-child(-n+3) { border-bottom: 0; }
}

@media (max-width: 820px) {
  .indices-benefits,.metals-benefits { grid-template-columns: 1fr; }
  .indices-benefits .stock-benefit,.metals-benefits .stock-benefit { min-height: 0; }
  .contract-table-shell {
    margin-right: -18px;
    border-radius: 16px 0 0 16px;
  }
  .index-contract-heading > div > p:last-child { font-size: 13px; }
  .currency-contract-heading .currency-contract-kicker { font-size: 17px !important; }
  .currency-contract-heading > p:last-child { font-size: 12px !important; line-height: 1.7; }
  .currency-contracts { margin-inline: -4px; padding: 13px; border-radius: 16px; }
  .currency-contract-panel { border-radius: 12px; }
  .currency-contract-scroll { max-height: 560px; }
  .currency-grid { grid-template-columns: repeat(2,1fr); }
  .currency-grid span:nth-child(3n) { border-right: 1px solid rgba(72,180,255,.12); }
  .currency-grid span:nth-child(2n) { border-right: 0; }
  .currency-grid span:nth-last-child(-n+3) { border-bottom: 1px solid rgba(72,180,255,.12); }
  .currency-grid span:nth-last-child(-n+2) { border-bottom: 0; }
}