/* ===== TRADING BRIDGE COMPONENTS ===== */

/* HERO */
.hero{padding:4rem 0 3rem}
.hero-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:780px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1{margin-bottom:1rem}
.hero .lead{font-size:1.1rem;color:var(--text-muted);margin-bottom:1.5rem;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-visual{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;color:#f4f6f9}
.hero-visual *{color:inherit}
.hero-stat{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--border)}
.hero-stat:last-child{border-bottom:none}
.hero-stat .v{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.hero-stat .v.up{color:var(--bull)}
.hero-stat .v.down{color:var(--bear)}
.hero-stat .l{color:var(--text-muted);font-size:.85rem}

/* PANELS */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .2s,box-shadow .2s}
.panel-glow:hover{border-color:var(--system);box-shadow:0 0 0 1px var(--system),0 8px 28px rgba(59,130,246,.15)}
.panel-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.panel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.panel-grid-3{grid-template-columns:repeat(3,1fr)}}
.panel h3{margin-bottom:.5rem}
.panel p{color:var(--text-muted);font-size:.92rem;margin:0}
.panel-icon{width:40px;height:40px;border-radius:var(--radius);background:var(--bg-panel-2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:1rem;color:var(--system)}

/* TICKER */
.ticker-viewport{overflow:hidden;background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.6rem 0}
.ticker-marquee{display:flex;width:max-content}
.ticker-track{display:flex;flex-shrink:0;gap:2.5rem;padding-right:2.5rem;animation:ticker-scroll 38s linear infinite}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track{animation-play-state:paused}
.ticker-viewport.is-paused .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker-marquee{overflow-x:auto}}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ticker-item .sym{font-weight:700;color:var(--text)}
.ticker-item .pr{color:var(--text-muted)}
.ticker-item .ch.up{color:var(--bull)}
.ticker-item .ch.down{color:var(--bear)}

/* TABS */
.tab-list{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tab-btn{padding:.7rem 1.1rem;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.92rem;transition:color .2s,border-color .2s}
.tab-btn:hover{color:var(--text)}
.tab-btn.is-active{color:var(--text);border-bottom-color:var(--system)}
.tab-panel{display:none;animation:fade-in .35s ease}
.tab-panel.is-active{display:block}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}
.install-icons{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.install-icon{width:46px;height:46px;border-radius:var(--radius);background:var(--bg-panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.depth-tabs .tab-list{position:relative}

/* COMPARISON MATRIX / TABLES */
.matrix-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
table.matrix,table.data-tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.matrix th,.matrix td,.data-tbl th,.data-tbl td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.matrix thead th,.data-tbl thead th{background:var(--bg-panel-2);font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);cursor:pointer;position:relative}
.matrix td.num,.data-tbl td.num{font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.matrix tbody tr:hover{background:var(--bg-panel)}
.matrix td.col-hl,.matrix th.col-hl{background:rgba(59,130,246,.12)}
.data-tbl tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.yes{color:var(--bull);font-weight:700}
.no{color:var(--bear);font-weight:700}
.sort-ind{font-size:.7rem;opacity:.6;margin-left:.3rem}
.matrix th .tip-trigger{text-decoration:underline dotted;cursor:help}

#matrix-tooltip{position:fixed;background:var(--bg-panel-2);border:1px solid var(--system);color:#f4f6f9;padding:.5rem .7rem;border-radius:var(--radius);font-size:.8rem;max-width:240px;z-index:150;pointer-events:none;opacity:0;transition:opacity .15s}
#matrix-tooltip *{color:inherit}
#matrix-tooltip.is-visible{opacity:1}

/* FILTER CHIPS */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.filter-chip{padding:.45rem .9rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--text-muted);background:var(--bg-panel);transition:border-color .2s,color .2s}
.filter-chip:hover{color:var(--text)}
.filter-chip.is-active{border-color:var(--system);color:var(--text);background:rgba(59,130,246,.1)}
.asset-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem}
.asset-card.is-hidden{display:none}
.asset-card .cat{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;color:var(--system);letter-spacing:.08em}
.asset-card h4{margin:.3rem 0}
.asset-card .meta{color:var(--text-muted);font-size:.85rem;font-variant-numeric:tabular-nums}

/* ACCORDION */
.accordion-item,.faq-item,.checklist-item{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:.6rem;overflow:hidden;background:var(--bg-panel)}
.accordion-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:1rem 1.2rem;font-weight:600;font-size:.98rem;color:var(--text);gap:1rem}
.accordion-trigger::after{content:'+';font-family:var(--font-mono);font-size:1.3rem;color:var(--system);transition:transform .25s;flex-shrink:0}
.accordion-item.open .accordion-trigger::after,.faq-item.open .accordion-trigger::after,.checklist-item.open .accordion-trigger::after{content:'\2212'}
.accordion-body,.faq-body,.checklist-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
@media (prefers-reduced-motion:reduce){.accordion-body,.faq-body,.checklist-body{transition:none}}
.accordion-body-inner,.faq-body-inner,.checklist-body-inner{padding:0 1.2rem 1.2rem;color:var(--text-muted);font-size:.92rem}

/* EXPAND CARDS */
.expand-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel);margin-bottom:.6rem;overflow:hidden}
.expand-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem 1.2rem;font-weight:600;color:var(--text)}
.expand-trigger::after{content:'\25BC';font-size:.7rem;color:var(--system);transition:transform .25s}
.expand-card.open .expand-trigger::after{transform:rotate(180deg)}
.expand-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.expand-card.open .expand-body{max-height:600px}
.expand-body-inner{padding:0 1.2rem 1.2rem;color:var(--text-muted);font-size:.92rem}
@media (prefers-reduced-motion:reduce){.expand-body{transition:none}}

/* SEG CONTROL */
.seg-control{display:inline-flex;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:3px;gap:3px;margin-bottom:1.5rem}
.seg-btn{padding:.5rem 1rem;border-radius:var(--radius);font-size:.88rem;font-weight:600;color:var(--text-muted)}
.seg-btn.is-active{background:var(--system);color:#fff}
.seg-panel{display:none}
.seg-panel.is-active{display:block}

/* RIBBON / CTA */
.cta-ribbon,.cta-official{background:linear-gradient(135deg,var(--bg-panel),var(--bg-panel-2));border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;text-align:center;color:#f4f6f9}
.cta-ribbon *,.cta-official *{color:inherit}
.cta-ribbon h2,.cta-official h2{margin-bottom:.75rem}
.cta-ribbon p,.cta-official p{color:var(--text-muted);margin-bottom:1.5rem;max-width:50ch;margin-left:auto;margin-right:auto}
.dual-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* TRUST STRIP */
.trust-strip{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;align-items:center;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel)}
.trust-item{text-align:center;color:var(--text-muted);font-size:.85rem}
.trust-item .big{display:block;font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* STEPS */
.step{display:flex;gap:1rem;padding:1.25rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:.75rem}
.step-num{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--system);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-mono)}
.step h4{margin-bottom:.3rem}
.step p{color:var(--text-muted);font-size:.9rem;margin:0}
.step.is-active{border-color:var(--system);box-shadow:0 0 0 1px var(--system)}

/* STEP RAIL with connector */
.step-rail{position:relative;padding-left:1rem}
.step-rail .step{position:relative}
.step-rail .step:not(:last-child)::before{content:'';position:absolute;left:18px;top:62px;bottom:-12px;width:2px;background:var(--border)}

/* STEP FLOW horizontal connectors */
.step-flow{display:grid;gap:1.25rem}
@media(min-width:780px){.step-flow{grid-template-columns:repeat(4,1fr);gap:2rem}
  .step-flow .flow-step{position:relative}
  .step-flow .flow-step:not(:last-child)::after{content:'\2192';position:absolute;right:-1.3rem;top:1rem;color:var(--system);font-size:1.2rem}}
.flow-step{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem;text-align:center}
.flow-step .step-num{margin:0 auto .75rem}
.flow-step.is-active{border-color:var(--system)}

/* TIMELINE */
.timeline{position:relative;padding-left:2rem;max-width:760px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:2rem}
.timeline-item::before{content:'';position:absolute;left:-2rem;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg-base);border:3px solid var(--system)}
.timeline-item .yr{font-family:var(--font-mono);color:var(--system);font-weight:700;font-size:.85rem}
.timeline-item h4{margin:.2rem 0 .4rem}
.timeline-item p{color:var(--text-muted);font-size:.92rem}

/* PULL QUOTE */
.pull-quote{font-family:var(--font-mono);font-size:clamp(1.3rem,3vw,2rem);line-height:1.4;border-left:3px solid var(--system);padding:1rem 0 1rem 1.5rem;margin:2rem 0;color:var(--text)}
.pull-quote cite{display:block;font-size:.85rem;color:var(--text-muted);margin-top:1rem;font-style:normal}

/* SECTION NAV DOTS */
.section-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:.6rem;z-index:80}
@media(min-width:780px){.section-dots{display:flex}}
.section-dots a{width:11px;height:11px;border-radius:50%;border:2px solid var(--text-muted);transition:background .2s,border-color .2s}
.section-dots a.is-active{background:var(--system);border-color:var(--system)}

/* INFO CARD */
.info-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.copy-row{display:flex;align-items:center;gap:.75rem;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem 1rem;margin:.75rem 0;font-family:var(--font-mono);font-size:.85rem;word-break:break-all}
.copy-btn{flex-shrink:0;padding:.4rem .8rem;border:1px solid var(--system);border-radius:var(--radius);color:var(--system);font-size:.8rem;font-weight:600}
.copy-btn:hover{background:var(--system);color:#fff}

/* HOURS GRID */
.hours-grid{display:grid;grid-template-columns:1fr auto;gap:.6rem 2rem;font-size:.92rem}
.hours-grid .day{color:var(--text-muted)}
.hours-grid .time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}

/* MOCK FRAMES */
.mock-frame{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;overflow:hidden}
.mock-frame::before,.mock-frame::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--system);opacity:.6}
.mock-frame::before{top:8px;left:8px;border-right:none;border-bottom:none}
.mock-frame::after{bottom:8px;right:8px;border-left:none;border-top:none}
.mock-screen{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-family:var(--font-mono);cursor:zoom-in;position:relative}
.mock-chart-bars{display:flex;align-items:flex-end;gap:6px;height:160px;padding:1rem}
.mock-chart-bars span{width:10px;background:var(--bull);border-radius:2px 2px 0 0}
.mock-chart-bars span.d{background:var(--bear)}

/* BROWSER CHROME MOCK */
.browser-mock{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-panel)}
.browser-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;background:var(--bg-panel-2);border-bottom:1px solid var(--border)}
.browser-dots{display:flex;gap:6px}
.browser-dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
.browser-dots i:nth-child(1){background:var(--bear)}
.browser-dots i:nth-child(2){background:var(--cta)}
.browser-dots i:nth-child(3){background:var(--bull)}
.browser-url{flex:1;background:var(--bg-base);border-radius:999px;padding:.3rem .8rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}
.browser-body{padding:2rem;min-height:240px;display:flex;align-items:center;justify-content:center}

/* MOCK ZOOM OVERLAY */
#zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:200;display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
#zoom-overlay.is-open{display:flex}
#zoom-overlay .zoom-content{max-width:90vw;background:var(--bg-panel);border:1px solid var(--system);border-radius:var(--radius-lg);padding:2rem;color:#f4f6f9}
#zoom-overlay .zoom-content *{color:inherit}

/* SPLIT DIFF */
.split-diff{display:grid;gap:1.25rem}
@media(min-width:780px){.split-diff{grid-template-columns:1fr 1fr}}
.split-col{border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.split-col.mt4{background:var(--bg-panel)}
.split-col.mt5{background:var(--bg-panel-2);border-color:var(--system)}
.split-col h3{margin-bottom:1rem}
.split-col ul li{padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text-muted)}

/* BENEFIT ICON GRID */
.benefit-grid{display:grid;gap:1.25rem}
@media(min-width:780px){.benefit-grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;text-align:center}
.benefit-stat{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--bull);font-variant-numeric:tabular-nums;display:block;margin-bottom:.3rem}

/* TIER TABLE stripes handled by data-tbl */
.tier-row-detail{display:none}
.tier-row-detail.open{display:table-row}
.tier-row-detail td{background:var(--bg-panel-2);color:var(--text-muted);font-size:.88rem}

/* CHECKLIST custom marks */
.req-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--border);color:var(--text-muted)}
.req-list li::before{content:'\2713';flex-shrink:0;width:22px;height:22px;border-radius:var(--radius);background:rgba(0,197,130,.15);color:var(--bull);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}

/* CHECKLIST PROGRESS */
.checklist-progress{position:sticky;top:96px;height:6px;background:var(--bg-panel-2);border-radius:999px;overflow:hidden;margin-bottom:1.5rem}
.checklist-progress .bar{height:100%;width:0;background:var(--bull);transition:width .3s}
.checklist-strike .done{text-decoration:line-through;opacity:.55}

/* PROMO CODE DISPLAY */
.promo-code{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;letter-spacing:.15em;border:2px dashed var(--system);border-radius:var(--radius-lg);padding:1.2rem 1.5rem;text-align:center;background:var(--bg-panel);color:var(--text);margin:1rem 0}
.promo-copy-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}

/* SECURITY BADGE ROW */
.badge-row{display:flex;flex-wrap:wrap;gap:1rem}
.sec-badge{display:flex;align-items:center;gap:.6rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1.1rem;font-size:.88rem}
.sec-badge .ic{width:30px;height:30px;border-radius:50%;background:rgba(59,130,246,.15);color:var(--system);display:flex;align-items:center;justify-content:center}

/* METHOD CARDS */
.method-grid{display:grid;gap:1rem}
@media(min-width:640px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.method-grid{grid-template-columns:repeat(3,1fr)}}
.method-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem;cursor:pointer;transition:border-color .2s}
.method-card:hover{border-color:var(--system)}
.method-card.is-selected{border-color:var(--system);box-shadow:0 0 0 1px var(--system)}
.method-card.is-hidden{display:none}
.method-card .ic{width:42px;height:42px;border-radius:var(--radius);background:var(--bg-panel-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.75rem}
.method-card .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.85rem}
.amt-placeholder{font-family:var(--font-mono);color:var(--text-muted)}

/* DEMO METER BARS */
.meter{margin-bottom:1rem}
.meter .label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.3rem;color:var(--text-muted)}
.meter .track{height:8px;background:var(--bg-panel-2);border-radius:999px;overflow:hidden}
.meter .fill{height:100%;background:linear-gradient(90deg,var(--system),var(--bull));border-radius:999px}

/* CATEGORY PILLS */
.pill-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.cat-pill{padding:.5rem 1rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--text-muted);background:var(--bg-panel)}
.cat-pill.is-active{border-color:var(--system);background:rgba(59,130,246,.1);color:var(--text)}
.faq-search-input{width:100%;max-width:420px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem;color:var(--text);font-size:.95rem;margin-bottom:1.5rem}
.faq-search-input:focus{outline:none;border-color:var(--system)}
.faq-item.is-hidden{display:none}

/* COOKIE BADGES */
.cookie-badge{display:inline-block;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .6rem;border-radius:999px;font-weight:700}
.cookie-badge.essential{background:rgba(0,197,130,.15);color:var(--bull)}
.cookie-badge.analytics{background:rgba(59,130,246,.15);color:var(--system)}
.cookie-badge.marketing{background:rgba(255,74,90,.15);color:var(--bear)}
.cookie-badge.muted{background:var(--bg-panel-2);color:var(--text-muted)}

/* TOC SIDEBAR */
.toc-layout{display:grid;gap:2rem}
@media(min-width:780px){.toc-layout{grid-template-columns:240px 1fr}}
.toc-sidebar{align-self:start}
@media(min-width:780px){.toc-sidebar{position:sticky;top:110px}}
.toc-sidebar ul li a{display:block;padding:.4rem .6rem;color:var(--text-muted);font-size:.88rem;border-left:2px solid transparent;border-radius:0 var(--radius) var(--radius) 0}
.toc-sidebar ul li a:hover{color:var(--text);text-decoration:none}
.toc-sidebar ul li a.is-active{color:var(--text);border-left-color:var(--system);background:var(--bg-panel)}
.legal-body h3,.legal-body h2{scroll-margin-top:120px;margin-top:2rem}
.legal-body p,.legal-body li{color:var(--text-muted);font-size:.95rem}
.legal-body ul{list-style:disc;padding-left:1.4rem;margin-bottom:1rem}
.priv-divider{font-family:var(--font-mono);color:var(--text-muted);font-size:.8rem;letter-spacing:.2em;text-align:center;margin:2.5rem 0;border-top:1px dashed var(--border);padding-top:1rem}
.disclosure-box{background:var(--bg-panel-2);border:1px solid var(--border);border-left:3px solid var(--cta);border-radius:var(--radius);padding:1.5rem;margin-top:2rem;font-size:.9rem;color:var(--text-muted)}

/* PRINT */
.print-mode .site-header,.print-mode .site-footer,.print-mode .section-dots,.print-mode #back-to-top{display:none}

/* SELECTION GUIDE */
.guide-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.guide-card .rec{font-family:var(--font-mono);font-size:.8rem;color:var(--system);text-transform:uppercase;letter-spacing:.08em}

/* SUPPORT ROUTING */
.routing-grid{display:grid;gap:1rem}
@media(min-width:640px){.routing-grid{grid-template-columns:repeat(2,1fr)}}
.routing-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.3rem}
.routing-card h4{color:var(--system)}

.page-hero{padding:3rem 0 2rem}
.page-hero .eyebrow{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--system)}
.page-hero p{color:var(--text-muted);max-width:55ch}