/* Trading location guides and workload examples. */
.trading-intro { display:flex; justify-content:space-between; align-items:center; gap:36px; padding:30px 0 0; }
.trading-intro h3 { font-size:30px; margin:13px 0; }
.trading-intro p:not(.eyebrow) { max-width:690px; line-height:1.8; }
.trading-target-stat { flex:0 0 230px; display:flex; flex-direction:column; align-items:flex-end; gap:13px; }
.trading-target-stat > span { font-size:13px; color:var(--muted); }
#trading-guide { grid-column:1 / -1; min-width:0; scroll-margin-top:100px; }
.trading-guide-tabs { display:flex; gap:10px; margin-bottom:24px; }
.trading-guide-tabs button { text-align:left; flex:1; padding:18px 22px; border:1px solid #bcc9da; border-radius:5px; background:#f5f7fb; color:var(--ink); font:600 16px/1.5 var(--sans); cursor:pointer; }
.trading-guide-tabs button span { display:block; font-size:13px; font-weight:400; margin-top:4px; }
.trading-guide-tabs button[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:white; }
.trading-panel { border:1px solid var(--line); border-radius:6px; padding:30px; background:white; min-width:0; }
.trading-panel + .trading-panel { margin-top:24px; }
.trading-panel-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:32px; margin-bottom:24px; }
.trading-panel-heading h3 { font-size:28px; margin-top:13px; line-height:1.25; }
.trading-panel-heading > p { line-height:1.8; font-size:14px; }
.jito-feature { display:grid; grid-template-columns:1fr 1.25fr; gap:32px; padding:24px; background:#eef3ff; border:1px solid #cfdbf0; border-radius:5px; margin-bottom:26px; }
.trading-badge { color:var(--blue); font:13px/1.5 var(--mono); letter-spacing:1px; }
.jito-feature h4 { font-size:29px; margin:8px 0; }
.jito-feature p { font-size:14px; line-height:1.8; }
.jito-feature .eyebrow { font-size:13px; margin-bottom:13px; }
.jito-feature .trading-muted { margin-top:14px; font-size:13px; }
.trading-city-links { display:flex; flex-wrap:wrap; gap:7px; }
.trading-city { display:inline-flex; align-items:center; justify-content:space-between; gap:13px; padding:8px 10px; border:1px solid #c2cde3; border-radius:4px; background:white; color:var(--blue); font-size:13px; font-weight:500; min-height:38px; text-decoration:none; }
.trading-city:hover { background:#e7edff; border-color:var(--blue); }
.trading-muted { color:var(--muted); }
.trading-controls { display:grid; grid-template-columns:1fr 240px; gap:16px; padding-bottom:22px; }
.trading-controls label { font-size:13px; font-weight:600; color:var(--ink); }
.trading-controls input, .trading-controls select { width:100%; min-height:45px; margin-top:8px; padding:10px 13px; border:1px solid #b9c7d9; border-radius:4px; background:white; color:var(--ink); font:14px var(--sans); }
.trading-controls input:focus, .trading-controls select:focus, .trading-guide-tabs button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.trading-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:4px; }
.trading-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; line-height:1.65; }
.trading-table th, .trading-table td { padding:16px 18px; vertical-align:middle; border-bottom:1px solid #e1e7ef; }
.trading-table thead th { font-size:13px; color:var(--muted); font-weight:600; background:var(--paper); }
.trading-table tbody th { font-weight:600; color:var(--ink); width:34%; }
.trading-table td { color:var(--muted); }
.trading-table tbody tr:last-child > * { border-bottom:0; }
.trading-table tbody tr:hover { background:#fafbff; }
.trading-regional { display:block; font-size:13px; margin-top:6px; }
.trading-provider { color:var(--ink); text-decoration:none; border-radius:4px; }
.trading-provider:hover { color:var(--blue); }
.trading-provider:hover > span { text-decoration:underline; text-underline-offset:4px; }
.trading-provider:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.trading-results-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.trading-results-footer p { font-size:13px; }
.trading-results-footer button { padding:10px 16px; min-height:44px; background:white; color:var(--blue); border:1px solid #bcc9da; border-radius:4px; font:500 13px var(--sans); cursor:pointer; }
.trading-results-footer button:hover { background:#eef3ff; }
.trading-empty a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.trading-reviewed { margin-top:16px; font-size:13px; color:var(--muted); }
.broker-callout { background:var(--paper); border-left:3px solid var(--blue); padding:18px 22px; margin-bottom:25px; }
.broker-callout p { margin-top:6px; line-height:1.8; font-size:14px; }
.use-cases-section { background:var(--paper); border-top:1px solid var(--line); }
.use-case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.use-case-grid article { padding:32px; background:white; border:1px solid #d4dde9; border-radius:6px; display:flex; flex-direction:column; }
.use-case-number { font:13px/1.7 var(--mono); color:var(--muted); letter-spacing:.7px; }
.use-case-grid h3 { font-size:28px; line-height:1.25; margin:20px 0 17px; }
.use-case-grid p { font-size:15px; line-height:1.85; flex:1; }
[hidden] { display:none !important; }
@media (max-width:760px) {
  .trading-intro { align-items:flex-start; gap:20px; }
  .trading-target-stat { flex-basis:170px; }
  .trading-target-stat > span { text-align:right; }
  .trading-panel { padding:20px; }
  .trading-panel-heading, .jito-feature { grid-template-columns:1fr; gap:20px; }
  .trading-controls { grid-template-columns:1fr 180px; }
  .trading-table { min-width:640px; }
  .use-case-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .trading-intro { flex-direction:column; }
  .trading-target-stat { flex-basis:auto; align-items:flex-start; }
  .trading-target-stat > span { text-align:left; }
  .trading-guide-tabs { gap:8px; }
  .trading-guide-tabs button { padding:13px; font-size:13px; }
  .trading-guide-tabs button span { font-size:13px; }
  .trading-panel { padding:16px; }
  .trading-panel-heading h3, .trading-intro h3 { font-size:25px; }
  .trading-controls { grid-template-columns:1fr; }
  .jito-feature { padding:18px; }
  .use-case-grid article { padding:24px; }
  .use-case-grid h3 { font-size:25px; }
}

.trading-target-stat .latency-value { display:flex; align-items:baseline; gap:10px; color:var(--blue); }
.trading-target-stat .latency-number { font:500 64px/1 Arial, Helvetica, sans-serif; white-space:nowrap; }
.trading-target-stat .latency-unit { font-size:28px; }
.trading-intro + .latency-note { margin:22px 0 32px; }

@media (max-width:480px) {
  .trading-table { min-width:0; }
  .trading-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .trading-table tbody, .trading-table tr { display:block; }
  .trading-table tbody tr { border-bottom:1px solid var(--line); padding:16px; }
  .trading-table tbody tr:last-child { border-bottom:0; }
  .trading-table tbody th, .trading-table tbody td { display:block; width:auto; padding:0; border:0; }
  .trading-table tbody th { font-size:16px; margin-bottom:14px; }
  .trading-table tbody td + td { margin-top:14px; }
  .trading-table td[data-label]::before { content:attr(data-label); display:block; font-size:13px; font-weight:600; color:#68788d; margin-bottom:6px; }
  .trading-table td { overflow-wrap:anywhere; }
}

.use-cases-section .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.use-cases-section .section-heading > p { max-width:480px; }
@media (max-width:760px) { .use-cases-section .section-heading { grid-template-columns:1fr; gap:24px; } }

.trading-brand { display:flex; align-items:center; gap:12px; }
.trading-brand > span { overflow-wrap:anywhere; }
.trading-logo { display:flex; align-items:center; justify-content:center; flex:0 0 52px; width:52px; height:42px; padding:5px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.trading-logo img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.trading-brand-feature { margin:10px 0; }
.trading-brand-feature .trading-logo { width:48px; flex-basis:48px; height:48px; }
.trading-brand-feature h4 { margin:0; }
.trading-logo:has(img[src$="star-atlas.png"]) { background:var(--navy); border-color:var(--navy); }
