/* ============ TRADING BRIDGE — page components (LIGHT) ============ */

/* ---- Hero ---- */
.hero{padding:clamp(2.6rem,5vw,4rem) 0;background:var(--bg-panel);border-bottom:2px solid var(--text);}
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:780px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-content>*+*{margin-top:1.1rem}
.hero-visual>*+*{margin-top:1.1rem}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05}
.hero .lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--text-muted);max-width:54ch}
.eyebrow{display:inline-block;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;background:var(--brand);color:var(--brand-ink);padding:.4rem .7rem;border:2px solid var(--text);box-shadow:3px 3px 0 var(--text)}
.hero-cta-row,.dual-cta,.hero-cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.dual-cta{margin-top:1.5rem}

.hero-visual .mock-frame{margin:0}

/* ---- Ticker ---- */
.ticker-viewport{overflow:hidden;border-block:2px solid var(--text);background:var(--bg-elevated)}
.ticker-marquee{display:flex;width:max-content}
.ticker-track{display:flex;gap:2rem;padding:.6rem 1rem;animation:tickerScroll 28s linear infinite;white-space:nowrap}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track,.ticker-viewport.is-paused .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.ticker-item .up{color:var(--bull)}
.ticker-item .down{color:var(--bear)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---- Bento grid ---- */
.bento{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.bento{grid-template-columns:repeat(4,1fr)}}
.bento-card{background:var(--bg-elevated);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.25rem;transition:transform .15s ease,box-shadow .15s ease}
.bento-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--brand)}
.bento-card.wide{grid-column:span 2}
.bento-card .sym{font-weight:800;font-size:1.1rem}
.bento-card .price{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.4rem}
.bento-card .chg.up{color:var(--bull)}
.bento-card .chg.down{color:var(--bear)}

/* ---- Filter chips ---- */
.chip-row,.filter-row,.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.chip,.filter-chip{font:inherit;font-weight:700;cursor:pointer;background:var(--bg-elevated);color:var(--text);border:2px solid var(--text);padding:.5rem .9rem;border-radius:999px;transition:background .12s,color .12s,transform .12s}
.chip:hover,.filter-chip:hover{transform:translateY(-2px)}
.chip.is-active,.filter-chip.is-active{background:var(--brand);color:var(--brand-ink)}
.is-hidden{display:none !important}

/* ---- Tabs ---- */
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;border-bottom:2px solid var(--border)}
.tab-btn{font:inherit;font-weight:700;cursor:pointer;background:var(--bg-panel);color:var(--text);border:2px solid var(--text);border-bottom:none;padding:.7rem 1.1rem;border-radius:8px 8px 0 0;transition:background .12s}
.tab-btn.is-active{background:var(--brand);color:var(--brand-ink)}
.tab-panel{display:none}
.tab-panel.is-active{display:block}

/* ---- Seg control ---- */
.seg-control{display:inline-flex;gap:0;border:2px solid var(--text);border-radius:10px;overflow:hidden;margin-bottom:1.4rem}
.seg-btn{font:inherit;font-weight:700;cursor:pointer;background:var(--bg-elevated);color:var(--text);border:none;border-right:2px solid var(--text);padding:.6rem 1.1rem}
.seg-btn:last-child{border-right:none}
.seg-btn.is-active{background:var(--brand);color:var(--brand-ink)}
.seg-panel{display:none}
.seg-panel.is-active{display:block}

/* ---- Comparison matrix / dense tables ---- */
.matrix-wrap{overflow-x:auto;border:2px solid var(--text);box-shadow:4px 4px 0 var(--text)}
table.matrix,table.data-table{width:100%;border-collapse:collapse;background:var(--bg-elevated);min-width:560px}
.matrix th,.matrix td,.data-table th,.data-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.matrix thead th,.data-table thead th{background:var(--bg-panel-2);font-weight:800;border-bottom:2px solid var(--text)}
.matrix tbody tr:hover,.data-table tbody tr:hover{background:var(--bg-panel)}
.matrix .yes{color:var(--bull);font-weight:800}
.matrix .no{color:var(--bear);font-weight:800}

/* ---- Platform mock frames ---- */
.mock-frame{border:2px solid var(--text);background:var(--bg-elevated);box-shadow:6px 6px 0 var(--text);border-radius:10px;overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:var(--bg-panel-2);border-bottom:2px solid var(--text)}
.mock-bar .dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--text)}
.mock-bar .dot.r{background:var(--bear)}.mock-bar .dot.y{background:#E8B339}.mock-bar .dot.g{background:var(--bull)}
.mock-bar .url{margin-left:.6rem;font-size:.8rem;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;padding:.2rem .6rem;flex:1}
.mock-body{padding:1.25rem;min-height:200px}
.mock-chart{height:160px;background:repeating-linear-gradient(90deg,var(--bg-panel) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,var(--bg-panel) 0 1px,transparent 1px 32px);border:1px solid var(--border);position:relative}
.mock-chart::after{content:"";position:absolute;left:0;right:0;bottom:20%;height:2px;background:var(--bull)}

/* ---- Gallery ---- */
.gallery-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-item{border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);background:var(--bg-panel-2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-weight:700}

/* ---- Carousel ---- */
.feature-carousel{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
.feature-carousel>*{flex:0 0 80%;scroll-snap-align:start}
@media(min-width:780px){.feature-carousel>*{flex:0 0 32%}}

/* ---- Steps ---- */
.steps-list{display:grid;gap:1rem}
@media(min-width:780px){.steps-list{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--bg-elevated);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.4rem 1.25rem 1.25rem}
.step .step-num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;background:var(--brand);color:var(--brand-ink);border:2px solid var(--text);border-radius:50%;font-weight:800;margin-bottom:.8rem}
.step h3{margin-bottom:.4rem}

/* ---- Stepper / timeline ---- */
.stepper{display:grid;gap:1rem;counter-reset:none}
.timeline{display:grid;gap:1.2rem;border-left:3px solid var(--text);padding-left:1.4rem}
.timeline-item{position:relative;background:var(--bg-elevated);border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);padding:1rem 1.1rem}
.timeline-item::before{content:"";position:absolute;left:-1.85rem;top:1.1rem;width:14px;height:14px;background:var(--brand);border:2px solid var(--text);border-radius:50%}

/* ---- Accordion (generic/faq/checklist) ---- */
.accordion-item,.faq-item,.checklist-item{border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);background:var(--bg-elevated);margin-bottom:.9rem}
.accordion-trigger,.faq-trigger,.checklist-trigger{width:100%;text-align:left;font:inherit;font-weight:700;cursor:pointer;background:none;border:none;color:var(--text);padding:1rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.accordion-trigger::after,.faq-trigger::after,.checklist-trigger::after{content:"+";font-weight:800;font-size:1.3rem;transition:transform .2s;flex:0 0 auto}
.accordion-item.open .accordion-trigger::after,.faq-item.open .faq-trigger::after,.checklist-item.open .checklist-trigger::after{content:"\2212"}
.accordion-body,.faq-body,.checklist-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.accordion-body>*,.faq-body>*,.checklist-body>*{padding:0 1.1rem}
.accordion-body>*:first-child,.faq-body>*:first-child,.checklist-body>*:first-child{padding-top:.2rem}
.accordion-body>*:last-child,.faq-body>*:last-child,.checklist-body>*:last-child{padding-bottom:1.1rem}
@media(prefers-reduced-motion:reduce){.accordion-body,.faq-body,.checklist-body{transition:none}}

/* ---- Expand cards ---- */
.expand-card{border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);background:var(--bg-elevated);padding:1.1rem;margin-bottom:.9rem}
.expand-trigger{font:inherit;font-weight:700;cursor:pointer;background:none;border:none;color:var(--brand);padding:0}
.expand-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.expand-card.open .expand-body{max-height:600px;margin-top:.8rem}

/* ---- Risk band / disclaimer ---- */
.risk-band,.disclaimer-band{background:#FFF4E5;border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.25rem 1.4rem}
.risk-band p,.disclaimer-band p{color:var(--text);margin:0}
.disclaimer-note{background:var(--bg-panel-2);border:2px dashed var(--text);padding:1rem 1.2rem;font-size:.95rem;color:var(--text-muted)}

/* ---- Stats band ---- */
.stats-band{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.stats-band{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg-elevated);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.4rem;text-align:center}
.stat .num{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.stat .label{color:var(--text-muted);font-weight:600;margin-top:.4rem;display:block}

/* ---- Mission / benefit / method grids ---- */
.mission-grid,.benefit-grid,.method-grid,.card-grid,.info-cards{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.mission-grid,.benefit-grid,.method-grid,.card-grid,.info-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.mission-grid,.benefit-grid,.method-grid,.card-grid{grid-template-columns:repeat(3,1fr)}}
.info-card,.card,.panel{background:var(--bg-elevated);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.4rem}
.info-card h3,.card h3{margin-bottom:.5rem}
.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:var(--brand);color:var(--brand-ink);border:2px solid var(--text);border-radius:10px;font-size:1.3rem;font-weight:800;margin-bottom:.8rem}

/* ---- Method icons ---- */
.method-icons{display:flex;flex-wrap:wrap;gap:1rem}
.method-icons .method{flex:0 0 auto;background:var(--bg-elevated);border:2px solid var(--text);box-shadow:3px 3px 0 var(--text);padding:.8rem 1.1rem;font-weight:700}

/* ---- Security badges ---- */
.security-badges{display:flex;flex-wrap:wrap;gap:1rem}
.security-badges .badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg-panel-2);border:2px solid var(--text);padding:.6rem 1rem;font-weight:700}

/* ---- Compliance rail ---- */
.compliance-rail{background:var(--bg-panel-2);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.2rem 1.4rem}
.compliance-rail ul{list-style:none;display:grid;gap:.5rem}
.compliance-rail li{padding-left:1.6rem;position:relative}
.compliance-rail li::before{content:"\2713";position:absolute;left:0;color:var(--bull);font-weight:800}

/* ---- TOC ---- */
.toc{background:var(--bg-panel);border:2px solid var(--text);box-shadow:4px 4px 0 var(--text);padding:1.2rem 1.4rem}
.toc ul{list-style:none;display:grid;gap:.4rem}
.toc a{color:var(--brand);font-weight:600;text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---- Prose ---- */
.prose{max-width:72ch}
.prose h2{margin-top:2rem;margin-bottom:.7rem}
.prose p,.prose li{color:var(--text);margin-bottom:.9rem;line-height:1.7}
.prose ul,.prose ol{padding-left:1.4rem;margin-bottom:1rem}

/* ---- Demo vs live ---- */
.compare-2{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.compare-2{grid-template-columns:repeat(2,1fr)}}

/* ---- CTA ribbon / official ---- */
.cta-band,.cta-ribbon,.cta-official{background:var(--brand);border-block:2px solid var(--text)}
.cta-band .container,.cta-ribbon .container,.cta-official .container{text-align:center}
.cta-band h2,.cta-ribbon h2,.cta-official h2,.cta-band p,.cta-ribbon p,.cta-official p{color:var(--brand-ink)}
.cta-band .copy,.cta-ribbon .copy,.cta-official .copy{max-width:60ch;margin-left:auto;margin-right:auto}
.cta-band .btn-primary,.cta-ribbon .btn-primary,.cta-official .btn-primary{background:var(--bg-elevated);color:var(--brand);border-color:var(--text);margin-top:1.2rem}

/* ---- Search hero ---- */
.search-hero input[type=search]{width:100%;max-width:480px;font:inherit;padding:.8rem 1rem;border:2px solid var(--text);border-radius:8px;background:var(--bg-elevated);color:var(--text)}

/* ---- FAQ categories ---- */
.faq-categories{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem}