/* ─── Decorative crosshair/corner elements: non-interactive, behind content ─── */
/* The shared webflow CSS sets z-index:10 on .corner-bracket with no           */
/* pointer-events:none, allowing them to block clicks on overlapping content.  */
/* Override here to ensure they are purely decorative.                         */
.corner-bracket,
.corner-bracket-tl,
.corner-bracket-tr,
.corner-bracket-bl,
.corner-bracket-br {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─── Nav corners: hide by default, reveal on hover ───────────────── */
/* Webflow IX2 sets initial opacity: 0 via inline styles on pages it   */
/* exports. Custom pages (rules.html) lack that initialization, so     */
/* corners stay visible. This CSS provides the fallback globally.      */
/* On Webflow-managed pages, IX2 inline styles take precedence and     */
/* the transition/hover behaviour is identical — no conflict.          */
.nav-item .nav-corner,
.nav-item-footer .nav-corner {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nav-item:hover .nav-corner,
.nav-item-footer:hover .nav-corner {
  opacity: 1;
}

/* ─── Prevent grid-tile.svg bleeding through semi-transparent boxes ─── */
/* Computed solid equivalents of rgba overlay on #09090b background      */
/* rgba(255,255,255,0.025) over #09090b ≈ #0f0f11                        */
/* rgba(255,255,255,0.030) over #09090b ≈ #101012                        */
.platform-module {
  background: #0f0f11 !important;
}
.two-ways-card {
  background: #101012 !important;
}

/* ─── Platform toggle: explicit styles to guarantee rendering ────────── */
/* Insurance against CDN-cached versions of vanta-ea934c.webflow.css     */
/* that may not yet have these rules.                                     */
.platform-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
}
.platform-toggle-btn {
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: transparent;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
}
.platform-toggle-btn.active {
  border-color: #fff !important;
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
  position: relative;
  z-index: 1;
}
.platform-toggle-btn:last-child.active {
  border-color: #00d4aa !important;
  color: #00d4aa !important;
  background: rgba(0,212,170,0.08) !important;
}
.hl-new-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0,212,170,0.15);
  color: #00d4aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 7px;
  vertical-align: middle;
  border: 1px solid rgba(0,212,170,0.3);
}
.platform-toggle-btn:last-child.active .hl-new-badge {
  display: none;
}

/* ─── Market sub-toggle: explicit styles to guarantee rendering ──────── */
.market-sub-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 12px;
  background: #1a1a2e;
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
}
.market-sub-btn {
  padding: 10px 28px;
  border: 1.5px solid transparent !important;
  border-radius: 6px;
  background: transparent;
  color: #71717a;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
}
.market-sub-btn:hover {
  color: #a1a1aa;
}
.market-sub-btn.active {
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ─── HL announcement banner logo: constrain to inline size ─────────── */
.hl-announce-logo {
  height: 16px !important;
  width: auto !important;
  max-height: 16px !important;
  flex-shrink: 0;
}