/* Preview-only: TM lockup, hero tag pills, and nav color variants. */

.header-brand .brand-lockup{
  display:block;
  height:42px;
  width:auto;
  flex:none;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:800px){
  .header-brand .brand-lockup{height:38px}
}

.hero .hero-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:2px 0 0;
  padding:0;
  max-width:640px;
  list-style:none;
}
.hero .hero-tags li{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:4px 10px;
  border:1px solid rgba(196,210,224,.22);
  border-radius:6px;
  background:rgba(255,255,255,.05);
  color:#d5dce3;
  font:600 13px/1.3 'Space Grotesk',sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
}
@media(max-width:800px){
  .hero .hero-tags{gap:5px;max-width:100%}
  .hero .hero-tags li{padding:4px 9px;font-size:12px}
}

/* Shared product accents: ice (existing site accent), warm coral, soft gold. */
:root{
  --nav-perp:#9ec8ff;
  --nav-lending:#ff8d7a;
  --nav-token:#f0c47a;
}

/* A — colored titles, same layout as live */
html[data-nav="a"] .nav-market:nth-child(1) strong{color:var(--nav-perp)}
html[data-nav="a"] .nav-market:nth-child(2) strong{color:var(--nav-lending)}
html[data-nav="a"] .nav-market:nth-child(3) strong{color:var(--nav-token)}
html[data-nav="a"] .nav-market:nth-child(1):hover strong{color:#c5ddff}
html[data-nav="a"] .nav-market:nth-child(2):hover strong{color:#ffb2a6}
html[data-nav="a"] .nav-market:nth-child(3):hover strong{color:#ffe0a8}

/* B — small tinted pills with colored borders */
html[data-nav="b"] .nav-market{
  padding:7px 12px 8px;
  border-radius:8px;
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease;
}
html[data-nav="b"] .nav-market:nth-child(1){
  border-color:rgba(158,200,255,.38);
  background:rgba(158,200,255,.08);
}
html[data-nav="b"] .nav-market:nth-child(1) strong{color:var(--nav-perp)}
html[data-nav="b"] .nav-market:nth-child(2){
  border-color:rgba(255,141,122,.4);
  background:rgba(255,141,122,.08);
}
html[data-nav="b"] .nav-market:nth-child(2) strong{color:var(--nav-lending)}
html[data-nav="b"] .nav-market:nth-child(3){
  border-color:rgba(240,196,122,.4);
  background:rgba(240,196,122,.08);
}
html[data-nav="b"] .nav-market:nth-child(3) strong{color:var(--nav-token)}
html[data-nav="b"] .nav-market:hover{background:rgba(255,255,255,.08)}
@media(max-width:800px){
  html[data-nav="b"] .market-nav a.nav-market{
    margin:4px 3px 8px;
    min-height:58px;
    border-left-color:transparent !important;
  }
  html[data-nav="b"] .market-nav a.nav-market:nth-child(1){border-color:rgba(158,200,255,.38)}
  html[data-nav="b"] .market-nav a.nav-market:nth-child(2){border-color:rgba(255,141,122,.4)}
  html[data-nav="b"] .market-nav a.nav-market:nth-child(3){border-color:rgba(240,196,122,.4)}
}

/* C — brand-red underline, unified rather than per-item */
html[data-nav="c"] .nav-market strong{
  position:relative;
  display:inline-block;
  color:#f7f8fa;
  padding-bottom:5px;
}
html[data-nav="c"] .nav-market strong:after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-top:5px;
  border-radius:1px;
  background:#ff174d;
}
html[data-nav="c"] .nav-market:hover strong{color:#fff}
@media(max-width:800px){
  html[data-nav="c"] .nav-market strong:after{margin-left:auto;margin-right:auto}
}