/* Trade Lounge — extracted from the Design Component.
   Part 0: self-hosted fonts (replaces the Google Fonts <link>s — README §5).
   Part 1: base resets + keyframes (verbatim from the design's <helmet>).
   Part 2: generated pseudo-state rules replacing style-hover/style-focus.
   The !important is required: the design carries all base styling inline,
   and an inline declaration outranks a stylesheet rule without it. */

/* ── Part 0: self-hosted variable fonts ──────────────────────────────────
   Both families are VARIABLE builds subset to latin + latin-ext, no italic.
   The declared font-weight range is the font's real `wght` axis, so every
   weight the design uses (Inter 400/500/600/700, JetBrains Mono 400/500/600)
   is interpolated by the font rather than synthesised by the browser.
   `font-variant-numeric: tabular-nums` is used inline on prices and step
   numbers: Inter carries the `tnum` feature, and JetBrains Mono is uniformly
   monospaced (every glyph advance is 600 units), so both are tabular.
   unicode-range values are Google's own, so the browser only downloads
   latin-ext when a page actually needs it. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { overflow-x: clip; }
  body { margin: 0; background: #07080B; color: #E9EBF1; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #B9AEFF; text-decoration: none; }
  a:hover { color: #FFFFFF; }
  ::selection { background: rgba(139,124,246,0.35); }
  :focus-visible { outline: 2px solid #8B7BF6; outline-offset: 2px; border-radius: 4px; }
  input, textarea, select, button { font: inherit; }
  input::placeholder, textarea::placeholder { color: #6B7180; }
  nav a[aria-current="page"] { color: #FFFFFF !important; }
  header nav a[aria-current="page"] { position: relative; }
  header nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: #8B7BF6; }
  nav[aria-label="Mobile"] a[aria-current="page"] { box-shadow: inset 3px 0 0 #8B7BF6; padding-left: 14px; }
  @keyframes sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

/* ── generated from style-hover / style-focus attributes ── */
.hv-1:hover { color:#FFFFFF !important; }
.hv-2:hover { background:#A99BFF !important; color:#07080B !important; }
.hv-3:hover { background:#A99BFF !important; }
.hv-4:hover { border-color:rgba(255,255,255,0.28) !important; background:rgba(255,255,255,0.03) !important; }
.fc-5:focus-visible { left:16px !important; }
.fc-6:focus-visible { border-color:#8B7BF6 !important; }

/* ── responsive images ───────────────────────────────────────────────────────
   Each optimised <img> is wrapped in <picture style="display:contents"> so the
   <img> keeps the exact box it had before the wrapper existed — the wrapper
   itself generates no box, so flex/grid parents lay the image out unchanged.
   The <source> children must then be explicitly removed from layout: with the
   picture at display:contents they are promoted into the parent flex container
   and, having no box of their own, still each consume one `gap`. The header
   logo sits in a `display:flex; gap:10px` anchor, so without this rule the two
   sources pushed the mark, the wordmark and the whole primary nav 20px right.
   Verified by diffing the rendered box tree against the original export. ── */
picture > source { display: none !important; }

/* ── runtime state: header scroll compaction (was headerVals() in the DC) ── */
[hidden] { display: none !important; }
header[data-scrolled] { padding-top: 8px !important; padding-bottom: 8px !important; }
header[data-scrolled] > div { height: 64px !important; box-shadow: 0 12px 34px rgba(0,0,0,0.5) !important; }
header[data-scrolled] a[aria-label="Trade Lounge home"] img { width: 37px !important; height: 40px !important; }

/* ── breakpoints: these replace the vw-driven values baked inline above.
      The HTML ships the desktop branch, so only the narrow overrides are needed. ── */
@media (max-width: 899px) {                       /* was: vw < 900 */
  header nav[aria-label="Primary"] { display: none !important; }
  [data-nav-cta] { display: none !important; }
  [data-nav-burger] { display: inline-flex !important; }
}
@media (max-width: 1023px) {                      /* was: vw < 1024 */
  [data-legal-grid] { grid-template-columns: 1fr !important; }
  nav[aria-label="On this page"] { position: static !important; }
}