/* Public pages and illustrative screens share the workspace's visual language. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2'); }
:is(.public-page,.legal-page,.auth-page) { --ink: #0a0b0d; --muted: #5b616e; --line: #e2e4e8; --soft: #eef0f3; --accent: #0052ff; font-family: 'DM Sans',Arial,sans-serif; font-optical-sizing: auto; font-size: 16px; background: #eef0f3; color: var(--ink); -webkit-font-smoothing: antialiased; }
:is(.public-page,.legal-page,.auth-page) ::selection { background: #cddbff; color: #062f89; }
:is(.public-page,.legal-page,.auth-page) :focus-visible { outline: 3px solid #7ba4ff; outline-offset: 4px; }
:is(.public-page,.legal-page,.auth-page) .wrap { width: min(1280px,calc(100% - 64px)); }
:is(.public-page,.legal-page,.auth-page) .masthead { background: #fff; width: 100%; height: 96px; padding-inline: max(32px,calc((100vw - 1280px)/2)); border-bottom: 1px solid var(--line); }
.header-nav>a:not(.button) { font-size: 15px; font-weight: 500; color: var(--ink); }
.header-nav { gap: 32px; }
:is(.public-page,.legal-page,.auth-page) .button { border-radius: 999px; min-height: 48px; padding: 13px 25px; font-size: 15px; font-weight: 650; box-shadow: none; }
:is(.public-page,.legal-page,.auth-page) .button.primary { background: #0052ff; border-color: #0052ff; color: #fff; }
:is(.public-page,.legal-page,.auth-page) .button.primary:hover { background: #0045d8; border-color: #0045d8; transform: none; }
:is(.public-page,.legal-page,.auth-page) .button.secondary { background: #eef0f3; color: #0a0b0d; border-color: transparent; }
:is(.public-page,.legal-page,.auth-page) .eyebrow { color: #5b616e; font-size: 11px; letter-spacing: .12em; }
.public-page .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 70px; }
.hero-introduction { min-width: 0; }
.public-page .hero h1 { font-size: clamp(38px,4.1vw,58px); font-weight: 450; line-height: 1.08; letter-spacing: -.045em; }
.public-page .hero h1>span { color: var(--ink); }
.public-page .hero-copy { max-width: none; margin-top: 25px; }
.public-page .hero-copy p { font-size: 15px; color: var(--muted); line-height: 1.75; }
.public-page .hero-copy strong { font-weight: 550; color: var(--ink); }
.public-page .hero-copy .launch-note { font-size: 13px; color: #5b616e; }
.public-page .actions { margin: 28px 0 0; gap: 18px; }
.public-page .status-dot { background: #0052ff; }
.hero-markets { background: #e4edff; border-radius: 36px; color: #142b50; padding: 34px; min-width: 0; }
.hero-market-tabs { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: #4c6284; margin-bottom: 26px; }
.hero-market-tabs>span:first-child { color: #0045d8; background: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 600; }
.hero-market-row { display: flex; align-items: center; gap: 13px; padding: 20px 0; }
.hero-market-row>span:not(.asset-icon) { font-size: clamp(21px,2.1vw,29px); letter-spacing: -.025em; }
.hero-market-row>div { margin-left: auto; text-align: right; }
.hero-market-row strong { display: block; font-size: clamp(22px,2.2vw,30px); font-weight: 450; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hero-market-row small { font-size: 15px; }
.hero-markets figcaption { color: #4c6284; font-size: 11px; margin-top: 26px; }
.public-page .feature { padding-top: 115px; }
.public-page .feature-heading { grid-template-columns: .8fr 1.2fr; gap: 50px; margin-bottom: 36px; }
.public-page .feature-label { font-size: 17px; }
.public-page .feature-heading h2, .public-page .closing h2 { font-size: clamp(32px,3.3vw,46px); font-weight: 450; letter-spacing: -.04em; line-height: 1.12; }
.public-page .feature-heading h2>span, .public-page .closing h2>span { color: #5b616e; }
.public-page .feature-heading p:not(.feature-label) { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 24px; }
.public-page .product-preview { background: #e3e7ed; border: 1px solid #dde1e7; border-radius: 32px; padding: 30px 30px 0; max-height: none; }
.public-page .product-preview::before { display: none; }
.public-page .product-preview figcaption { color: #5b616e; font-size: 12px; padding: 20px 10px; }
.public-page .outlook-card { background: #fff; border: 1px solid #e2e4e8; border-radius: 26px; padding: 30px; box-shadow: none; }
.public-page .outlook-card h3 { font-size: 23px; font-weight: 500; margin: 25px 0 16px; }
.public-page .outlook-card .eyebrow { color: #0052ff; }
.public-page .outlook-card p { color: #5b616e; font-size: 14px; }
.public-page .outlook-note, .public-page .risk-note { color: #5b616e; font-size: 12px; line-height: 1.9; }
.public-page .faq-list { margin-top: 30px; }
.public-page .faq-list details { background: #fff; border: 1px solid #e2e4e8; border-radius: 18px; padding: 0 23px; margin-bottom: 12px; }
.public-page .faq-list summary { font-size: 17px; font-weight: 500; padding: 22px 0; }
.public-page .faq-list details p { font-size: 14px; margin: 0 0 24px; }
.public-page .closing { background: #e2eaff; border: 1px solid #d5dfff; border-radius: 30px; padding: 42px; margin: 80px 0 30px; }
.public-page .closing .eyebrow { color: #0052ff; }
.public-page .closing .closing-note { font-size: 15px; color: #5b616e; margin: 20px 0 0; }
.public-page .risk-note { margin-bottom: 60px; }
.footer { background: #fff; color: #0a0b0d; border-top: 1px solid #e2e4e8; margin-top: 0; padding: 72px 0 32px; font-family: 'DM Sans',Arial,sans-serif; }
.footer .footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: 48px; align-items: start; }
.footer .footer-brand { grid-column: auto; }
.footer .brand img { width: 88px; height: 88px; border-radius: 16px; }
.footer .footer-brand .footer-tagline { font-size: 23px; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; color: #0a0b0d; margin: 24px 0 12px; }
.footer .footer-brand .footer-availability { font-size: 14px; line-height: 1.8; color: #5b616e; margin: 0; }
.footer nav { gap: 6px; }
.footer nav h2 { font-size: 16px; line-height: 1.5; font-weight: 650; letter-spacing: -.015em; color: #0a0b0d; margin: 0 0 16px; }
.footer nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 15px; font-weight: 400; line-height: 1.6; color: #5b616e; text-decoration: none; }
.footer nav a>span { font-size: 15px; color: #8a919e; margin-left: 0; }
.footer nav a:hover { color: #0052ff; text-decoration: underline; }
.footer .footer-bottom { grid-column: 1/-1; align-items: center; margin-top: 12px; padding-top: 28px; gap: 24px; border-top: 1px solid #e2e4e8; color: #5b616e; font-size: 13px; line-height: 1.7; }
.footer .footer-address { margin: 0; color: #5b616e; font-size: 13px; font-style: normal; line-height: 1.7; text-align: right; }

/* Decorative instrument illustrations stay legible at every preview size. */
.public-page .asset-icon { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #3475b9; color: #fff; font-size: 20px; font-weight: 650; }
.public-page .asset-glyph { width: 24px; height: 24px; display: block; flex: none; }
.public-page .asset-BTCUSD { background: #f7931a; }
.public-page .asset-ETHUSD { background: #627eea; }
.public-page .asset-GOLD { background: #e5b95e; color: #342700; }
.public-page .asset-SILVER { background: #b9c6d9; color: #263344; }
.public-page .asset-OIL_CRUDE { background: #e88e64; color: #38200b; }
.public-page .asset-NATURALGAS { background: #64cce0; color: #0d3541; }
.public-page .asset-UNG { background: #8da6ff; color: #1c2859; }
.public-page .asset-GLD { background: #ecc85f; color: #382b00; }
.demo-blue { color: #0052ff!important; }
.demo-up { color: #047857!important; }
.demo-down { color: #c92540!important; }
.hero-markets .demo-up { color: #047857!important; }
.hero-markets .demo-down { color: #c92540!important; }

/* Illustrative HTML screens; no live data or interactive trade controls. */
.demo-window { width: 100%; max-width: 100%; min-width: 0; border-radius: 20px; background: #fff; border: 1px solid #d6dae1; overflow: hidden; box-shadow: 0 15px 40px #0a0b0d0c; }
.demo-window * { min-width: 0; box-sizing: border-box; }
.demo-window-bar { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; background: #fafbfc; border-bottom: 1px solid #e2e4e8; color: #5b616e; font-size: 10px; }
.demo-shell { display: grid; grid-template-columns: 160px minmax(0,1fr); }
.demo-rail { padding: 24px 14px; border-right: 1px solid #e2e4e8; display: flex; flex-direction: column; gap: 8px; }
.demo-rail>img { border-radius: 12px; margin: 0 8px 25px; }
.demo-caption { font-size: 8px; letter-spacing: .12em; color: #5b616e; display: block; margin-bottom: 10px; }
.demo-rail .demo-caption { margin-left: 9px; }
.demo-nav { display: flex; align-items: center; gap: 9px; padding: 12px 9px; font-size: 10px; border-radius: 999px; color: #3c424d; }
.demo-nav .icon { width: 16px; height: 16px; flex: none; }
.demo-nav.selected { background: #edf3ff; color: #0052ff; font-weight: 600; }
.demo-back-home { border-top:1px solid #e2e4e8;margin-top:10px;padding-top:18px;border-radius:0; }
.demo-body, .demo-portfolio { background: #eef0f3; }
.demo-topbar { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 15px; background: #fff; padding: 12px 23px; border-bottom: 1px solid #e2e4e8; font-size: 11px; }
.demo-topbar>span { display: inline-flex; gap: 9px; align-items: center; }
.demo-topbar>img { border-radius: 8px; }
.demo-avatar { background: #edf3ff; color: #0052ff; border-radius: 50%; font-style: normal; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; font-size: 9px; flex: none; }
.demo-main { padding: 26px; }
.demo-main>h3 { font-size: 29px; font-weight: 450; margin-bottom: 9px; }
.demo-main>p { font-size: 12px; color: #5b616e; margin-bottom: 24px; }
.demo-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 25px; }
.demo-metrics>div { padding: 17px 14px; background: #fff; border: 1px solid #e2e4e8; border-radius: 20px; }
.demo-metrics span { font-size: 9px; color: #5b616e; }
.demo-metrics strong { display: block; font-size: clamp(17px,1.65vw,23px); font-weight: 500; letter-spacing: -.035em; margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.demo-metrics small { color: #5b616e; font-size: 8px; line-height: 1.5; display: block; }
.demo-metrics .demo-equity { background: #fff; border-color: #e2e4e8; color: #0a0b0d; }
.demo-equity span, .demo-equity small { color: #5b616e; }
.demo-market-board { border-radius: 24px; overflow: hidden; background: #f8faff; border:1px solid #dce4f0; color: #273950; }
.demo-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 20px 15px; }
.demo-section-title h4, .demo-white-card h4 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }
.demo-sample { color: #60718a; font-size: 9px; }
.demo-tabs { display: flex; gap: 7px; padding: 0 20px 10px; overflow: auto; }
.demo-tabs>span { padding: 9px 12px; font-size: 10px; white-space: nowrap; flex: none; }
.demo-tabs .selected { background: #e1ebff; color:#0045d8; border-radius: 999px; }
.demo-table-scroll { overflow-x: auto; }
.demo-market-table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 10px; font-variant-numeric: tabular-nums; }
.demo-market-table th { text-align: left; font-weight: 450; }
.demo-market-table thead th { color: #566882; background:#eef3fb; font-size: 9px; padding: 13px 10px; }
.demo-market-table td, .demo-market-table tbody th { padding: 14px 10px; border-top: 1px solid #e1e8f2; white-space: nowrap; }
.demo-market-table tr>:first-child { padding-left: 20px; }
.demo-market-table tr>:last-child { padding-right: 20px; }
.demo-market-table td::before { display: none; }
.demo-asset { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.demo-asset small, .demo-position small { display: block; font-size: 9px; color: #a5aab4; margin-top: 4px; }
.demo-asset .asset-icon { width: 28px; height: 28px; font-size: 17px; }
.demo-asset .asset-glyph { width: 20px; height: 20px; }
.demo-buy, .demo-confirm { background: #0052ff; color: #fff; padding: 8px 15px; font-size: 10px; border-radius: 999px; display: inline-block; font-weight: 600; white-space: nowrap; }
.demo-market-note { border-top: 1px solid #dce4f0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #5b6980; font-size: 9px; padding: 15px 20px; }
.demo-trade-layout { display: grid; grid-template-columns: minmax(0,1fr) 34%; }
.demo-portfolio-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.demo-portfolio-summary>div { background: #fff; padding: 20px; border-radius: 20px; }
.demo-portfolio-summary span { font-size: 11px; color: #5b616e; }
.demo-portfolio-summary strong { display: block; font-size: 28px; font-weight: 500; letter-spacing: -.04em; margin-top: 10px; }
.demo-white-card { padding: 23px; background: #fff; border: 1px solid #e2e4e8; border-radius: 23px; margin-top: 18px; }
.demo-small { display: block; color: #5b616e; font-size: 10px; margin-top: 7px; }
.demo-chart { width: 100%; height: auto; display: block; margin: 18px 0; }
.demo-performance { display: flex; gap: 35px; padding-top: 17px; border-top: 1px solid #e2e4e8; color: #5b616e; font-size: 10px; }
.demo-performance strong { display: block; font-size: 18px; font-weight: 500; color: #0a0b0d; margin-top: 7px; }
.demo-position { display: flex; gap: 12px; align-items: center; margin-top: 22px; font-size: 12px; }
.demo-position>.demo-up { margin-left: auto; }
.demo-sell { background: #fff1f3; color: #c92540; padding: 9px 15px; border-radius: 999px; font-size: 11px; }
.demo-ticket { background: #fff; border-left: 1px solid #e2e4e8; border-radius: 0; padding: 28px; display: flex; flex-direction: column; }
.demo-ticket>.demo-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.demo-ticket>.demo-caption>span { font-size: 24px; font-weight: 300; }
.demo-ticket h3 { font-size: 29px; font-weight: 450; letter-spacing: -.035em; }
.demo-ticket>p { color: #5b616e; font-size: 12px; line-height: 1.8; margin-top: 14px; }
.demo-ticket-quotes { display: grid; grid-template-columns: 1fr 1fr; background: #0a0b0d; color: #fff; padding: 20px 15px; border-radius: 20px; gap: 18px; margin-top: 6px; }
.demo-ticket-quotes span { color: #a5aab4; font-size: 10px; }
.demo-ticket-quotes strong { display: block; font-size: 22px; font-weight: 500; margin-top: 9px; letter-spacing: -.035em; }
.demo-ticket label, .demo-settings-card label { font-size: 11px; color: #353b46; display: flex; justify-content: space-between; gap: 10px; margin: 24px 0 8px; }
.demo-field { background: #fff; border: 1px solid #cfd3db; border-radius: 10px; padding: 13px; font-size: 14px; overflow-wrap: anywhere; }
.demo-ticket dl { border-top: 1px solid #e2e4e8; margin: 25px 0 0; padding-top: 15px; font-size: 11px; }
.demo-ticket dl>div { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; }
.demo-ticket dt { color: #5b616e; }
.demo-ticket dd { margin: 0; }
.demo-ticket>.demo-ticket-note { font-size: 10px; margin: 18px 0 28px; }
.demo-ticket .demo-confirm { display: block; text-align: center; padding: 14px; font-size: 12px; margin-top: auto; }
.demo-profile { display: flex; align-items: center; gap: 16px; margin-top: 30px; font-size: 12px; }
.demo-profile>.demo-avatar { width: 62px; height: 62px; font-size: 18px; }
.demo-profile small, .demo-settings-card>small { font-size: 10px; color: #5b616e; display: block; margin-top: 7px; line-height: 1.7; }
.demo-field.locked { background: #f1f3f5; color: #7a8290; display: flex; justify-content: space-between; align-items: center; }
.demo-field.locked .icon { width: 15px; color: #5b616e; }
.demo-code { letter-spacing: .25em; font-size: 24px; }
.demo-message { background: #edf3ff; color: #254f9c; padding: 18px; font-size: 12px; border-radius: 16px; margin-bottom: 36px; line-height: 1.8; }

/* Public legal and authentication pages. */
.legal-page .legal-content { max-width: 1000px; padding: 70px 0 90px; }
.legal-document { background: #fff; border: 1px solid #e2e4e8; border-radius: 28px; padding: clamp(24px,5vw,64px); }
.legal-page .legal-heading h1 { font-size: clamp(38px,4.5vw,58px); font-weight: 450; letter-spacing: -.04em; }
.legal-page .legal-heading { border-color: #e2e4e8; }
.legal-page .legal-intro { font-size: 17px; color: #5b616e; }
.legal-page .legal-date { color: #5b616e; font-size: 12px; }
.legal-page .legal-document section h2 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.legal-page .legal-document p, .legal-page .legal-document li { font-size: 15px; color: #464e5c; line-height: 1.85; }
.legal-page .legal-switcher { gap: 10px; }
.legal-page .legal-switcher a { background: #eef0f3; border: 1px solid transparent; border-radius: 999px; padding: 12px 20px; font-size: 14px; color: #0a0b0d; text-decoration: none; }
.legal-page .legal-switcher a[aria-current=page] { background: #0052ff; color: #fff; }
.legal-page .legal-contact { background: #edf3ff; border: 1px solid #d5e3ff; border-radius: 20px; padding: clamp(20px,3vw,32px); }
.auth-page .auth-content { padding: 70px 0 90px; }
.auth-page .auth-section { width: 100%; max-width: 550px; margin: 0 auto; padding: 40px; background: #fff; border: 1px solid #e2e4e8; border-radius: 28px; }
.auth-page .page-title { font-size: 42px; font-weight: 450; letter-spacing: -.04em; line-height: 1.13; }
.auth-page .auth-section>.muted { font-size: 16px; line-height: 1.8; }
.auth-page input { border-radius: 12px; min-height: 52px; border-color: #cfd3db; font-size: 16px; }
.auth-page input:focus { outline: 2px solid #0052ff; outline-offset: 2px; }
.auth-page label { font-size: 14px; font-weight: 500; }
.auth-page .signin-legal, .auth-page .fine-print { font-size: 12px; color: #5b616e; line-height: 1.8; }
.auth-page .notice { border-radius: 16px; background: #edf3ff; color: #254f9c; border-color: #d5e3ff; }
.auth-page .notice.error { background: #fff1f3; color: #b4233e; border-color: #f0cdd5; }
.auth-page .inline-link { color: #0052ff; font-size: 13px; }
/* A complete sample screen at tablet/phone widths, without a cropped table. */
@media (max-width:1100px) {
  .demo-shell { display: block; }
  .demo-rail { display: none; }
  .demo-tabs { flex-wrap: wrap; gap: 6px; overflow: visible; }
  .demo-tabs>span { padding: 9px 11px; }
  .demo-table-scroll { overflow: visible; }
  .demo-market-table { display: block; min-width: 0; width: 100%; }
  .demo-market-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .demo-market-table tbody { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-market-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; padding: 18px; border-top: 1px solid #dce4f0; }
  .demo-market-table tbody tr:nth-child(odd) { border-right: 1px solid #dce4f0; }
  .demo-market-table tbody th, .demo-market-table tbody td { padding: 0; border: 0; white-space: normal; font-size: 14px; line-height: 1.5; }
  .demo-market-table tbody th { grid-column: 1/-1; }
  .demo-market-table td::before { display: block; content: attr(data-label); font-size: 10px; font-weight: 400; color: #60718a; margin-bottom: 3px; }
  .demo-market-table td:last-child { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  .demo-market-table td:last-child::before { display: none; }
  .demo-market-table .demo-asset { font-size: 14px; }
  .demo-market-table .demo-asset small { font-size: 10px; }
  .demo-market-table .demo-buy { padding: 9px 16px; font-size: 11px; }
  .demo-trade-layout { display: block; }
  .demo-ticket { border-left: 0; border-top: 1px solid #e2e4e8; }
  .demo-ticket .demo-confirm { margin-top: 12px; }
}
@media (max-width:1000px) {
  .footer .footer-grid { grid-template-columns: minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap: 30px; }
  .public-page .hero { gap: 32px; }
  .hero-markets { padding: 26px; }
  .hero-market-row { gap: 10px; }
  .hero-market-row>span:not(.asset-icon) { font-size: 20px; }
  .hero-market-row strong { font-size: 21px; }
  .demo-shell { grid-template-columns: 130px minmax(0,1fr); }
  .demo-rail { padding-inline: 10px; }
  .demo-nav { font-size: 9px; }
  .demo-main { padding: 20px; }
  .demo-metrics { grid-template-columns: 1fr 1fr; }
  .demo-ticket { padding: 22px; }
  .demo-trade-layout { grid-template-columns: minmax(0,1fr) 38%; }
  .demo-ticket-quotes strong { font-size: 19px; }
}
@media (max-width:700px) {
  :is(.public-page,.legal-page,.auth-page) .wrap { width: calc(100% - 36px); }
  :is(.public-page,.legal-page,.auth-page) .masthead { width: 100%; padding-inline: 18px; height: 82px; }
  .header-nav { gap: 16px; }
  .header-nav .desktop-nav { display: none; }
  .public-page .hero { grid-template-columns: 1fr; padding-top: 42px; gap: 36px; }
  .public-page .hero h1 { font-size: 42px; }
  .public-page .hero-copy p { font-size: 15px; }
  .hero-markets { padding: 26px 22px; border-radius: 28px; }
  .hero-market-tabs { font-size: 11px; }
  .hero-market-row>span:not(.asset-icon) { font-size: 22px; }
  .hero-market-row strong { font-size: 23px; }
  .hero-market-row small { font-size: 13px; }
  .hero-market-row .asset-icon { width: 30px; height: 30px; }
  .hero-market-row .asset-glyph { width: 21px; height: 21px; }
  .public-page .feature { padding-top: 75px; }
  .public-page .feature-heading { grid-template-columns: 1fr; gap: 22px; }
  .public-page .feature-heading h2, .public-page .closing h2 { font-size: 34px; }
  .public-page .feature-heading p:not(.feature-label) { font-size: 15px; }
  .public-page .product-preview { padding: 12px 12px 0; border-radius: 24px; }
  .public-page .product-preview figcaption { font-size: 10px; padding: 16px 4px; }
  .demo-shell { display: block; }
  .demo-rail { display: none; }
  .demo-main { padding: 18px 14px; }
  .demo-main>h3 { font-size: 27px; }
  .demo-topbar { padding: 12px 14px; font-size: 10px; }
  .demo-window-bar { font-size: 9px; padding: 0 12px; gap: 8px; }
  .demo-window-bar .window-dots { gap: 3px; }
  .demo-window-bar .window-dots i { width: 6px; height: 6px; }
  .demo-metrics { gap: 8px; }
  .demo-metrics>div { padding: 14px 10px; border-radius: 17px; }
  .demo-metrics strong { font-size: 20px; }
  .demo-market-board { border-radius: 20px; }
  .demo-market-table tbody { grid-template-columns: 1fr; }
  .demo-market-table tbody tr:nth-child(odd) { border-right: 0; }
  .demo-tabs { padding-inline: 16px; gap: 3px; }
  .demo-tabs>span { font-size: 10px; padding: 8px 9px; }
  .demo-section-title { flex-wrap: wrap; gap: 6px; padding-inline: 16px; }
  .demo-topbar { flex-wrap: wrap; }
  .demo-trade-layout { display: block; }
  .demo-ticket { border-left: 0; border-top: 1px solid #e2e4e8; padding: 26px 22px; }
  .demo-ticket .demo-confirm { margin-top: 12px; }
  .demo-ticket-quotes strong { font-size: clamp(18px,5vw,24px); }
  .demo-portfolio-summary { gap: 9px; }
  .demo-portfolio-summary>div { padding: 15px 12px; }
  .demo-portfolio-summary strong { font-size: 24px; }
  .demo-performance { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .demo-settings-card label { flex-wrap: wrap; }
  .demo-white-card { padding: 19px 15px; }
  .demo-position { gap: 8px; font-size: 11px; flex-wrap: wrap; }
  .public-page .outlook-card { padding: 25px; }
  .public-page .closing { padding: 28px; margin-top: 60px; border-radius: 24px; }
  .footer { padding: 40px 0 28px; }
  .footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
  .footer .footer-brand { grid-column: 1/-1; }
  .footer nav h2 { margin-bottom: 10px; }
  .footer nav a { min-height: 40px; font-size: 14px; }
  .footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 0; padding-top: 24px; }
  .footer .footer-address { text-align: left; }
  .legal-page .legal-content { padding: 35px 0 50px; }
  .legal-document { border-radius: 24px; padding: 25px 21px; }
  .legal-page .legal-document section h2 { font-size: 22px; }
  .legal-page .legal-document p, .legal-page .legal-document li { font-size: 14px; }
  .legal-page .legal-switcher a { padding: 11px 15px; font-size: 12px; }
  .auth-page .auth-content { padding: 35px 0 50px; }
  .auth-page .auth-section { padding: 28px 23px; border-radius: 24px; }
  .auth-page .page-title { font-size: 35px; }
}
@media (max-width:360px) {
  .hero-market-row>span:not(.asset-icon) { font-size: 19px; }
  .hero-market-row strong { font-size: 20px; }
  .demo-metrics strong { font-size: 17px; }
  .demo-portfolio-summary { grid-template-columns: 1fr; }
  .demo-profile { gap: 10px; }
}

/* Current client workspace previews. */
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.demo-heading h3{margin:0;font-size:29px;font-weight:450;letter-spacing:-.035em}
.demo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.demo-actions .icon{width:13px;height:13px;vertical-align:middle}
.demo-profile-tools .icon{width:17px;height:17px;flex:none}
.demo-topbar .icon{width:17px;height:17px;flex:none}
.demo-metrics>div:has(.demo-up),.demo-portfolio-summary>div:has(.demo-up){background:#f2fcf7;border-color:#cfeadd}
.demo-refresh-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#5b616e;margin-bottom:18px}
.demo-refresh-line>span:last-child{display:inline-flex;align-items:center;gap:5px;color:#0052ff}
.demo-refresh-line .icon{width:14px;height:14px}
.demo-ticket-quotes{gap:8px;padding:8px;border-radius:18px}
.demo-ticket-quotes>div{padding:12px 8px}
.demo-ticket-quotes>div:last-child{background:#0052ff;border-radius:12px}
.demo-ticket-quotes>div:last-child span{color:#e8efff}
.demo-ticket-quotes strong{font-size:19px}
.demo-order-type{display:flex;padding:4px;border:1px solid #e2e4e8;background:#f4f6f9;border-radius:12px;gap:4px}
.demo-order-type>span{flex:1;text-align:center;padding:9px;font-size:12px}
.demo-order-type .selected{background:#0052ff;color:#fff;border-radius:8px}
.demo-pending-prices{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin:18px 0;color:#5b616e}
.demo-pending-prices strong{display:block;color:#0a0b0d;margin-top:5px}
.demo-outline{border:1px solid #d5d9e0;border-radius:99px;padding:8px 13px;font-size:10px;color:#0052ff;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.demo-success{display:flex;align-items:center;gap:7px;background:#e9f8ef;color:#047857;border:1px solid #cfeadd;padding:12px 14px;border-radius:10px;margin:18px 0 0 auto;width:fit-content;font-size:11px}
.demo-success .icon{width:15px;height:15px}
.demo-history-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px}
.demo-history-filters>span:not(.demo-buy){padding:10px 12px;background:#fff;border:1px solid #d5d9e0;border-radius:10px}
.demo-history-row{display:grid;grid-template-columns:1.1fr 1.4fr 1fr .8fr;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #e2e4e8;font-size:11px}
.demo-history-row strong{font-weight:500;display:block}.demo-history-row small{display:block;color:#5b616e;font-size:9px;margin-top:5px}
.demo-history-head{font-size:10px;color:#5b616e;padding-top:0}
.demo-history-state{padding:6px 9px;background:#ecfdf5;color:#047857;border-radius:99px;width:fit-content;font-size:10px}
.demo-history-state.pending{background:#edf3ff;color:#0052ff}
.demo-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px;color:#5b616e;padding-top:20px}
.demo-support-note{display:flex;align-items:center;gap:9px;font-size:11px;color:#5b616e;margin-top:20px;line-height:1.7}
.demo-support-note .icon{flex:none;width:18px;height:18px}
@media(max-width:1100px){.demo-trade-layout{display:block}.demo-ticket{border-left:0;border-top:1px solid #e2e4e8}.demo-ticket .demo-confirm{margin-top:12px}}
@media(max-width:700px){.demo-heading h3{font-size:26px}.demo-heading .demo-buy{font-size:10px}.demo-topbar{gap:10px}.demo-profile-tools>span:first-of-type{display:none}.demo-history-head{display:none}.demo-history-row{grid-template-columns:1fr 1fr;gap:9px;font-size:11px}.demo-history-row>span:nth-child(3){grid-column:1}.demo-history-row>span:nth-child(4){justify-self:end}.demo-pagination{gap:15px}.demo-ticket-quotes strong{font-size:22px}.demo-success{font-size:10px}.demo-performance{gap:12px;flex-wrap:wrap}}

.demo-market-table .demo-change-absolute{display:block;margin-top:4px;font-size:10px;color:inherit;opacity:.85}

.demo-market-board .demo-asset small { color:#60718a; }
.demo-market-board .demo-up { color:#047857!important; }
.demo-market-board .demo-down { color:#c92540!important; }
.demo-portfolio-summary>div:first-child { background:#fff; color:#0a0b0d; }