/* Category pages share the existing Market360X typography and palette. */
.trading-site { background: var(--color-background-6, var(--t-subtle)); }
.trading-page { display: flow-root; overflow: clip; color: var(--t-ink); background: var(--color-background-6, var(--t-subtle)); }
.trading-page .trade-wrap { width: min(100% - 40px, 1290px); margin-inline: auto; }
.trading-page h1, .trading-page h2, .trading-page h3 { font-family: "Sora", sans-serif; font-weight: 400; }
.trading-page h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.18; letter-spacing: -.045em; }
.trading-page h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.2; letter-spacing: -.04em; }
.trading-page h3 { font-size: 22px; line-height: 1.35; letter-spacing: -.025em; }
.trading-page p { color: rgb(var(--t-ink-rgb) / .6); font: 400 16px/1.7 "Inter Tight", sans-serif; }
.trading-page .trade-lead { font-size: 18px; line-height: 1.65; max-width: 570px; margin-top: 22px; }
.trading-page .trade-label { display: block; color: rgb(var(--t-ink-rgb) / .55); font: 500 12px/1.5 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.trading-page .trade-label::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--m3x-mint); vertical-align: middle; margin-right: 10px; }
.trading-page .trade-hero { position: relative; padding: 160px 0 80px; }
.trading-page .trade-hero::before { position: absolute; content: ""; width: 500px; height: 500px; right: -220px; top: 50px; background: radial-gradient(ellipse, rgba(49,105,170,.12), transparent 67%); pointer-events: none; }
.trading-page .trade-center { text-align: center; }
.trading-page .trade-center .trade-lead { margin-inline: auto; max-width: 670px; }
.trading-page .trade-center h1 { max-width: 920px; margin-inline: auto; }
.trading-page .trade-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; align-items: center; }
.trading-page .trade-section { padding: 88px 0; }
.trading-page .trade-section + .trade-section { padding-top: 40px; }
.trading-page .trade-section-intro { max-width: 690px; margin-bottom: 42px; }
.trading-page .trade-section-intro p { margin-top: 18px; }
.trading-page .trade-section-intro.trade-center { margin-inline: auto; }
.trading-page .trade-copy p { margin-top: 20px; }
.trading-page .trade-copy h3 { margin-top: 28px; }
.trading-page .trade-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.trading-page .trade-center .trade-actions { justify-content: center; }
.trading-page .trade-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 24px; padding: 14px 25px; border-radius: 999px; background: var(--t-ink); color: var(--t-subtle); font: 500 14px/1.5 "IBM Plex Mono", monospace; white-space: nowrap; }
.trading-page .trade-button::before { content: ""; position: absolute; right: 0; top: 0; width: 65px; height: 100%; border-radius: 50%; background: #5a9fff; filter: blur(17px); z-index: -2; opacity: .55; }
.trading-page .trade-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; }
.trading-page .trade-button svg { width: 16px; height: 16px; transition: transform .2s; }
.trading-page .trade-button:hover svg { transform: translateX(3px); }
.trading-page .trade-text-link { color: rgb(var(--t-ink-rgb) / .8); font: 400 14px/1.5 "IBM Plex Mono", monospace; padding: 10px 0; }
.trading-page .trade-text-link:hover { color: var(--t-ink); text-decoration: underline; text-underline-offset: 6px; }
.trading-page a:focus-visible, .trading-page summary:focus-visible { outline: 2px solid var(--m3x-mint); outline-offset: 6px; }
.trading-page .trade-panel { position: relative; background: var(--t-surface); border: 1px solid rgb(var(--t-ink-rgb) / .08); border-radius: 10px; overflow: hidden; }
.trading-page .trade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgb(var(--t-ink-rgb) / .08); padding: 18px 24px; font: 400 12px/1.5 "IBM Plex Mono", monospace; color: rgb(var(--t-ink-rgb) / .7); }
.trading-page .trade-panel-head small { color: rgb(var(--t-ink-rgb) / .4); font: inherit; font-size: 10px; }
.trading-page .trade-panel-body { padding: 28px; }
.trading-page .trade-preview { box-shadow: 0 0 70px -35px rgba(90,159,255,.5); }
.trading-page .trade-note { font-size: 12px; line-height: 1.6; color: rgb(var(--t-ink-rgb) / .4); }
.trading-page .trade-tag { display: inline-flex; padding: 4px 9px; border-radius: 4px; font: 400 10px/1.4 "IBM Plex Mono", monospace; background: rgba(90,159,255,.1); color: #2563eb; }
.trading-page .trade-green { color: var(--m3x-accent); }
.trading-page .trade-blue { color: #2563eb; }
.trading-page .trade-table-wrap { overflow-x: auto; }
.trading-page table { width: 100%; border-collapse: collapse; text-align: left; font: 400 13px/1.5 "IBM Plex Mono", monospace; white-space: nowrap; }
.trading-page th { color: rgb(var(--t-ink-rgb) / .4); font-weight: 400; font-size: 11px; padding: 16px 24px; }
.trading-page td { padding: 19px 24px; border-top: 1px solid rgb(var(--t-ink-rgb) / .06); color: rgb(var(--t-ink-rgb) / .8); }
.trading-page td small { display: block; font-size: 10px; margin-top: 4px; color: rgb(var(--t-ink-rgb) / .4); }
.trading-page .trade-mini-chart { width: 110px; height: 30px; color: var(--m3x-accent); }
.trading-page .trade-rule { border-top: 1px solid rgb(var(--t-ink-rgb) / .1); }
.trading-page .trade-points { margin-top: 26px; }
.trading-page .trade-points li { display: flex; gap: 14px; padding: 13px 0; color: rgb(var(--t-ink-rgb) / .7); font: 400 16px/1.6 "Inter Tight",sans-serif; border-bottom: 1px solid rgb(var(--t-ink-rgb) / .07); }
.trading-page .trade-points li::before { content: "↗"; color: var(--m3x-accent); }
.trading-page .trade-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.trading-page .trade-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.trading-page .trade-feature { padding: 32px; background: var(--t-surface); border-radius: 8px; }
.trading-page .trade-feature p { margin-top: 12px; }
.trading-page .trade-feature-icon { display: block; margin-bottom: 36px; color: #2563eb; font: 400 28px "IBM Plex Mono",monospace; }
.trading-page .trade-close { padding: 72px 0 80px; text-align: center; border-top: 1px solid rgb(var(--t-ink-rgb) / .09); }
.trading-page .trade-close h2 { max-width: 800px; margin-inline: auto; }
.trading-page .trade-close p { max-width: 600px; margin: 18px auto 28px; }
.trading-site > footer { padding-top: 64px; border-top: 1px solid rgb(var(--t-ink-rgb) / .07); }
.trading-page .trade-faq details { border-bottom: 1px solid rgb(var(--t-ink-rgb) / .12); padding: 23px 0; }
.trading-page .trade-faq summary { position: relative; padding-right: 32px; cursor: pointer; list-style: none; font: 400 18px/1.5 "Sora",sans-serif; }
.trading-page .trade-faq summary::-webkit-details-marker { display: none; }
.trading-page .trade-faq summary::after { position: absolute; right: 0; content: "+"; color: rgb(var(--t-ink-rgb) / .5); }
.trading-page .trade-faq details[open] summary::after { content: "−"; }
.trading-page .trade-faq details p { padding-top: 15px; max-width: 700px; }
/* Options: a full-width flow blotter and contract breakdown. */
.options-page .options-flow { margin-top: 60px; }
.options-page .options-flow-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 24px; gap: 24px; background: rgb(var(--t-ink-rgb) / .02); }
.options-page .options-flow-bottom b { font: 400 16px "Sora",sans-serif; display: block; margin-bottom: 6px; }
.options-page .options-contract { padding: 30px; }
.options-page .options-contract strong { display: block; color: var(--m3x-accent); font: 400 42px "Sora",sans-serif; margin-bottom: 18px; }
.options-page .options-contract p { margin-top: 12px; }
.options-page .options-lens { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 30px; border-top: 1px solid rgb(var(--t-ink-rgb) / .1); padding: 32px 0; align-items: start; }
.options-page .options-lens > span { color: #2563eb; font: 400 24px "IBM Plex Mono",monospace; }
/* Algo: a connected signal workflow and a vertical review process. */
.algo-page .algo-engine { padding: 30px; background: radial-gradient(ellipse at 80% 0,rgba(90,159,255,.13),transparent 65%),var(--t-surface); }
.algo-page .algo-inputs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.algo-page .algo-inputs span { padding: 17px 8px; text-align: center; border: 1px solid rgb(var(--t-ink-rgb) / .12); border-radius: 6px; font: 400 11px "IBM Plex Mono",monospace; color: rgb(var(--t-ink-rgb) / .7); }
.algo-page .algo-connector { width: 1px; height: 34px; background: rgba(90,159,255,.45); margin: auto; }
.algo-page .algo-core { padding: 26px; border: 1px solid rgba(90,159,255,.4); border-radius: 7px; text-align: center; background: #eef4ff; }
.algo-page .algo-core img { width: 40px; height: 40px; margin: 0 auto 14px; }
.algo-page .algo-core b { font: 400 18px "Sora",sans-serif; }
.algo-page .algo-core p { font-size: 13px; margin-top: 8px; }
.algo-page .algo-result { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; background: var(--t-subtle); border-radius: 6px; }
.algo-page .algo-result b { font: 400 14px "IBM Plex Mono",monospace; }
.algo-page .algo-result small { display: block; font-size: 11px; color: rgb(var(--t-ink-rgb) / .45); margin-top: 5px; }
.algo-page .algo-principles { display: flex; gap: 28px; margin-top: 34px; padding-top: 25px; border-top: 1px solid rgb(var(--t-ink-rgb) / .1); color: rgb(var(--t-ink-rgb) / .5); font: 400 12px/1.5 "IBM Plex Mono",monospace; }
.algo-page .algo-steps { border-left: 1px solid rgba(90,159,255,.35); margin-left: 14px; }
.algo-page .algo-step { position: relative; padding: 0 0 35px 35px; }
.algo-page .algo-step:last-child { padding-bottom: 0; }
.algo-page .algo-step::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #5a9fff; box-shadow: 0 0 0 7px #f3f5f8; }
.algo-page .algo-step p { margin-top: 10px; }
.algo-page .algo-discipline { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding: 44px; border-radius: 8px; background: var(--t-surface); }
/* Stocks: a compact equity watchlist and a large annotated price chart. */
.stocks-page .stock-watchlist td { padding: 18px 20px; }
.stocks-page .stock-ticker { display: flex; align-items: center; gap: 12px; }
.stocks-page .stock-ticker img { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: white; }
.stocks-page .stock-universe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-block: 1px solid rgba(17,24,39,.09); }
.stocks-page .stock-universe span { color: rgb(var(--t-ink-rgb) / .45); font: 400 13px "IBM Plex Mono",monospace; }
.stocks-page .stock-universe b { color: rgb(var(--t-ink-rgb) / .8); font: 400 18px "Sora",sans-serif; }
.stocks-page .stock-chart { padding: 28px; }
.stocks-page .stock-chart svg { width: 100%; height: 210px; margin-block: 20px; }
.stocks-page .stock-chart-title { display: flex; justify-content: space-between; align-items: center; }
.stocks-page .stock-chart-title strong { font: 400 26px "Sora",sans-serif; }
.stocks-page .stock-levels { display: flex; gap: 12px; }
.stocks-page .stock-levels div { flex: 1; padding: 14px; background: var(--t-subtle); border-radius: 5px; color: rgb(var(--t-ink-rgb) / .45); font-size: 11px; }
.stocks-page .stock-levels b { display: block; color: white; font: 400 16px "IBM Plex Mono",monospace; margin-top: 8px; }
/* Crypto: asset-led market board and an on-chain activity diagram. */
.crypto-page .crypto-board { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; margin-top: 55px; text-align: left; }
.crypto-page .crypto-assets { padding: 28px; }
.crypto-page .crypto-asset { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgb(var(--t-ink-rgb) / .07); }
.crypto-page .crypto-asset:last-child { border-bottom: 0; }
.crypto-page .crypto-asset img { width: 42px; height: 42px; }
.crypto-page .crypto-asset b { display: block; font: 400 22px "Sora",sans-serif; }
.crypto-page .crypto-asset small { display: block; color: rgb(var(--t-ink-rgb) / .4); margin-top: 6px; font: 400 11px "IBM Plex Mono",monospace; }
.crypto-page .crypto-feed { padding: 12px 26px; }
.crypto-page .crypto-feed article { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid rgb(var(--t-ink-rgb) / .07); }
.crypto-page .crypto-feed article:last-child { border-bottom: 0; }
.crypto-page .crypto-feed article > span { color: #2563eb; font-size: 22px; }
.crypto-page .crypto-feed b { display: block; font: 400 14px/1.5 "Sora",sans-serif; }
.crypto-page .crypto-feed p { font-size: 12px; margin-top: 6px; }
.crypto-page .crypto-transfer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 54px 32px; background: radial-gradient(ellipse at center,rgba(90,159,255,.12),transparent 70%),var(--t-surface); }
.crypto-page .crypto-wallet { text-align: center; flex: 1; }
.crypto-page .crypto-wallet span { display: flex; width: 70px; height: 70px; margin: 0 auto 18px; border: 1px solid rgb(var(--t-ink-rgb) / .15); border-radius: 18px; align-items: center; justify-content: center; font-size: 28px; color: #2563eb; background: var(--t-subtle); }
.crypto-page .crypto-wallet b { font: 400 13px "IBM Plex Mono",monospace; }
.crypto-page .crypto-transfer-arrow { color: var(--m3x-accent); font: 400 30px "IBM Plex Mono",monospace; }
.crypto-page .crypto-bento { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.crypto-page .crypto-bento .trade-feature:first-child { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: 44px; }
.crypto-page .crypto-bento .trade-feature:first-child h3 { font-size: 32px; }
.crypto-page .crypto-clock { width: 105px; height: 105px; margin-bottom: 35px; border: 1px solid rgba(90,159,255,.3); border-radius: 50%; display: grid; place-items: center; color: #2563eb; font: 400 28px "IBM Plex Mono",monospace; box-shadow: 0 0 50px rgba(90,159,255,.08); }
@media (max-width: 1100px) {
  .trading-page .trade-split { gap: 35px; }
  .trading-page .trade-three { gap: 16px; }
  .trading-page .trade-feature { padding: 24px; }
  .trading-page .trade-panel-head { padding: 16px 20px; }
  .trading-page .trade-section { padding-block: 65px; }
  .algo-page .algo-discipline { gap: 30px; padding: 30px; }
}
@media (max-width: 800px) {
  .trading-page .trade-hero { padding: 125px 0 55px; }
  .trading-page .trade-split, .trading-page .trade-three, .crypto-page .crypto-board, .crypto-page .crypto-bento, .algo-page .algo-discipline { grid-template-columns: 1fr; }
  .trading-page .trade-split { gap: 40px; }
  .trading-page .trade-lead { max-width: 100%; }
  .trading-page .trade-section + .trade-section { padding-top: 25px; }
  .trading-page .trade-section-intro { margin-bottom: 30px; }
  .trading-page .trade-feature-icon { margin-bottom: 24px; }
  .options-page .options-lens { grid-template-columns: 45px 1fr; gap: 18px; }
  .options-page .options-lens p { grid-column: 2; }
  .options-page .options-flow-bottom { gap: 16px; }
  .crypto-page .crypto-bento .trade-feature:first-child { grid-row: auto; padding: 28px; }
  .trading-page .trade-close { padding: 55px 0; }
  .trading-site > footer { padding-top: 45px; }
}
@media (max-width: 480px) {
  .trading-page .trade-wrap { width: calc(100% - 36px); }
  .trading-page h1 { font-size: 39px; }
  .trading-page .trade-lead { font-size: 16px; }
  .trading-page .trade-two { grid-template-columns: 1fr; }
  .trading-page .trade-actions { gap: 18px; }
  .trading-page .trade-section { padding-block: 50px; }
  .trading-page .trade-panel-body { padding: 20px; }
  .options-page .options-flow-bottom { grid-template-columns: 1fr; }
  .algo-page .algo-engine { padding: 20px; }
  .algo-page .algo-result { flex-wrap: wrap; }
  .algo-page .algo-inputs { gap: 6px; }.algo-page .algo-inputs span { font-size: 10px; }
  .algo-page .algo-principles { flex-wrap: wrap; gap: 10px 20px; }
  .stocks-page .stock-watchlist td { padding: 15px 12px; }.stocks-page .trade-mini-chart { width: 70px; }
  .stocks-page .stock-universe { justify-content: flex-start; gap: 20px; }
  .stocks-page .stock-chart { padding: 20px; }.stocks-page .stock-levels div { padding: 10px; }
  .crypto-page .crypto-assets { padding: 18px; }.crypto-page .crypto-asset { grid-template-columns: 36px 1fr auto; gap: 10px; }.crypto-page .crypto-asset img { width: 32px; height: 32px; }
}


/* Light theme: separate white surfaces from the page */
.trading-page .trade-feature,
.algo-page .algo-discipline,
.algo-page .algo-engine,
.crypto-page .crypto-transfer {
  border: 1px solid rgb(var(--t-ink-rgb) / 0.07);
  box-shadow: 0 8px 24px -14px rgba(17, 24, 39, 0.14);
}
.trading-page .trade-green,
.trading-page .trade-points li::before { color: var(--m3x-accent); }
.trading-page .trade-mini-chart { color: var(--m3x-accent); }
.trading-page .trade-button::before { opacity: 0.35; }

/* Buttons: no blue glow (matches the rest of the site) */
.trading-page .trade-button::before { display: none; }