/* ============================================================
   MarketMoves — NWG affiliate design system
   ------------------------------------------------------------
   Reskinned from a black/amber terminal to the NWG blue, grey
   and white system, light by default with a dark mode on
   [data-theme="dark"].

   Every token below keeps the name it had under the terminal
   skin. That is deliberate: roughly 1,600 lines of component
   CSS and 92 generated pages already reference --surface,
   --line, --amber and the rest, so remapping the values
   reskins the whole site without touching a single component
   rule or template. Where an old name is now a poor
   description of its value, the comment says what it actually
   carries.

   Two type families. General Sans is the display and UI voice
   (headings, nav, buttons); Inter carries body prose. JetBrains
   Mono is kept for every figure, axis label and control,
   because tabular numerals matter more here than they do on a
   normal affiliate page, and it is the one thing worth keeping
   from the terminal skin.

   Blue is structural: chrome, links, emphasis, the primary
   series on a chart. Green and red are reserved strictly for
   direction of travel on a number and never appear on
   furniture, so a red border can never be mistaken for a price
   that fell.
   ============================================================ */
:root{
  color-scheme:light;

  /* ---- NWG surfaces (light) ---- */
  --bg:#F9FAFC;
  --surface:#FFFFFF;
  --surface-2:#F0F2F5;
  --surface-3:#E8EBF0;
  --line:#E2E5EB;
  --line-soft:#ECEEF2;

  /* ---- Text ---- */
  --text:#111827;
  --text-2:#4B5563;
  --text-3:#6B7280;
  --text-inverse:#FFFFFF;

  /* ---- Primary. --violet and --amber are both the NWG blue now. Several rules
     still ask for one or the other and they are meant to agree; keeping them
     equal preserves that, exactly as the terminal skin kept them both amber. ---- */
  --violet:#1D4ED8;
  --violet-hi:#1e40af;
  --amber:#1D4ED8;
  --amber-dim:#93A9E8;
  --primary-light:#EEF2FF;
  --primary-glow:rgba(29,78,216,.25);
  --on-primary:#FFFFFF;

  /* ---- Commercial accent. Was gold. Now a deeper blue so the CTA reads as the
     most saturated thing on a white page without introducing a third hue. ---- */
  --gold:#1641B4;
  --gold-dim:#12358F;

  /* ---- Direction of travel only ---- */
  --up:#15803d;
  --down:#b91c1c;
  --pill:#7C3AED;
  --warning:#f59e0b;

  /* ---- Chart tokens. charts.py emits var(--c-*) into inline SVG, so a chart
     follows the theme with no JavaScript and no second render. ---- */
  --c-accent:#1D4ED8;
  --c-series-2:#7C3AED;
  --c-up:#15803d;
  --c-down:#dc2626;
  --c-grid:#E2E5EB;
  --c-plot:#FFFFFF;
  --c-inactive:#C9CCDD;
  --c-label:#4B5563;
  --c-label-dim:#6B7280;
  --c-on-fill:#FFFFFF;
  /* Leverage ramp, cool to hot, blue through rose. Every stop clears 4.6:1 on
     white. The old warm ramp had stops at 1.6:1 that vanished on a light page. */
  --c-ramp-1:#2563EB; --c-ramp-2:#4F46E5; --c-ramp-3:#7C3AED; --c-ramp-4:#9333EA;
  --c-ramp-5:#C026D3; --c-ramp-6:#DB2777; --c-ramp-7:#E11D48;

  /* ---- Shape. Terminals do not round; affiliate cards do. ---- */
  --radius:8px;
  /* One content measure for the whole document. .pagehead and .wrap already used
     1180px; the nav, the Moon topbar, the catalyst note and the app shell had no
     cap at all, so the simulator ran edge to edge while the H1 above it sat at
     1180. Bands stay full-bleed, their contents line up. */
  --measure:1180px;
  --radius-sm:6px;
  --radius-lg:12px;
  --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);

  /* ---- Type ---- */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* --sans was the serif editorial voice under the terminal skin. It is now the
     NWG body face, so prose across all 92 pages changes with this one line. */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'General Sans','Inter',system-ui,sans-serif;
  --ui:'General Sans','Inter',system-ui,sans-serif;
  --transition:200ms cubic-bezier(.16,1,.3,1);

  /* ---- Alpha tokens. The terminal skin wrote alpha inline, and almost every
     value assumed a black ground: white-alpha hairlines, dark-alpha panel
     scrims, amber-alpha wash. All three invert. Tokenising them is what makes a
     single stylesheet serve both themes. --tint-* is the primary wash, --hair-*
     is a border or divider over an unknown ground, --scrim-* is a panel or
     sticky bar that sits over content. ---- */
  --tint-1:rgba(29,78,216,.05);
  --tint-2:rgba(29,78,216,.10);
  --tint-3:rgba(29,78,216,.18);
  --tint-4:rgba(29,78,216,.32);
  --tint-5:rgba(29,78,216,.45);
  --hair-1:rgba(17,24,39,.09);
  --hair-2:rgba(17,24,39,.14);
  --hair-3:rgba(17,24,39,.22);
  --hair-4:rgba(17,24,39,.34);
  --hair-5:rgba(17,24,39,.52);
  --scrim:rgba(255,255,255,.93);
  --scrim-2:rgba(240,242,245,.88);
  --scrim-3:rgba(232,235,240,.72);
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1117;
  --surface:#161b22;
  --surface-2:#1c2333;
  --surface-3:#232b3d;
  --line:#30363d;
  --line-soft:#21262d;

  --text:#e6edf3;
  --text-2:#8b949e;
  --text-3:#8b939f;
  --text-inverse:#111111;

  --violet:#58a6ff;
  --violet-hi:#79b8ff;
  --amber:#58a6ff;
  --amber-dim:#2c4a6e;
  --primary-light:var(--tint-2);
  --primary-glow:var(--primary-glow); --on-primary:#0b1220;

  --gold:#58a6ff;
  --gold-dim:#2c4a6e;

  --up:#4ade80;
  --down:#f87171;
  --pill:#a78bfa;
  --warning:#fbbf24;

  /* Chart tokens brighten in dark mode. The plot ground goes to the card colour
     rather than to pure black, so a chart still reads as a panel on the page. */
  --c-accent:#58a6ff;
  --c-series-2:#a78bfa;
  --c-up:#4ade80;
  --c-down:#f87171;
  --c-grid:#30363d;
  --c-plot:#161b22;
  --c-inactive:#3a4252;
  --c-label:#8b949e;
  --c-label-dim:#6e7681;
  --c-on-fill:#0d1117;
  --c-ramp-1:#60A5FA; --c-ramp-2:#818CF8; --c-ramp-3:#A78BFA; --c-ramp-4:#C084FC;
  --c-ramp-5:#E879F9; --c-ramp-6:#F472B6; --c-ramp-7:#FB7185;

  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);

  --tint-1:rgba(88,166,255,.06);
  --tint-2:var(--tint-2);
  --tint-3:rgba(88,166,255,.20);
  --tint-4:rgba(88,166,255,.34);
  --tint-5:rgba(88,166,255,.48);
  --hair-1:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.16);
  --hair-3:rgba(255,255,255,.24);
  --hair-4:rgba(255,255,255,.36);
  --hair-5:rgba(255,255,255,.54);
  --scrim:rgba(13,17,23,.94);
  --scrim-2:rgba(28,35,51,.88);
  --scrim-3:rgba(35,43,61,.74);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}

/* A visitor who has never touched the toggle gets their OS preference. The
   attribute selector above wins over this, so an explicit choice always holds. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0d1117; --surface:#161b22; --surface-2:#1c2333; --surface-3:#232b3d;
    --line:#30363d; --line-soft:#21262d;
    --text:#e6edf3; --text-2:#8b949e; --text-3:#8b939f; --text-inverse:#111111;
    --violet:#58a6ff; --violet-hi:#79b8ff; --amber:#58a6ff; --amber-dim:#2c4a6e;
    --primary-light:var(--tint-2); --primary-glow:var(--primary-glow); --on-primary:#0b1220;
    --gold:#58a6ff; --gold-dim:#2c4a6e;
    --up:#4ade80; --down:#f87171; --pill:#a78bfa; --warning:#fbbf24;
    --c-accent:#58a6ff; --c-series-2:#a78bfa; --c-up:#4ade80; --c-down:#f87171;
    --c-grid:#30363d; --c-plot:#161b22; --c-inactive:#3a4252;
    --c-label:#8b949e; --c-label-dim:#6e7681;
    --c-on-fill:#0d1117;
    --c-ramp-1:#60A5FA; --c-ramp-2:#818CF8; --c-ramp-3:#A78BFA; --c-ramp-4:#C084FC;
    --c-ramp-5:#E879F9; --c-ramp-6:#F472B6; --c-ramp-7:#FB7185;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.4);
    --shadow-lg:0 12px 40px rgba(0,0,0,.5);
    --tint-1:rgba(88,166,255,.06);
    --tint-2:var(--tint-2);
    --tint-3:rgba(88,166,255,.20);
    --tint-4:rgba(88,166,255,.34);
    --tint-5:rgba(88,166,255,.48);
    --hair-1:rgba(255,255,255,.10);
    --hair-2:rgba(255,255,255,.16);
    --hair-3:rgba(255,255,255,.24);
    --hair-4:rgba(255,255,255,.36);
    --hair-5:rgba(255,255,255,.54);
    --scrim:rgba(13,17,23,.94);
    --scrim-2:rgba(28,35,51,.88);
    --scrim-3:rgba(35,43,61,.74);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- top bar */
.topbar{
  height:56px;display:flex;align-items:center;gap:16px;padding:0 20px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:60;
  background:var(--bg);
}
.wordmark{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.14em;font-size:15px}
.topbar-mid{margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:10px}
.balance{
  display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;
}
.btn-wallet{
  background:var(--violet);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;
  transition:background .15s ease;
}
.btn-wallet:hover{background:var(--violet-hi)}
.topbar-right{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:7px;
  color:var(--text-2);transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.demo-chip{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--tint-4);background:var(--tint-2);
  padding:4px 9px;border-radius:5px;
}

/* ---------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:calc(100vh - 56px)}
.rail{border-left:1px solid var(--line-soft);display:flex;flex-direction:column;background:var(--bg)}
.main{padding:26px 24px 60px;min-width:0}

/* ---------------------------------------------------------- instrument head */
.inst{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.badge{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;color:#fff;flex:none;
}
.inst-name{font-size:15px;font-weight:600}
.inst-ticker{color:var(--text-2);font-size:14px;font-weight:500}
.star{color:var(--text-3);font-size:15px}

.price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#bigPrice{font-size:32px;font-weight:650;letter-spacing:-.02em;font-family:var(--mono)}
.chg{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600}
.chg.up{color:var(--up)} .chg.down{color:var(--down)}
.meta-row{
  display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:12.5px;
  margin-top:7px;flex-wrap:wrap;
}
.dot-sep{color:var(--text-3)}
.sent{
  display:inline-flex;align-items:center;gap:4px;background:rgba(40,199,111,.13);
  color:var(--up);font-size:11px;font-weight:700;padding:2.5px 7px;border-radius:4px;
  letter-spacing:.04em;
}
.src-tag{
  font-size:11px;color:var(--text-3);border:1px solid var(--line);
  border-radius:4px;padding:2px 6px;font-family:var(--mono);
}

/* ---------------------------------------------------------- chart block */
.chart-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;margin-top:16px;align-items:start}
.chart-wrap>section{min-width:0}

.tfbar{display:flex;align-items:center;gap:2px;margin-bottom:10px}
.tf{
  padding:5px 11px;border-radius:7px;font-size:12.5px;color:var(--text-2);font-weight:500;
  transition:background .15s,color .15s;
}
.tf:hover{color:var(--text);background:var(--surface-2)}
.tf.on{background:var(--surface-3);color:var(--text)}
.tf:disabled{opacity:.32;cursor:not-allowed}
.tfbar-right{margin-left:auto;display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:8px;padding:3px}
.ct{width:28px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--text-3)}
.ct.on{background:var(--surface-3);color:var(--text)}

.chart-panel{position:relative;background:var(--bg);border-radius:var(--radius)}
#chart{height:400px;width:100%}
.chart-foot{
  display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11.5px;color:var(--text-3);
}
.legend{
  position:absolute;left:12px;top:10px;z-index:5;display:flex;gap:14px;
  font-family:var(--mono);font-size:11px;color:var(--text-2);pointer-events:none;
}
.legend b{color:var(--text);font-weight:600}

/* outcome slab */
.slab{
  margin-top:16px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:15px 17px;
}
.slab-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.slab-head h4{font-size:12.5px;font-weight:600;color:var(--text)}
.slab-head .num{font-size:13px;font-weight:650}
.slab-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line-soft);border-radius:8px;overflow:hidden;margin-top:14px;
}
.slab-cell{background:var(--surface-2);padding:9px 11px}
.slab-cell .k{font-size:11px;color:var(--text-3);margin-bottom:3px}
.slab-cell .v{font-family:var(--mono);font-size:14px;font-weight:600}
.slab-cell.liqd .v{color:var(--down)}
.slab-note{font-size:11.5px;color:var(--text-3);margin-top:11px;line-height:1.55}

/* open P/L strip */
.pl-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:14px;
}
.pl-card .lbl{color:var(--text-2);font-size:12px;margin-bottom:2px}
.pl-card .val{font-size:19px;font-weight:650;font-family:var(--mono)}
.btn-ghost{
  border:1px solid var(--line);border-radius:7px;padding:6px 13px;font-size:12.5px;
  color:var(--text-2);transition:border-color .15s,color .15s;
}
.btn-ghost:hover{border-color:var(--text-3);color:var(--text)}

/* ---------------------------------------------------------- ticket */
.ticket{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;
  padding:16px;position:sticky;top:76px;
}
.ticket-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ticket-head h3{font-size:13.5px;font-weight:600}
.stake-row{display:flex;align-items:baseline;gap:4px}
.cur{font-family:var(--mono);font-size:27px;font-weight:650;color:var(--text-2)}
.stake-row .lev-read{margin-left:auto}
.stake-input{
  font-family:var(--mono);font-size:27px;font-weight:650;background:none;border:none;
  color:var(--text);width:100%;outline:none;
}
.stake-input::-webkit-outer-spin-button,.stake-input::-webkit-inner-spin-button{-webkit-appearance:none}
.lev-read{font-family:var(--mono);font-size:22px;font-weight:650;white-space:nowrap}
.lev-read small{color:var(--text-2);font-size:14px;font-weight:500}
.quick{display:flex;gap:6px;margin:12px 0 10px}
.quick button{
  flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
  padding:6px 0;font-size:12px;color:var(--text-2);transition:.15s;
}
.quick button:hover{border-color:var(--text-3);color:var(--text)}
.bal-line{font-size:12px;color:var(--text-2);padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.bal-line b{color:var(--text)}

.field{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.field-lbl{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text-2);margin-bottom:11px}
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;border-radius:3px;background:var(--surface-3);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 3px var(--tint-4);cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--violet);cursor:pointer}
.range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);margin-top:7px;font-family:var(--mono)}
.lev-marks{display:flex;gap:5px;margin-top:9px}
.lev-marks button{
  flex:1;font-family:var(--mono);font-size:11px;color:var(--text-3);background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:4px 0;transition:.15s;
}
.lev-marks button:hover{color:var(--text);border-color:var(--text-3)}
.lev-marks button.on{background:var(--primary-light);border-color:var(--violet);color:var(--violet)}

.dir{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dir button{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;
  border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);transition:.15s;
}
.dir button.on{background:var(--surface-3);border-color:var(--line);color:var(--text)}
.dir button[data-dir=up].on{color:var(--up);border-color:rgba(40,199,111,.45);background:rgba(40,199,111,.1)}
.dir button[data-dir=down].on{color:var(--down);border-color:rgba(240,82,91,.45);background:rgba(240,82,91,.1)}

details.risk{border-bottom:1px solid var(--line-soft)}
details.risk summary{
  list-style:none;cursor:pointer;padding:14px 0;font-size:12.5px;color:var(--text-2);
  display:flex;align-items:center;justify-content:space-between;
}
details.risk summary::-webkit-details-marker{display:none}
details.risk[open] summary{color:var(--text)}
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-bottom:14px}
.risk-grid label{font-size:11px;color:var(--text-3);display:block;margin-bottom:4px}
.risk-grid input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;
}
.risk-grid input:focus{border-color:var(--violet)}

.summary{padding:14px 0;display:grid;gap:7px}
.srow{display:flex;justify-content:space-between;font-size:12.5px}
.srow span:first-child{color:var(--text-2)}
.srow span:last-child{font-family:var(--mono);font-weight:550}
.srow.big span:last-child{font-size:14px}
.pos{color:var(--up)} .neg{color:var(--down)}
.liq-warn{
  font-size:11.5px;color:var(--amber);background:var(--tint-1);
  border:1px solid var(--tint-3);border-radius:7px;padding:8px 10px;margin-bottom:10px;
}
.btn-primary{
  width:100%;background:var(--violet);border-radius:9px;padding:12px 0;font-size:14px;
  font-weight:650;transition:background .15s,transform .1s;
}
.btn-primary:hover{background:var(--violet-hi)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary.close{background:var(--down)}
.promo{
  margin-top:11px;text-align:center;font-size:11.5px;color:var(--text-2);
}
.promo code{
  font-family:var(--mono);color:var(--violet);background:var(--primary-light);
  border:1px solid var(--tint-4);border-radius:4px;padding:1px 6px;font-size:11px;
}
.btn-cta{
  display:block;width:100%;margin-top:9px;text-align:center;padding:11px 0;border-radius:9px;
  border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text);
  background:var(--surface-2);transition:.15s;
}
.btn-cta:hover{border-color:var(--violet);background:var(--tint-2)}

/* ---------------------------------------------------------- positions */
.positions{margin-top:26px}
.pos-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pos-head h2{font-size:17px;font-weight:600}
.tabs{display:flex;gap:4px;margin-left:4px}
.tab{padding:5px 12px;border-radius:7px;font-size:12.5px;color:var(--text-2)}
.tab.on{background:var(--surface-3);color:var(--text)}
.table-wrap{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow-x:auto;
}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:820px}
th{
  text-align:left;padding:11px 14px;color:var(--text-2);font-weight:500;font-size:12px;
  border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);white-space:nowrap}
tr:last-child td{border-bottom:none}
.empty{padding:38px 0;text-align:center;color:var(--text-3);font-size:13px}
.tag{font-family:var(--sans);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em}
.tag.up{background:rgba(40,199,111,.14);color:var(--up)}
.tag.down{background:rgba(240,82,91,.14);color:var(--down)}
.btn-x{border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:11.5px;color:var(--text-2);font-family:var(--sans)}
.btn-x:hover{border-color:var(--down);color:var(--down)}

/* ---------------------------------------------------------- right rail */
.rail-head{
  height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;
  border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:600;
}
.rail-body{flex:1;overflow-y:auto;padding:12px 15px;display:flex;flex-direction:column;gap:11px}
.tickrow{font-family:var(--mono);font-size:11.5px;display:flex;justify-content:space-between;gap:8px}
.tickrow .tm{color:var(--text-3)}
.rail-note{
  font-size:11px;color:var(--text-3);line-height:1.55;border-top:1px solid var(--line-soft);
  padding:12px 15px;
}
.rail-foot{
  border-top:1px solid var(--line-soft);padding:11px 15px;display:flex;align-items:center;
  justify-content:space-between;font-size:11.5px;color:var(--text-2);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block;margin-right:6px}
.live-dot.stale{background:var(--amber)}
.credits{font-family:var(--mono);font-size:11px;color:var(--text-3);padding:0 15px 12px}
.credits .bar{height:3px;background:var(--surface-3);border-radius:2px;margin-top:5px;overflow:hidden}
.credits .bar i{display:block;height:100%;background:var(--violet)}

/* watchlist */
.watch{display:grid;gap:1px;background:var(--line-soft);border-radius:8px;overflow:hidden}
.wrow{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  background:var(--surface);padding:8px 10px;font-size:12px;cursor:pointer;transition:background .12s;
}
.wrow:hover{background:var(--surface-2)}
.wrow.on{background:var(--surface-3)}
.wrow .sym{font-weight:600}
.wrow .px,.wrow .ch{font-family:var(--mono);font-size:11.5px}

/* compliance */
.compliance{
  margin-top:26px;border:1px solid var(--line-soft);border-radius:var(--radius);
  background:var(--surface);padding:16px 18px;font-size:12px;color:var(--text-2);line-height:1.6;
}
.compliance h4{font-size:12px;color:var(--text);margin-bottom:7px;font-weight:600}
.compliance p+h4{margin-top:13px}

@media (max-width:1180px){
  .chart-wrap{grid-template-columns:minmax(0,1fr)}
  .ticket{position:static}
}
/* mobile sticky action bar */
.mbar{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{border-left:none;border-top:1px solid var(--line-soft)}
  .main{padding:16px 14px 88px}
  #bigPrice{font-size:27px}
  #chart{height:290px}
  .topbar{padding:0 14px;gap:10px}
  .topbar-mid{margin:0 0 0 auto;gap:8px}
  .demo-chip{display:none}
  .balance{padding:6px 10px;font-size:12px}
  .btn-wallet{padding:7px 12px;font-size:12px}
  .topbar-right .icon-btn:not(#railToggle){display:none}
  .tfbar{overflow-x:auto;scrollbar-width:none}
  .tfbar::-webkit-scrollbar{display:none}
  .tfbar-right{flex:none}
  .inst{flex-wrap:wrap}
  .mbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;gap:10px;
    align-items:center;padding:10px 14px;background:var(--scrim);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);
  }
  .mbar .mpl{flex:1;min-width:0}
  .mbar .mpl .k{font-size:10.5px;color:var(--text-3)}
  .mbar .mpl .v{font-family:var(--mono);font-size:15px;font-weight:650}
  .mbar button{background:var(--violet);border-radius:8px;padding:11px 18px;font-size:13px;font-weight:650;flex:none}
  .mbar button.close{background:var(--down)}
}

/* ============================================================ site chrome */
.sitenav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:0 20px;height:48px;background:rgba(0,0,0,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brandlink{display:flex;align-items:center;gap:7px;color:var(--text-1);text-decoration:none;
  font-weight:700;font-size:13.5px;letter-spacing:.02em}
.brandlink svg{color:var(--violet)}
.navlinks{display:flex;gap:2px;margin-left:auto}
.navlinks a{color:var(--text-2);text-decoration:none;font-size:13px;font-weight:550;
  padding:6px 11px;border-radius:7px;white-space:nowrap}
.navlinks a:hover{color:var(--text-1);background:var(--surface-2)}
.navlinks a.on{color:var(--text-1);background:var(--surface-3)}
.navcta{background:var(--violet);color:var(--on-primary);text-decoration:none;font-size:12.5px;font-weight:650;
  padding:7px 13px;border-radius:8px;white-space:nowrap}
.navcta:hover{filter:brightness(1.1)}
@media(max-width:720px){.sitenav{gap:10px;padding:0 12px}.navlinks{gap:0;overflow-x:auto;
  scrollbar-width:none}.navlinks::-webkit-scrollbar{display:none}.navlinks a{padding:6px 8px;font-size:12.5px}
  .navcta{padding:6px 10px;font-size:12px}}

.sitefoot{border-top:1px solid var(--line);background:var(--surface);margin-top:48px;
  padding:34px 24px 40px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;
  max-width:1180px;margin:0 auto}
.footgrid h5{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  margin:0 0 10px}
.footgrid h5 a{color:var(--text-3);text-decoration:none}
.footgrid h5 a:hover{color:var(--text-1)}
.footgrid a{display:block;color:var(--text-2);text-decoration:none;font-size:13px;padding:3px 0}
.footgrid a:hover{color:var(--text-1)}
.footnote{max-width:1180px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line)}
.footnote p{color:var(--text-3);font-size:11.5px;line-height:1.65;margin:0 0 8px;max-width:78ch}

/* ============================================================ doc pages */
body.doc{background:var(--bg)}
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 20px}
.wrap.narrow{max-width:780px}
.wrap h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;
  font-weight:700}
.wrap h2{font-size:clamp(19px,2.4vw,23px);line-height:1.25;letter-spacing:-.012em;
  margin:38px 0 12px;font-weight:650}
.wrap h3{font-size:16.5px;margin:28px 0 10px;font-weight:650}
.lede{color:var(--text-2);font-size:15.5px;line-height:1.68;max-width:74ch;margin:0 0 18px}
.crumb{font-size:12px;color:var(--text-3);margin-bottom:14px;display:flex;gap:7px;flex-wrap:wrap}
.crumb a{color:var(--text-2);text-decoration:none}.crumb a:hover{color:var(--violet)}
.crumb b{color:var(--text-1);font-weight:600}
.hero{padding:26px 0 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.herobtns{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}
.btn-primary-lnk{background:var(--violet);color:var(--on-primary);text-decoration:none;font-weight:650;
  font-size:14px;padding:11px 20px;border-radius:9px;display:inline-block}
.btn-primary-lnk:hover{filter:brightness(1.1)}
.btn-ghost-lnk{background:var(--surface-2);border:1px solid var(--line);color:var(--text-1);
  text-decoration:none;font-weight:600;font-size:14px;padding:10px 19px;border-radius:9px;
  display:inline-block}
.btn-ghost-lnk:hover{background:var(--surface-3)}
.classnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.classnav a{font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;
  padding:6px 13px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.classnav a:hover{color:var(--text-1)}
.classnav a.on{background:var(--violet);border-color:var(--violet);color:var(--on-primary)}

/* -------------------------------------------------------- prose */
.article{max-width:76ch}
.article h2{font-size:clamp(19px,2.4vw,23px);margin:36px 0 12px;font-weight:650;
  letter-spacing:-.012em}
.article h3{font-size:16.5px;margin:26px 0 10px;font-weight:650}
.article p{color:var(--text-2);font-size:15px;line-height:1.72;margin:0 0 15px}
.article p a,.lede a{color:var(--violet);text-decoration:none;border-bottom:1px solid var(--tint-4)}
.article p a:hover{border-bottom-color:var(--violet)}
.article .formula{font-family:'JetBrains Mono',monospace;font-size:14.5px;color:var(--text-1);
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--violet);
  border-radius:8px;padding:14px 16px}
.artmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:11.5px;
  color:var(--text-3);padding:9px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.warnbox{background:var(--tint-1);border:1px solid var(--tint-3);
  border-radius:9px;padding:11px 13px;color:var(--amber)!important;font-size:13.5px!important}
.tblnote{color:var(--text-3)!important;font-size:12px!important;line-height:1.6!important;
  max-width:82ch}
.inlinecta{display:inline-flex;align-items:center;gap:9px;background:var(--violet);color:var(--on-primary);
  text-decoration:none;font-weight:650;font-size:14px;padding:11px 18px;border-radius:9px;
  margin-top:10px}
.inlinecta:hover{filter:brightness(1.1)}
.inlinecta .code{background:var(--hair-1);padding:2px 8px;border-radius:5px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px}

/* -------------------------------------------------------- metric grid */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  margin:18px 0 6px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--surface);padding:11px 14px}
.mrow span{color:var(--text-3);font-size:12px}
.mrow b{font-size:14px;font-weight:600;color:var(--text-1)}

/* -------------------------------------------------------- tables */
table.ladder,table.ranked{width:100%;border-collapse:collapse;font-size:13px}
table.ladder th,table.ranked th{text-align:right;color:var(--text-3);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--surface)}
table.ladder th:first-child,table.ranked th:first-child{text-align:left}
table.ladder td,table.ranked td{text-align:right;padding:10px 12px;
  border-bottom:1px solid var(--line);color:var(--text-1)}
table.ladder td:first-child,table.ranked td:first-child{text-align:left}
table.ranked tbody tr:hover,table.ladder tbody tr:hover{background:var(--surface-2)}
table.ranked td a{color:var(--text-1);text-decoration:none;font-weight:600}
table.ranked td a:hover{color:var(--violet)}
.tsym{color:var(--text-3);font-size:11.5px;margin-left:7px;font-family:'JetBrains Mono',monospace}

/* -------------------------------------------------------- faq */
details.faq{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  margin-bottom:8px;overflow:hidden}
details.faq summary{cursor:pointer;padding:12px 15px;font-size:14px;font-weight:600;
  color:var(--text-1);list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--text-3);font-weight:400;font-size:17px;
  line-height:1}
details.faq[open] summary::after{content:'\2212'}
details.faq p{margin:0;padding:0 15px 14px;color:var(--text-2);font-size:14px;line-height:1.7}

/* -------------------------------------------------------- cards */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:11px;
  margin:16px 0 8px}
.mcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px;text-decoration:none;transition:border-color .15s,transform .15s}
.mcard:hover{border-color:var(--violet);transform:translateY(-2px)}
.mcard.off{opacity:.5}
.mchead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mcbadge{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;
  font-size:11.5px;font-weight:700;flex:0 0 auto}
.mchead b{color:var(--text-1);font-size:13.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mcsym{margin-left:auto;color:var(--text-3);font-size:11px;font-family:'JetBrains Mono',monospace}
.mcpx{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px}
.mcpx span:first-child{font-size:17px;font-weight:600;color:var(--text-1)}
.mcpx span:last-child{font-size:12.5px;font-weight:600}
.mcstats{display:flex;gap:11px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line)}
.mcstats span{color:var(--text-3);font-size:11px}
.mcstats b{color:var(--text-2);font-size:11.5px;margin-left:2px}
.mcnote{color:var(--text-3);font-size:12px;margin:0;line-height:1.55}
.gatedlist{color:var(--text-3);font-size:13px;line-height:1.9;padding-left:18px;max-width:70ch}
.gatedlist b{color:var(--text-2)}

.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:11px;margin:14px 0}
.gcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px;text-decoration:none;transition:border-color .15s}
.gcard:hover{border-color:var(--violet)}
.gcard b{display:block;color:var(--text-1);font-size:14.5px;margin-bottom:6px;font-weight:650}
.gcard span{color:var(--text-3);font-size:12.5px;line-height:1.6}
.nextup{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:34px;padding-top:18px;
  border-top:1px solid var(--line)}
.nextup>span{color:var(--text-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.nextup a{color:var(--violet);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:6px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.nextup a:hover{background:var(--surface-3)}

/* -------------------------------------------------------- calculator */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px;
  margin:18px 0}
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.calcgrid label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--text-3);
  font-weight:600}
.calcgrid input,.calcgrid select{background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;color:var(--text-1);font-size:14px;padding:9px 10px;font-family:inherit;
  width:100%;box-sizing:border-box}
.calcgrid input:focus,.calcgrid select:focus{outline:none;border-color:var(--violet)}
.calcout{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-top:16px}
.calcverdict{color:var(--amber);font-size:13.5px;line-height:1.65;margin:14px 0 0;
  background:var(--tint-1);border:1px solid var(--tint-3);border-radius:9px;
  padding:11px 13px}

/* -------------------------------------------------------- promo box */
.promobox{display:grid;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:18px;margin:18px 0}
.promobox>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plabel{color:var(--text-3);font-size:12px}
.promobox b{color:var(--text-1);font-size:14px}
.code{font-family:'JetBrains Mono',monospace;background:var(--surface-3);border:1px dashed var(--violet);
  color:var(--text-1);padding:4px 11px;border-radius:6px;font-weight:600;letter-spacing:.06em}
.code.big{font-size:16px;padding:7px 15px}

/* -------------------------------------------------------- market page head */
.pagehead{padding-block:22px 4px}
.pagehead h1{font-size:clamp(21px,3vw,29px);line-height:1.18;letter-spacing:-.02em;margin:0 0 10px;
  font-weight:700}
.pagehead .lede{font-size:14.5px;max-width:82ch;margin:0}
#commentary{max-width:920px;margin:8px 0 0;padding-top:6px}
.wgrp{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);padding:10px 2px 4px}
a.wrow{text-decoration:none}
@media(max-width:720px){.wrap{padding:22px 14px 16px}.pagehead{padding-block:16px 2px}
  .sitefoot{padding:26px 14px 32px}.mgrid{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------ mobile chrome fixes */
@media(max-width:640px){
  .sitenav{height:46px;gap:8px;padding:0 10px;flex-wrap:nowrap}
  .brandlink span{display:none}
  .brandlink svg{width:20px;height:20px}
  .navlinks{margin-left:0;flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch}
  .navlinks a{padding:6px 9px;font-size:12.5px;flex:0 0 auto}
  .navcta{flex:0 0 auto;padding:6px 11px;font-size:12px}
  .legend{font-size:9.5px!important;max-width:58%;flex-wrap:wrap;row-gap:1px}
  .legend b{font-size:9.5px!important}
  .pagehead h1{font-size:22px}
  .pagehead .lede{font-size:14px}
  .calcout{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr;gap:18px}
  .article p,.lede{font-size:14.5px}
  .wrap h2,.article h2{font-size:19px}
}

/* ==================================================== leveraged replay panel
   Sits directly under the price chart. Deliberately reads as a second chart rather
   than a widget, because it carries the same weight as the price itself. */
.replay{margin:18px 0 0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.replay-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.replay-head h3{margin:0 0 4px;font-size:16px;font-weight:650;letter-spacing:-.01em}
.replay-sub{margin:0;font-size:13px;color:var(--muted);max-width:62ch;line-height:1.5}
.replay-side{display:flex;gap:0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.rside{padding:7px 15px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:.15s}
.rside:hover{color:var(--fg)}
.rside.on{background:var(--surface-3);color:var(--fg)}
.replay-panel{margin-top:14px;height:230px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
#rpChart{width:100%;height:100%}
.replay-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.rpk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--muted)}
.rpk i{width:9px;height:9px;border-radius:2px;flex:none}
.rpk b{font-weight:600}
.rpk.out{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.replay-verdict{margin:14px 0 0;font-size:14px;line-height:1.65;color:var(--fg);max-width:78ch}
.replay-table{margin-top:14px}
.replay-table tr.dead td{opacity:.55}
.replay-table .tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;
  background:rgba(40,199,111,.12);color:var(--up);white-space:nowrap}
.replay-table .tag.out{background:rgba(240,82,91,.14);color:var(--down)}
.replay-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted);max-width:88ch}
.tnote{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}

/* sortable headings */
table.ranked thead th{cursor:pointer;user-select:none;position:relative;white-space:nowrap}
table.ranked thead th:hover{color:var(--fg)}
table.ranked thead th:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
table.ranked thead th::after{content:'';opacity:0;margin-left:5px;font-size:9px}
table.ranked thead th[aria-sort="descending"]::after{content:'\25BC';opacity:.75}
table.ranked thead th[aria-sort="ascending"]::after{content:'\25B2';opacity:.75}

@media(max-width:640px){
  .replay{padding:14px 12px;border-radius:12px}
  .replay-panel{height:190px}
  .replay-head{flex-direction:column;gap:10px}
  .replay-side{align-self:stretch}
  .rside{flex:1;text-align:center}
  .replay-verdict{font-size:13.5px}
}

/* ---------------------------------------------------------- catalyst block
   "Why it moved". Restrained on purpose: this is editorial data, not a promo
   panel, so it borrows the surface treatment of the stat cards rather than any
   of the commercial colour. State colour is the only accent, and it is a
   1px left rule, not a fill. */
.catalyst{
  background:var(--surface);border:1px solid var(--line-soft);
  border-left:2px solid var(--line);
  border-radius:var(--radius);padding:15px 17px;margin:16px 0 4px;
}
.catalyst--reviewed{border-left-color:var(--up)}
.catalyst--filed{border-left-color:var(--amber)}
.catalyst--unclear{border-left-color:var(--text-3)}
.catalyst--quiet{border-left-color:var(--line);background:transparent;padding:11px 0 0;
  border:none;border-top:1px solid var(--line-soft);border-radius:0}
.cat-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.catalyst h2{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:0}
.catalyst--quiet h2{margin-bottom:6px}
.cat-state{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2.5px 7px;border-radius:4px;font-family:var(--sans);
}
.cat-state--reviewed{color:var(--up);background:rgba(40,199,111,.12)}
.cat-state--filed{color:var(--amber);background:var(--tint-2)}
.cat-state--unclear{color:var(--text-3);background:var(--surface-2)}
.cat-chip{
  font-size:11px;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:4px;padding:1.5px 7px;
}
.cat-pending{font-size:11px;color:var(--text-3);margin-left:auto;font-family:var(--mono)}
.cat-lede{font-size:14px;line-height:1.55;color:var(--text);max-width:74ch}
.catalyst--quiet .cat-lede{color:var(--text-2);font-size:13px}
.cat-sources{list-style:none;margin:12px 0 0;display:grid;gap:7px}
.cat-sources li{
  display:grid;grid-template-columns:auto auto auto 1fr auto;gap:9px;align-items:baseline;
  padding-top:7px;border-top:1px solid var(--line-soft);font-size:12.5px;
}
.cat-sources li[data-primary]{border-top-color:var(--line)}
.cat-src a{color:var(--violet-hi);font-weight:600}
.cat-src a:hover{text-decoration:underline}
.cat-time{font-family:var(--mono);font-size:11.5px;color:var(--text-3);white-space:nowrap}
.cat-quote{color:var(--text-2);quotes:'"' '"'}
.cat-meta{margin-top:11px;font-size:11.5px;color:var(--text-3)}

/* homepage: why markets are moving */
.movers-why{margin:26px 0}
.movers-why h2{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:11px}
.mv-list{list-style:none;display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.mv-row{
  display:grid;grid-template-columns:minmax(120px,1.1fr) 84px 1fr auto;gap:13px;
  align-items:center;padding:11px 14px;background:var(--surface);font-size:13px;
}
.mv-name{font-weight:600}
.mv-name:hover{color:var(--violet-hi)}
.mv-move{font-family:var(--mono);font-size:12.5px;text-align:right}
.mv-row--up .mv-move{color:var(--up)}
.mv-row--down .mv-move{color:var(--down)}
.mv-why{color:var(--text-2);font-size:12.5px}
@media (max-width:720px){
  .mv-row{grid-template-columns:1fr auto;grid-template-areas:'name move' 'why why' 'st st';
    gap:5px 13px}
  .mv-name{grid-area:name}.mv-move{grid-area:move}.mv-why{grid-area:why}
  .mv-row .cat-state{grid-area:st;justify-self:start;margin-top:2px}
  .cat-sources li{grid-template-columns:1fr auto;gap:4px 9px}
  .cat-sources .cat-quote{grid-column:1/-1}
  /* chips are labels, not fields: they size to their text, they do not stretch */
  .cat-sources .cat-chip,.cat-sources .cat-corrob{justify-self:start}
  .cat-pending{margin-left:0}
}

/* ---------------------------------------------------------- gated CTA
   What replaces an affiliate link when we have not verified the instrument is
   on Moon. Deliberately not styled like a button: it is not an invitation. */
.cta-gated{
  margin-top:12px;padding:10px 12px;font-size:12.5px;line-height:1.5;
  color:var(--text-2);background:var(--surface-2);
  border:1px dashed var(--line);border-radius:8px;
}
.cta-gated[data-state="absent"]{color:var(--text-3)}
.cta-stamp{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;
  color:var(--text-3)}
a.inlinecta + .cta-stamp{margin-top:8px}
.cat-corrob{font-size:10.5px;color:var(--text-3);border:1px solid var(--line-soft);
  border-radius:4px;padding:1px 6px;white-space:nowrap}
.cat-sources li[data-state="corroboration"]{opacity:.82}

/* ---------------------------------------------------------- trust strip
   Homepage module 9. Provider, freshness, and the three pages that say how the
   site works. Flat and unglamorous on purpose: it is a receipt, not a badge. */
.trust{
  margin:34px 0 8px;padding:15px 17px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px 20px;
}
.trust-item{display:flex;flex-direction:column;gap:3px;font-size:13px;min-width:0}
.trust-item>span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3)}
.trust-item>b{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.trust-item a{color:var(--violet-hi);font-weight:500}
.trust-item a:hover{text-decoration:underline}

/* about cluster: policy prose stays narrow and readable */
.wrap.narrow .article h2{margin:26px 0 9px;font-size:17px;font-weight:600}
.wrap.narrow .article p,.wrap.narrow .article li{font-size:14px;line-height:1.65;
  color:var(--text-2);max-width:74ch}
.wrap.narrow .article ul{margin:9px 0 9px 20px;display:grid;gap:6px}
.wrap.narrow .article b{color:var(--text)}
.wrap.narrow .disclaimer{margin-top:12px;padding:10px 12px;font-size:12.5px;
  color:var(--text-3);background:var(--surface-2);border-left:2px solid var(--line);
  border-radius:0 6px 6px 0}

/* Prose tables. Separate from .ranked because that one right-aligns mono numerals
   and the sort script binds to its headers, neither of which a policy table wants. */
table.prose{width:100%;min-width:0;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
table.prose th{white-space:normal;text-align:left;color:var(--text-3);font-weight:600;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;
  border-bottom:1px solid var(--line);vertical-align:bottom}
table.prose td{text-align:left;padding:11px 12px;vertical-align:top;line-height:1.55;font-family:var(--sans);white-space:normal;
  color:var(--text-2);border-bottom:1px solid var(--line-soft);
  overflow-wrap:break-word;hyphens:auto}
table.prose tr:last-child td{border-bottom:0}
table.prose td:first-child{color:var(--text);font-weight:500}
table.prose td a{color:var(--violet-hi);font-weight:500}
table.prose td a:hover{text-decoration:underline}
@media (max-width:560px){
  table.prose{table-layout:auto;font-size:13px}
  table.prose th,table.prose td{padding:9px 8px}
}

/* The mobile nav is a horizontal scroller by design, but a hard-clipped word at
   the edge reads as a layout break rather than as more content. Fade the edge so
   the overflow is legible as overflow. */
@media(max-width:640px){
  .navlinks{
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 18px),transparent 100%);
  }
}

/* ---------------------------------------------------------- 404
   The error page links out as a grid of chips rather than a bullet list: an error
   state should read as a set of exits, not as an apology with a list under it. */
.notfound-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;margin:22px 0 26px;
}
.notfound-links a{
  display:block;padding:13px 15px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);text-decoration:none;font-weight:500;font-size:.94rem;
  transition:border-color .15s,background .15s,transform .15s;
}
.notfound-links a:hover{
  border-color:var(--violet);background:var(--surface-3);transform:translateY(-1px);
}
.notfound-links a:focus-visible{outline:2px solid var(--violet-hi);outline-offset:2px}

/* ---------------- homepage modules 1, 2, 4, 5, 6, 8 ---------------- */

/* fine print used under a table or a panel */
.finep{color:var(--text-3);font-size:12px;line-height:1.62;max-width:82ch;margin:10px 0 26px}
.finep a{color:var(--text-2);border-bottom:1px solid var(--line)}
.finep a:hover{color:var(--violet-hi)}

/* module 1: session status */
.statusstrip{margin:0 0 26px}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden}
.ss-cell{background:var(--surface);padding:12px 14px;display:grid;
  grid-template-columns:auto 1fr;grid-template-areas:"dot name" "state state" "note note";
  gap:2px 8px;align-items:center;min-width:0}
.ss-dot{grid-area:dot;width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.ss-cell.open .ss-dot{background:var(--up);box-shadow:0 0 0 3px rgba(40,199,111,.16)}
.ss-cell>b{grid-area:name;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.ss-state{grid-area:state;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-3)}
.ss-cell.open .ss-state{color:var(--up)}
.ss-note{grid-area:note;font-size:11.5px;color:var(--text-3)}
.ss-stamp{margin:9px 0 0;font-size:11.5px;color:var(--text-3);max-width:82ch}
.ss-stamp b{color:var(--text-2)}

/* module 2 and 6: narrower tables than the default 820px floor */
table.movers,table.cal{min-width:640px}
table.movers td,table.cal td{white-space:nowrap}
table.movers td:first-child,table.cal td:nth-child(2){font-family:var(--sans);white-space:normal}
table.cal td:nth-child(3),table.cal td:nth-child(4){font-family:var(--sans);white-space:normal}
table.movers a,table.cal a{color:var(--text);font-weight:500}
table.movers a:hover,table.cal a:hover{color:var(--violet-hi)}
.tstamp{color:var(--text-3);font-size:11.5px}

/* module 5: trade the move */
.ttm{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:20px 22px;margin:30px 0}
.ttm h2{margin-top:0}
.ttmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin:0 0 16px}
.ttmgrid label{display:flex;flex-direction:column;gap:5px;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.ttmgrid select{background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:10px 11px;font-family:var(--mono);font-size:13px;
  text-transform:none;letter-spacing:0}
.ttmgrid select:focus{outline:2px solid var(--violet);outline-offset:1px}
.ttmout{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;
  overflow:hidden}
.ttmrow{background:var(--surface-2);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.ttmrow span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.ttmrow b{font-family:var(--mono);font-size:14px}
.ttmverdict{grid-column:1/-1;background:var(--surface-3);padding:12px 13px;font-size:13px;
  line-height:1.6}
.ttmverdict.neg{color:var(--down)} .ttmverdict.pos{color:var(--up)}

/* module 8: platform */
.platform{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:20px 22px;margin:30px 0}
.platform h2{margin-top:0}
.platform p{font-size:14px;line-height:1.7;color:var(--text-2);max-width:78ch;margin:0 0 13px}
.platform p:last-child{margin-bottom:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;
  overflow:hidden;margin:0 0 16px}
.pcell{background:var(--surface-2);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.pcell span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.pcell b{font-family:var(--mono);font-size:16px}

@media (max-width:560px){
  .ttm,.platform{padding:16px 15px}
  .ss-cell{padding:10px 12px}
}

/* ==========================================================================
   MOON SECTION
   A separate visual system for the four commercial pages. The measurement
   pages are a black terminal: dense, monospaced, violet on near-black. These
   pages are lunar: deep blue-black ground, gold as the second accent, larger
   display type, more air. The shift is deliberate. A reader who has walked
   from the data into the shop should be able to feel it without being told.
   Everything here is scoped under .moonskin so none of it can leak.
   ========================================================================== */
.moonskin{
  --lunar:#05060e;
  --lunar-2:#0b0d1a;
  --lunar-3:#121527;
  --lunar-line:#1e2237;
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--tint-3), transparent 62%),
    radial-gradient(760px 460px at 6% 4%, var(--tint-1), transparent 60%),
    var(--lunar);
}
/* A starfield built from gradients rather than an image, so it costs nothing
   to download and cannot go missing. Fixed so it does not scroll with content. */
.moonskin::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, var(--hair-5), transparent),
    radial-gradient(1.1px 1.1px at 62% 9%, var(--hair-4), transparent),
    radial-gradient(1.3px 1.3px at 84% 32%, var(--hair-5), transparent),
    radial-gradient(1px 1px at 31% 46%, var(--hair-3), transparent),
    radial-gradient(1.5px 1.5px at 73% 63%, var(--hair-4), transparent),
    radial-gradient(1px 1px at 21% 77%, var(--hair-2), transparent),
    radial-gradient(1.2px 1.2px at 47% 88%, var(--hair-3), transparent),
    radial-gradient(1px 1px at 92% 82%, var(--hair-2), transparent);
  opacity:.5;
}
.moonskin > *{position:relative;z-index:1}

.moonskin .moon-top{padding-top:8px}
.moonskin h1{
  font-size:clamp(2rem,5.2vw,3.35rem);line-height:1.04;letter-spacing:-.028em;
  font-weight:700;max-width:20ch;
}
.moonskin .lede{
  font-size:clamp(1.03rem,2vw,1.3rem);line-height:1.5;color:#c9ccdd;
  max-width:46ch;margin-top:14px;
}
.moonskin .moon-stamp{
  margin-top:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3);
}
.moonskin .moon-stamp a{color:var(--gold-dim)}

/* Full-bleed hero, faded top and bottom so it sits in the page rather than on it. */
.moonskin .moon-hero-img{margin:34px 0 6px;overflow:hidden}
.moonskin .moon-hero-img img{
  display:block;width:100%;height:clamp(180px,30vw,380px);object-fit:cover;
  object-position:center 42%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent);
}
.moonskin .moon-body{padding-top:6px}
.moonskin .moon-body > h2{
  font-size:clamp(1.32rem,2.7vw,1.85rem);line-height:1.15;letter-spacing:-.02em;
  margin:52px 0 14px;max-width:26ch;
}
.moonskin .moon-body > h2::before{
  content:"";display:block;width:26px;height:2px;margin-bottom:16px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.moonskin .moon-body p{max-width:66ch;line-height:1.62}
.moonskin .moon-body code{
  font-family:var(--mono);font-size:.88em;background:var(--lunar-3);
  border:1px solid var(--lunar-line);border-radius:4px;padding:1px 5px;color:#dfe2f2;
}
.moonskin .moon-lead p:first-child{font-size:1.06rem;color:#d5d8e8}
.moonskin .moon-inline-lnk{
  display:inline-block;margin-top:6px;font-weight:600;color:var(--gold);
  text-decoration:none;border-bottom:1px solid var(--tint-4);padding-bottom:1px;
}
.moonskin .moon-inline-lnk:hover{border-bottom-color:var(--gold)}

/* ---- the ladder table. Gold rules, and the flat fee column called out. ---- */
.moonskin .table-wrap{
  margin:22px 0 8px;border:1px solid var(--lunar-line);border-radius:12px;
  background:linear-gradient(180deg,var(--scrim-2),var(--scrim-2));
}
.moonskin table{min-width:640px}
.moonskin thead th{
  background:transparent;border-bottom:1px solid var(--lunar-line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;padding:13px 14px;text-align:left;white-space:nowrap;
}
.moonskin tbody td{
  border-bottom:1px solid var(--scrim-3);padding:11px 14px;font-size:.86rem;
}
.moonskin tbody tr:last-child td{border-bottom:0}
.moonskin tbody tr:hover td{background:var(--tint-1)}
.moonskin .moon-ladder td:nth-child(3){color:var(--gold);font-weight:600}
.moonskin .moon-ladder td:nth-child(5){color:var(--down)}
.moonskin .moon-ladder tbody tr:last-child td{font-weight:600}

/* ---- verdict panel on the review ---- */
.moonskin .moon-verdict{
  display:grid;grid-template-columns:1.25fr .95fr;gap:0;margin:30px 0 10px;
  border:1px solid var(--lunar-line);border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,var(--tint-2),var(--tint-1));
}
.moonskin .moon-verdict-main{padding:26px 26px 24px}
.moonskin .moon-verdict-lbl{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);margin-bottom:11px;
}
.moonskin .moon-verdict-main p{margin:0;font-size:1.02rem;line-height:1.58;max-width:none}
.moonskin .moon-verdict-grid{
  list-style:none;margin:0;padding:22px 24px;display:grid;gap:1px;
  background:var(--scrim-3);border-left:1px solid var(--lunar-line);
}
.moonskin .moon-verdict-grid li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--scrim-3);
}
.moonskin .moon-verdict-grid li:last-child{border-bottom:0}
.moonskin .moon-verdict-grid span{font-size:.79rem;color:var(--text-2)}
.moonskin .moon-verdict-grid b{
  font-family:var(--mono);font-size:.79rem;color:var(--text);text-align:right;
}

/* ---- promo code card ---- */
.moonskin .moon-code-card{
  margin:30px 0 12px;padding:28px;border:1px solid var(--lunar-line);border-radius:14px;
  background:
    radial-gradient(520px 240px at 88% -30%, var(--tint-2), transparent 66%),
    linear-gradient(180deg,var(--scrim),var(--scrim));
}
.moonskin .moon-code-lbl{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px;
}
.moonskin .moon-code-val{
  display:inline-block;font-family:var(--mono);font-weight:600;
  font-size:clamp(1.7rem,4.6vw,2.6rem);letter-spacing:.07em;color:var(--gold);
  border:1px dashed var(--tint-4);border-radius:9px;padding:8px 20px;
  background:var(--tint-1);
}
.moonskin .moon-code-side{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;
  margin:24px 0 4px;
}
.moonskin .moon-code-side div{
  border-top:1px solid var(--lunar-line);padding-top:11px;
}
.moonskin .moon-code-side span{
  display:block;font-size:.74rem;color:var(--text-3);margin-bottom:4px;
}
.moonskin .moon-code-side b{font-size:.87rem;color:#e8eaf6;font-weight:600}

/* ---- two-up band ---- */
.moonskin .moon-band{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:46px 0 8px;
}
.moonskin .moon-band > div{
  padding:22px;border:1px solid var(--lunar-line);border-radius:12px;
  background:linear-gradient(180deg,var(--scrim-3),var(--scrim-3));
}
.moonskin .moon-band h3{
  margin:0 0 8px;font-size:1.02rem;letter-spacing:-.01em;
}
.moonskin .moon-band p{margin:0 0 12px;font-size:.9rem;color:var(--text-2)}

/* ---- FAQ ---- */
.moonskin .moon-faq{margin-top:8px}
.moonskin .moon-faq h3{
  margin:26px 0 7px;font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em;
  padding-left:14px;border-left:2px solid var(--gold-dim);
}
.moonskin .moon-faq p{margin:0;color:var(--text-2);padding-left:16px}

/* ---- the call to action. One component, four placements. ---- */
.moon-cta{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-weight:650;font-size:.94rem;color:#fff;
  background:var(--gold);
  border-radius:10px;padding:13px 19px;
  box-shadow:0 1px 0 var(--hair-2) inset,0 10px 26px -12px var(--tint-5);
  transition:transform .16s ease,box-shadow .16s ease;
}
.moon-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 var(--hair-3) inset,0 15px 32px -12px var(--tint-5);
}
.moon-cta.big{font-size:1.02rem;padding:16px 24px}
.moon-cta-code{
  font-family:var(--mono);font-size:.78em;font-weight:600;letter-spacing:.07em;
  background:var(--primary-glow);border:1px solid var(--primary-glow);
  border-radius:5px;padding:3px 8px;
}
.moonskin .moon-final{
  margin:50px 0 10px;padding:30px 26px;text-align:center;
  border:1px solid var(--lunar-line);border-radius:14px;
  background:
    radial-gradient(560px 220px at 50% 118%, var(--tint-3), transparent 70%),
    linear-gradient(180deg,var(--scrim-3),var(--scrim-2));
}
.moonskin .moon-final p{
  margin:0 auto 20px;max-width:44ch;font-size:1.08rem;line-height:1.5;color:#e4e7f5;
}
.moonskin .disclaimer,.moonskin .finep{color:var(--text-3)}
.moonskin .finep a{color:var(--gold-dim)}

/* ---- nav CTA gets the gold treatment sitewide, so the commercial path is
        one recognisable colour from any page on the site. ---- */
.navcta{
  /* Money hook lives to the right of the label in a small sub-line. On the
     narrow nav the sub-line hides, the code badge shrinks and the button stays
     one tap target rather than turning into a stack. */
  display:inline-flex;align-items:center;gap:9px;
  background:var(--gold);
  color:var(--on-primary);font-weight:650;border:0;line-height:1.15;
  padding:8px 12px;
}
.navcta .navcta-lead{font-weight:700;letter-spacing:.005em}
.navcta .navcta-code{
  font-family:var(--mono);font-size:.72em;font-weight:600;letter-spacing:.05em;
  background:var(--primary-glow);border-radius:4px;padding:2px 5px;
}
.navcta .navcta-sub{
  font-size:.66em;font-weight:600;opacity:.92;letter-spacing:.01em;
  padding-left:8px;border-left:1px solid rgba(0,0,0,.18);
  white-space:nowrap;
}
[data-theme="dark"] .navcta .navcta-sub{border-left-color:rgba(255,255,255,.22)}
.navcta:hover{filter:brightness(1.07)}
@media (max-width:1100px){.navcta .navcta-sub{display:none}}
@media (max-width:900px){.navcta{gap:6px;padding:6px 10px}}

/* ---- the gated notice: it is not an error, so it should not read like one ---- */
.cta-gated{
  border-left:2px solid var(--line);padding:11px 0 11px 14px;
  font-size:.88rem;color:var(--text-2);
}
.cta-gated[data-state="unverified"]{border-left-color:var(--gold-dim)}
.cta-gated[data-state="absent"]{border-left-color:var(--line)}
.cta-gated a{color:var(--gold)}

@media (max-width:760px){
  .moonskin .moon-verdict{grid-template-columns:1fr}
  .moonskin .moon-verdict-grid{border-left:0;border-top:1px solid var(--lunar-line)}
  .moonskin .moon-band{grid-template-columns:1fr}
  .moonskin .moon-body > h2{margin-top:40px}
  .moonskin .moon-final{padding:24px 18px}
  .moon-cta,.moon-cta.big{width:100%;justify-content:center}
  .navcta .navcta-code{display:none}
  .navcta .navcta-sub{display:none}
}

/* ---- hero treatments. The wide banner was composed with empty headline space
        and earns a full-bleed crop. The other two were not: cropping them to a
        letterbox strip lands on empty black and reads as a mistake, so they get
        an inset frame that keeps the whole composition. ---- */
.moonskin .moon-hero-img.inset{
  margin:30px auto 4px;max-width:760px;padding:0 20px;
}
.moonskin .moon-hero-img.inset img{
  height:auto;max-height:340px;border:1px solid var(--lunar-line);border-radius:14px;
  object-fit:cover;object-position:center 40%;
  -webkit-mask-image:none;mask-image:none;
}
/* Scroll affordance. A table cut off mid-column with no hint looks broken; a
   fade at the edge tells the reader there is more and to push it. */
.moonskin .table-wrap{position:relative}
/* Only below the width where the 640px table is guaranteed to overflow. Applied
   unconditionally it dimmed the last real column on desktop, where the table
   fits and there is nothing to scroll to. */
@media(max-width:800px){
  .moonskin .table-wrap::after{
    content:"";position:absolute;top:1px;right:1px;bottom:1px;width:34px;
    pointer-events:none;border-radius:0 12px 12px 0;
    background:linear-gradient(90deg,transparent,var(--scrim));
  }
}
.navlinks{position:relative}
@media(max-width:720px){
  /* Same problem in the nav: six items and a CTA do not fit, the strip scrolls,
     and without a fade the last item just looks truncated. */
  .navlinks{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  }
}
/* Verdict values need room: 'every 8h, rate unpublished' was wrapping into a
   two-line column against a one-line label. */
.moonskin .moon-verdict-grid li{flex-wrap:wrap}
.moonskin .moon-verdict-grid span{flex:0 0 auto}
.moonskin .moon-verdict-grid b{flex:1 1 auto;min-width:0;line-height:1.35}

/* ---- onward routes. Three pages used to end in a full stop: the homepage panel,
        the markets hub and the calculator. A reader who has just watched a runway
        collapse is the best-qualified reader on the site and was being shown the
        footer. These modules are the exit. ---- */
.pexit{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:20px 0 14px;padding-top:18px;border-top:1px solid var(--line);
}
.pexit-lnks{display:flex;gap:16px;flex-wrap:wrap;font-size:.87rem}
.pexit-lnks a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line)}
.pexit-lnks a:hover{color:var(--text);border-bottom-color:var(--text-3)}
.calc-exit,.hub-exit{
  margin:44px 0 8px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(420px 180px at 90% -40%, var(--tint-2), transparent 68%),
    var(--surface);
}
.calc-exit h2,.hub-exit h2{margin:0 0 10px;font-size:1.12rem;letter-spacing:-.01em}
.calc-exit p,.hub-exit p{margin:0 0 10px;color:var(--text-2);font-size:.92rem;line-height:1.6}
.calc-exit p:last-child,.hub-exit p:last-child{margin-bottom:0;display:flex;gap:20px;flex-wrap:wrap}
.moon-inline-lnk{
  color:var(--gold);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--tint-4);padding-bottom:1px;
}
.moon-inline-lnk:hover{border-bottom-color:var(--gold)}
@media(max-width:600px){
  .pexit{flex-direction:column;align-items:stretch}
  .pexit .moon-cta{justify-content:center}
}

/* ============================================================
   TERMINAL LAYER
   ------------------------------------------------------------
   Everything below is the art direction proper, applied after
   the base rules so it wins without those rules being rewritten
   one selector at a time.

   The organising idea: a reader should be able to tell, from
   type alone, whether they are looking at an argument or at a
   measurement. Argument is serif. Measurement is mono. There is
   no third category and nothing is set in a neutral grotesque.
   ============================================================ */

/* ---------------------------------------------------------- 1. machine voice
   Every label, control, column head, tag, stamp and axis. Uppercase with wide
   tracking at small sizes, which is how a terminal signals that a string is a
   field name rather than a sentence. */
.wordmark,.navlinks,.navcta,.topbar,.topbar-mid,.topbar-right,
.btn-primary,.btn-primary-lnk,.btn-ghost,.btn-ghost-lnk,.btn-cta,.btn-wallet,.btn-x,
.tab,.tabs,.tf,.tfbar,.ct,.field-lbl,.plabel,.badge,.tag,.src-tag,.cat-chip,
.cat-state,.cat-time,.cat-meta,.mcbadge,.mcsym,.tsym,.tstamp,.ss-state,.ss-stamp,
.legend,.replay-legend,.chart-foot,.crumb,.artmeta,.trust-item,.statusstrip,
.mv-move,.chg,.dir,.cur,.inst-ticker,.demo-chip,.code,.rpk,.slab-head,.rail-head,
.replay-head,.pos-head,.ticket-head,.cat-head,.mchead,.classnav,.quick,
th,thead,caption,.num{
  font-family:var(--ui);
}
.field-lbl,.plabel,.badge,.tag,.src-tag,.cat-chip,.cat-state,.ss-state,.slab-head,
.rail-head,.replay-head,.pos-head,.ticket-head,.mv-move,.trust-item,.legend,
.chart-foot,.tsym,.mcsym,.inst-ticker,th{
  text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;font-weight:500;
}
.wordmark{letter-spacing:.16em;font-weight:700;font-size:14px;text-transform:uppercase}
.navlinks,.crumb,.artmeta{letter-spacing:.05em;font-size:11.5px;text-transform:uppercase}

/* ---------------------------------------------------------- 2. editorial voice
   Newspaper serif, tight leading, generous measure. Headlines are set large and
   dense rather than large and airy, because an airy headline reads as a landing
   page and a dense one reads as a front page. */
h1,h2,h3,h4,.lede,p,li,blockquote,.summary,.mcnote,.tblnote,.finep,.footnote{
  font-family:var(--sans);
}
h1{
  font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.022em;
  font-weight:600;max-width:19ch;
}
h2{
  font-size:clamp(24px,2.5vw,33px);line-height:1.1;letter-spacing:-.015em;
  font-weight:600;text-transform:none;margin-top:0;
}
h3{font-size:19px;line-height:1.2;letter-spacing:-.01em;font-weight:600}
.lede{font-size:18px;line-height:1.52;color:var(--text-2);max-width:68ch}
p{max-width:74ch}
.article p,.summary p{font-size:17px;line-height:1.6}
/* Serif italic for the aside voice rather than a lighter grey, which is what the
   grotesque version had to fall back on. */
.finep,.tblnote,.chart-foot,.footnote,.mcnote,.ss-note,.replay-note,.rail-note,
.slab-note,.tnote{
  font-style:italic;color:var(--text-3);font-size:13.5px;line-height:1.5;max-width:82ch;
}
.chart-foot,.legend{font-style:normal}

/* ---------------------------------------------------------- 3. section register
   A numbered rule above each section headline. This is the terminal's function
   menu borrowed as a hierarchy device: it gives every h2 a fixed anchor, makes
   the running order legible at a glance, and means the headline itself does not
   have to shout to establish rank. Counter is scoped to main so market pages,
   guides and the homepage all number independently. */
main{counter-reset:sect}
main > h2,main > section > h2,main > .article > h2{counter-increment:sect}
main > h2::before,main > section > h2::before,main > .article > h2::before{
  content:counter(sect,decimal-leading-zero);
  display:block;font-family:var(--ui);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;color:var(--amber);margin-bottom:10px;
  padding-top:14px;border-top:1px solid var(--line);
}
.hero h1::before,.hero h2::before{content:none}

/* ---------------------------------------------------------- 4. card geometry
   The terminal skin forced every corner square and every shadow off, with a
   blanket `*{border-radius:0!important}`. The NWG system is card-based, so both
   of those are gone and the radii already written throughout this file (5, 7, 8
   and 12px) come back into effect. Cards get a hairline plus the smallest of the
   three shadows: enough to lift a card off the grey page ground without the
   heavy float that reads as a template. */
.mcard,.gcard,.slab-cell,.pcell,.mo-tile,.hr-cell,.ss-cell,.chart-panel,.rail,
.ticket,.replay-panel,.calc,.promo,.promobox,.warnbox,.catalyst,.balance,.positions{
  border-radius:var(--radius);
}
.mcard,.gcard,.mo-tile,.hr-cell,.ss-cell,.slab-cell,.pcell{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.mcard:hover,.gcard:hover{
  border-color:var(--amber);background:var(--surface);
  box-shadow:var(--shadow-md);transform:translateY(-1px);
}
.mcard,.gcard{transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
@media (prefers-reduced-motion:reduce){
  .mcard:hover,.gcard:hover{transform:none}
}

/* ---------------------------------------------------------- 5. the amber key
   Primary actions are an amber key with black text, the way a terminal marks the
   one button that does something. Secondary actions are a hairline box. Neither
   is a pill and neither has a gradient. */
/* Primary is white on NWG blue, pill shaped. Black text belonged to the amber
   key and fails contrast against blue. Uppercase and the wide tracking are kept:
   they are what stops the button reading as a generic SaaS CTA. */
.btn-primary,.btn-primary-lnk,.btn-cta,.btn-wallet{
  background:var(--violet);color:var(--on-primary);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;
  padding:13px 22px;border:1px solid var(--violet);border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm);
  transition:background var(--transition),box-shadow var(--transition);
}
.btn-primary:hover,.btn-primary-lnk:hover,.btn-cta:hover,.btn-wallet:hover{
  background:var(--violet-hi);border-color:var(--violet-hi);color:var(--on-primary);
}
.btn-ghost,.btn-ghost-lnk{
  background:transparent;border:1px solid var(--line);color:var(--text);
  letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;font-weight:600;
  padding:13px 22px;transition:border-color .12s linear,color .12s linear;
}
.btn-ghost:hover,.btn-ghost-lnk:hover{border-color:var(--amber);color:var(--amber)}
/* Inline prose links: amber underline, no colour change, so a paragraph keeps its
   reading colour and the link is still unmistakable. */
.article a,.lede a,p a,li a{
  color:inherit;border-bottom:1px solid var(--amber-dim);
  transition:border-color .12s linear,color .12s linear;
}
.article a:hover,.lede a:hover,p a:hover,li a:hover{color:var(--amber);border-color:var(--amber)}

/* ---------------------------------------------------------- 6. data density
   Tables are the product. Tighter rows, mono figures, tabular alignment, an
   amber rule under the header, and a hairline between rows instead of a fill. */
table{border-collapse:collapse;font-family:var(--ui);font-size:12.5px}
th{
  color:var(--text-2);text-align:left;padding:9px 14px 8px;
  border-bottom:1px solid var(--amber-dim);white-space:nowrap;
}
td{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--surface)}
.num{font-variant-numeric:tabular-nums;letter-spacing:0}
.pos{color:var(--up)}
.neg{color:var(--down)}

/* ---------------------------------------------------------- 7. the reading rule
   A hairline down the left of the long-form blocks, which is a newspaper device
   and does the job the card fill used to do without boxing the text in. */
.article{border-left:1px solid var(--line);padding-left:22px}
.article > h2::before{border-top:none;padding-top:0}

/* ---------------------------------------------------------- 8. hero
   The headline and the single figure carry the page. The rung readout is set at
   display size in mono because it is a measurement, not a slogan. */
.hero{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.hr-cell{padding:14px 16px}
.hr-cell .num,.hr-cell b,.hr-cell strong{
  font-family:var(--ui);font-size:26px;font-weight:700;color:var(--amber);
  letter-spacing:-.02em;
}
.herobtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---------------------------------------------------------- 9. chrome furniture */
.topbar,.sitenav{border-bottom:1px solid var(--line)}
.statusstrip{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.sitefoot{border-top:1px solid var(--line)}
.chart-panel{background:var(--surface);border:1px solid var(--line);padding:16px}
.promo,.promobox{background:var(--surface-2);border:1px solid var(--amber-dim)}
::selection{background:var(--amber);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------------------------------------------------------- 10. small screens
   Density has to relax before it becomes unreadable, but the register does not
   change: serif stays serif and labels stay mono. */
@media(max-width:760px){
  body{font-size:15.5px}
  h1{font-size:clamp(30px,8.4vw,40px);max-width:100%}
  h2{font-size:23px}
  .lede{font-size:16.5px}
  .article{padding-left:14px}
  .herobtns{flex-direction:column;align-items:stretch}
  .btn-primary-lnk,.btn-ghost-lnk{text-align:center}
}

/* A field value is a measurement even when it sits in a note slot, so the italic aside
   treatment must not reach the strings that are also set in the machine voice. */
.ss-note,.tstamp,.cat-time,.legend,.chart-foot{font-style:normal}

/* ---------------------------------------------------------- 11. heading register
   Three older rules set section headings at label size, which was survivable in a
   grotesque and is not in a serif: at 19px Newsreader reads as body copy with extra
   weight rather than as a heading. Anything that introduces a section is now set in the
   editorial voice at display size, and only strings that name a field stay in the machine
   voice. .catalyst h2 is deliberately left as a label, because it names a card. */
.movers-why h2{
  font-family:var(--sans);font-size:clamp(24px,2.5vw,33px);line-height:1.1;
  letter-spacing:-.015em;font-weight:600;text-transform:none;color:var(--text);
}
.wrap h2,.article h2{
  font-size:clamp(23px,2.3vw,29px);line-height:1.14;letter-spacing:-.015em;font-weight:600;
}
.article h2{margin:44px 0 14px}
.article h3{margin:30px 0 10px;font-size:19px}
@media(max-width:760px){
  .wrap h2,.article h2,.movers-why h2{font-size:22px}
}

/* ---------------------------------------------------------- 12. small-screen navigation
   The link row used to scroll horizontally inside the same line as the wordmark and the
   commercial button, which left the last visible item cut in half with nothing to say it
   was cut. Mono uppercase labels are wider than the grotesque ones this was tuned for, so
   the row now drops to its own full-width line, keeps its scroll, and carries a fade on
   the trailing edge so the clipping reads as more content rather than as a rendering bug. */
@media(max-width:900px){
  .sitenav{
    height:auto;flex-wrap:wrap;padding:0;row-gap:0;column-gap:10px;align-items:stretch;
  }
  .brandlink{padding:11px 14px;order:1;margin-right:auto}
  .navcta{order:2;align-self:center;margin-right:14px}
  .navlinks{
    order:3;flex:1 0 100%;width:100%;margin:0;padding:0 14px;
    border-top:1px solid var(--line-soft);overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    position:relative;
  }
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{padding:9px 11px 9px 0;font-size:11px;letter-spacing:.08em;flex:0 0 auto}
  /* The fade is painted by the nav rather than the scroller, because a pseudo-element on a
     scrolling box travels with the content and would drift out of view. */
  .sitenav{position:sticky;top:0}
  .sitenav::after{
    content:"";position:absolute;right:0;bottom:0;width:44px;height:38px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--bg) 70%);
  }
}

/* The wordmark was hidden below 720px back when the links shared its line and there was no
   room. The links have their own line now, so the masthead can carry its own name: a lone
   glyph in the corner of a financial page is an app icon, not a publication. */
@media(max-width:900px){
  .brandlink span{
    display:inline;font-family:var(--ui);font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;font-size:12px;
  }
  .brandlink svg{width:18px;height:18px;color:var(--amber)}
}

/* ---------------------------------------------------------- 13. market page head
   The catalyst block is a sibling of .pagehead rather than a child, so it never inherited
   the page container and sat flush against the viewport edge. That was masked while the
   block carried a surface fill; the quiet variant is transparent, which left a line of
   prose starting at x=0 under a headline starting at 24px. It now shares the head's
   container exactly, so the left edge of the page is a single line all the way down. */
.catalyst{max-width:1180px;margin:16px auto 4px;padding-left:24px;padding-right:24px}
.catalyst--quiet{padding-top:11px;padding-bottom:0;border-left:none;border-right:none;
  border-top:none;border-bottom:none}
.catalyst h2{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--amber);margin-bottom:7px;
}
.cat-lede{font-family:var(--sans);font-size:16.5px;line-height:1.5;color:var(--text-2);max-width:74ch}

/* The market head was sized for a grotesque. In Newsreader the same clamp reads as a bold
   paragraph rather than a title, so the head takes the same display register as the rest of
   the site and the standfirst matches the .lede size used everywhere else. */
.pagehead h1{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.02em;font-weight:600}
.pagehead .lede{font-size:17px;line-height:1.5}
@media(max-width:760px){
  .catalyst{padding-left:14px;padding-right:14px}
  .pagehead h1{font-size:27px}
  .pagehead .lede,.cat-lede{font-size:16px}
}

/* ---------------------------------------------------------- 14. measure and chrome
   Headline measure. 19ch is right for the homepage hero, where the headline is the only
   thing on its line, and far too tight everywhere else: it broke a nine-word promo-page
   title across three lines inside a column twice that wide. */
h1{max-width:30ch}
.hero h1,.herog h1{max-width:20ch}
.wrap h1{font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.02em;font-weight:600}

/* The promo code chip was violet-tinted from the old palette and clashed with the amber it
   now sits beside. */
.promo code,.moon-cta-code,.code{
  font-family:var(--mono);color:var(--amber);background:var(--tint-2);
  border:1px solid var(--tint-4);padding:1px 6px;font-size:11px;letter-spacing:.06em;
}

/* ---------------------------------------------------------- 15. tables
   One rule set, because the previous three fought each other on specificity and the loser
   was the reader: cells overlapped and the verified column printed on top of the leverage
   column. The decision here is that a data table is a figure, not prose. It keeps every
   field on one line, sets its own comfortable minimum, and scrolls inside its frame when
   the column is narrower than that. The fade on the trailing edge is what tells the reader
   the frame scrolls, which is the thing a bare overflow container never says. */
.table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:760px;width:100%}
.table-wrap td,.table-wrap th{white-space:nowrap}
.table-wrap::after{
  content:"";position:sticky;right:0;top:0;float:right;
  width:22px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface));
}
.table-wrap::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--radius-full)}
.table-wrap::-webkit-scrollbar-track{background:transparent}

/* .badge is a 30px circle built for the trading app avatar slot. The promo table reuses the
   class for a verification status, so its text overflowed the circle and printed across the
   next cell. Inside a table it is a status label. Unverified stays neutral grey rather than
   red, because an absence of evidence is not a negative finding. */
table .badge{
  width:auto;height:auto;display:inline-block;border-radius:var(--radius-sm);place-items:initial;
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);
  padding:2px 6px;white-space:nowrap;
}

/* A table wider than the reading column escapes it up to the page measure, which is how a
   broadsheet sets a figure against a narrow text block. */
@media(min-width:1200px){
  .wrap.narrow > .table-wrap{
    width:1132px;margin-left:calc(50% - 566px);
  }
}

/* ============================================================================
   16. SMALL SCREENS: TABLES BECOME RECORDS, AND THE TYPE GAINS WEIGHT
   ----------------------------------------------------------------------------
   Two problems reported from a 401px viewport. First, every table was a
   horizontal scroller, so reading the ATR for Bitcoin meant scrubbing sideways
   until the market name had left the screen. A six column ranked table cannot
   be a table on a phone. Below 640px each row becomes a record: the first cell
   is the heading, every other cell is a label and value pair, and nothing
   scrolls sideways anywhere on the site.

   The label comes from data-l, stamped onto every td at write time by
   generate_site.label_cells() from that table's own th text, so a table added
   later inherits this without touching the stylesheet.

   Second, secondary greys are pushed toward the body colour on a phone, because
   a small screen at arm's length loses low-contrast text that reads fine on a
   desktop. Under the terminal skin that meant lightening the greys against
   black; under the light skin it means darkening them against white, so the two
   themes move in opposite directions and each needs its own override. Weight is
   nudged rather than size, because the pages are long and size costs scroll.
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --text-2: #374151;
    --text-3: #6B7280;
    --c-label: #374151;
    --c-label-dim: #6B7280;
  }
  [data-theme="dark"] {
    --text-2: #a4b0bd;
    --text-3: #7d8794;
    --c-label: #a4b0bd;
    --c-label-dim: #7d8794;
  }

  body { font-weight: 420; -webkit-text-size-adjust: 100%; }
  p, li { font-size: 16.5px; line-height: 1.62; }
  .lede, .cat-lede { font-size: 17px; font-weight: 460; }
  .tnote, .srcnote, .finep, .tblnote, figcaption { font-weight: 500; }

  /* the scroller and its edge fade are both wrong now, so switch them off */
  .table-wrap { overflow-x: visible; }
  .table-wrap::after { display: none; }

  table, thead, tbody, tr, th, td { display: block; }
  /* Four separate rule sets set a table min-width for the desktop scroller: the base table
     rule at 820px, table.movers/table.cal at 640, .moonskin table at 640, and
     .table-wrap table at 760. Every one of them has to be beaten here or the row stacks
     correctly and the table still forces the document 400px wider than the phone. */
  table,
  table.movers, table.cal,
  .moonskin table,
  .table-wrap table { min-width: 0 !important; width: 100% !important; }
  table { border-collapse: collapse; }
  thead { display: none; }

  tbody tr {
    border: 1px solid var(--line);
    border-top-width: 0;
    padding: 12px 14px 10px;
    background: var(--surface);
  }
  tbody tr:first-child { border-top-width: 1px; }

  /* first cell is the record heading: name, ticker, link */
  tbody td:first-child {
    white-space: normal !important;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    padding: 0 0 9px;
    margin: 0 0 9px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    white-space: normal;
  }
  tbody td:first-child a { text-decoration: none; }
  tbody td:first-child .tsym {
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .09em;
    color: var(--text-3);
    margin-left: 8px;
  }

  /* every other cell: label left, figure right, on one baseline */
  tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border: 0;
    text-align: right;
    /* nowrap here was wrong. It suits a figure, and most cells are figures, but a cell
       carrying a sentence ("the venue publishes nothing") then pushed the row past the
       viewport and put the horizontal scroll back on the two hub pages. Wrapping is the
       default; only td.num refuses to break, because a number split across two lines is
       harder to read than a number on a narrow line. */
    /* !important because .table-wrap td and table.movers td both set nowrap at higher
       specificity than a bare tbody td selector can reach. */
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-family: var(--ui);
    font-size: 14px;
  }
  tbody td > * { min-width: 0; }
  tbody td::before {
    content: attr(data-l);
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--ui);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
    white-space: normal;
  }
  tbody td:first-child::before { content: none; }
  tbody td.num { font-variant-numeric: tabular-nums; white-space: nowrap !important; }
  tbody td b { font-weight: 600; color: var(--amber); }

  /* a cell whose column head was blank has nothing to align against */
  tbody td[data-l=""] { justify-content: flex-end; }

  /* the class filter chips wrapped into a ragged third row */
  .chips, .classnav { gap: 6px; }
  .chips a, .classnav a { font-size: 11px; padding: 7px 11px; }
}

/* 375px and under: the label and figure stop fitting on one line together */
@media (max-width: 375px) {
  tbody td { font-size: 13.5px; gap: 10px; }
  tbody td::before { font-size: 10px; letter-spacing: .07em; }
  tbody td:first-child { font-size: 17px; }
}

/* ----------------------------------------------------------------------------
   16b. THE NAV WRAPS INSTEAD OF SCROLLING
   Six separate rule sets made .navlinks a horizontal scroller below 720px, so
   the last item, PROMO CODES, sat permanently half off the screen behind the
   edge fade. A nav item you cannot see is a nav item that does not exist. Six
   links at 11px wrap onto two rows inside 360px comfortably, so they wrap.
   Declared last and with !important because it is arguing with five earlier
   blocks at equal specificity.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .navlinks {
    overflow-x: visible !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 0 !important;
    column-gap: 2px !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }
  .navlinks::after { display: none !important; }
  .navlinks a {
    flex: 0 0 auto !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
    letter-spacing: .07em !important;
  }
  .sitenav { flex-wrap: wrap; row-gap: 4px; }
}

/* ----------------------------------------------------------------------------
   16c. THE SESSION NOTE IS A SENTENCE, SO IT IS SET LIKE ONE
   .statusstrip uppercases everything inside it, which is right for the four
   state labels and wrong for the caveat underneath them: a full sentence in
   uppercase mono is read as shouting and scanned rather than read, and this
   sentence is the one that tells you the reading can be wrong. Serif, sentence
   case, only the timestamp stays mono.
   -------------------------------------------------------------------------- */
.statusstrip .ss-stamp {
  text-transform: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.55;
}
.statusstrip .ss-stamp b { font-family: var(--ui); letter-spacing: .04em; }
@media (max-width: 640px) { .statusstrip .ss-stamp { font-size: 13.5px; font-weight: 500; } }

/* ==========================================================================
   17. NWG reskin: display type, theme toggle, and light-ground corrections
   --------------------------------------------------------------------------
   Everything above this line was written for the black terminal skin and is
   reached by the remapped tokens at the top of the file. This section handles
   the three things a token swap cannot: splitting the type stack now that
   there are two families rather than one serif, styling the toggle that did
   not exist before, and correcting the handful of rules whose contrast logic
   only held on a black ground.

   Appended rather than edited in place, which is how this stylesheet has been
   extended throughout. Later wins on equal specificity.
   ========================================================================== */

/* --- 17a. Two families, split by job -------------------------------------
   The terminal skin set argument in Newsreader and everything else in mono.
   The NWG system sets headings and UI in General Sans and prose in Inter, so
   the single font-family rule that covered both has to become two. Headings
   also lose a little of their size: a 68px display headline was calibrated
   for a serif on black, and the same measure in a geometric sans on white
   shouts. */
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.lede,p,li,blockquote,.summary,.mcnote,.tblnote,.finep,.footnote{
  font-family:var(--sans);letter-spacing:0;
}
h1{font-size:clamp(32px,4.4vw,54px);line-height:1.06;letter-spacing:-.028em}
h2{letter-spacing:-.022em}
.lede{font-weight:400}
/* --text-1 is referenced in 19 places and was never defined, so those rules
   have been silently inheriting. Aliasing it to the body colour is what they
   plainly meant. */
:root{--text-1:var(--text)}

/* --- 17b. Theme toggle ---------------------------------------------------
   A 30px square in the nav, sized to match the height of the links beside it
   rather than the CTA. Only one of the two icons is ever in the flow, so the
   button does not change width when the theme changes. */
.themetoggle{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.themetoggle:hover{color:var(--violet);border-color:var(--violet);background:var(--primary-light)}
.themetoggle:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.themetoggle .ti-moon{display:none}
[data-theme="dark"] .themetoggle .ti-sun{display:none}
[data-theme="dark"] .themetoggle .ti-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themetoggle .ti-sun{display:none}
  :root:not([data-theme="light"]) .themetoggle .ti-moon{display:block}
}
:root[data-theme="light"] .themetoggle .ti-sun{display:block}
:root[data-theme="light"] .themetoggle .ti-moon{display:none}

/* --- 17c. Light-ground corrections --------------------------------------
   Rules whose contrast assumed black behind them. */
.navlinks a:hover,.navlinks a.on{color:var(--text)}
.sitenav{background:var(--scrim);border-bottom:1px solid var(--line);backdrop-filter:saturate(160%) blur(8px)}
/* filter:brightness on a light-mode button lightens toward white and the label
   disappears. Darkening the fill is the correct direction on a light ground and
   is still correct on dark, where --violet-hi is the brighter blue. */
.navcta:hover,.btn-primary:hover,.btn-cta:hover{filter:none;background:var(--violet-hi);border-color:var(--violet-hi)}
/* Inline SVG figures sit directly on the page, so their own ground has to be
   the card colour or the axis labels print onto the page grey. */
.chart-panel,.chart-panel svg{background:var(--surface)}
svg text{fill:var(--c-label)}
/* Focus ring and selection follow the primary, not the retired amber. */
::selection{background:var(--primary-light);color:var(--text)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* Tables gain a light header band. On black the header was distinguished by the
   hairline alone, which is invisible against white. */
table.ranked thead th,table.prose thead th,table.movers thead th,table.cal thead th{
  background:var(--surface-2);color:var(--text-2);border-bottom:1px solid var(--line);
}
tbody tr:nth-child(even) td{background:var(--tint-1)}

/* --- 17d. Text on a filled primary ---------------------------------------
   The dark theme's primary is #58a6ff. White on it is roughly 2.3:1, so every
   filled button and the nav CTA were failing contrast in dark mode while
   passing in light. --on-primary flips with the theme and is applied here to
   the filled surfaces as a group, after all the earlier rules that set a
   literal white. In dark mode --gold and --violet are the same blue, so the
   commercial CTA is covered by the same rule. */
.navcta,.navcta:hover,.btn-primary,.btn-primary-lnk,.btn-cta,.btn-wallet,
.moon-cta,.moon-cta:hover,.inlinecta,.classnav a.on,.mcbadge,.badge{
  color:var(--on-primary);
}
.navcta span,.moon-cta span,.moon-cta-code{color:inherit}
[data-theme="dark"] .navcta,[data-theme="dark"] .moon-cta,
[data-theme="dark"] .btn-primary,[data-theme="dark"] .btn-cta{font-weight:700}

/* --- 17e. Remaining literal whites on the dark primary --------------------
   Two labels sat inside a filled CTA and set their own white rather than
   inheriting it, so 17d did not reach them. Named explicitly here. */
.moon-cta-code,.btn-wallet,.navcta .code,.cta-code{color:var(--on-primary)}
[data-theme="dark"] .moon-cta-code,[data-theme="dark"] .btn-wallet{color:var(--on-primary)}

/* --- 17f. Tape band -------------------------------------------------------
   The tape sits on --surface-2, a step darker than the page, so text that
   clears 4.5:1 on white does not clear it there. The band gets its own pair. */
.tape .tp-px{color:var(--text-2)}
.tape .tp-up{color:var(--tape-up)}
.tape .tp-dn{color:var(--tape-dn)}
:root{--tape-up:#116336;--tape-dn:#a01919}
[data-theme="dark"]{--tape-up:#4ade80;--tape-dn:#f87171}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tape-up:#4ade80;--tape-dn:#f87171}}

/* ------------------------------------------------------------ callouts
   A small family of coloured left-border blocks used to lift the reader out
   of prose when the page has actually arrived at a conclusion. Three
   variants, and only three: verdict (the answer), warning (the risk),
   action (the next click). Never used to decorate a section header; only
   used to isolate a sentence the reader must not skim over.
   .callout is the shell. .callout__eyebrow is the small label at the top,
   .callout__body carries the sentence, and .callout__actions holds up to
   one primary link if the block is an action. */
.callout{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--amber);border-radius:var(--radius,10px);
  padding:14px 18px 15px 18px;margin:18px 0;line-height:1.55;
  display:flex;flex-direction:column;gap:6px;
}
.callout__eyebrow{
  font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);
}
.callout__body{font-size:14.5px;color:var(--fg);margin:0}
.callout__body b, .callout__body strong{color:var(--fg);font-weight:650}
.callout__actions{margin-top:6px}
.callout__actions a{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--amber);color:#fff;text-decoration:none;
  font-weight:600;font-size:13px;padding:8px 14px;border-radius:8px;
  transition:opacity .15s;
}
.callout__actions a:hover{opacity:.9}
/* Variant: warning. Amber left border, a warning eyebrow. Never red, because
   a red block over a red-heavy chart page reads like a system alarm. */
.callout--warning{border-left-color:#e0932a}
.callout--warning .callout__eyebrow{color:#e0932a}
.callout--warning .callout__actions a{background:#e0932a}
/* Variant: verdict. Uses the default amber. Reserved for the sentence that
   sums the market up in fewer than 25 words. */
/* Variant: action. Slightly heavier weight to earn the click. */
.callout--action{background:var(--surface-2)}
[data-theme="dark"] .callout,
html[data-theme="dark"] .callout{background:var(--surface)}
[data-theme="dark"] .callout--action{background:var(--surface-3)}
@media (max-width:640px){
  .callout{padding:12px 14px 13px 14px;margin:14px 0}
  .callout__body{font-size:14px}
}

/* Container for the top-of-page verdict pair on every market page. Two
   callouts stacked on mobile, side-by-side from 900px up. The container
   sits between the pagehead and the catalyst strip, so the visual
   hierarchy on load is: crumb, H1, one-line lede, verdict, warning, then
   the simulator itself. */
.page-callouts{
  /* No max-width or horizontal padding here. Section 19 puts this band on the
     shared 1180px rail so the callouts line up with the H1 above and the
     simulator below, instead of sitting on their own 1300px measure. */
  padding-block:6px 0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media (min-width:900px){
  .page-callouts{grid-template-columns:1fr 1fr;padding-block:8px 0}
}
.page-callouts .callout{margin:0}
/* --- 17g. Filled CTAs must not inherit a link colour ----------------------
   .cta-gated a (0,1,1, declared after .moon-cta at 0,1,0) set the label to
   var(--gold). In light mode --gold is #1641B4, which is also the button
   background, so every gated commercial CTA rendered as a solid blue box with
   an invisible label. It was live on all four non-Moon promo pages and the
   venue pages. Fixed by naming the filled classes inside every prose container
   that colours its links, at a specificity that clears them all. */
.cta-gated a.moon-cta,.cta-gated a.moon-cta:hover,
.cta-gated a.navcta,.cta-gated a.inlinecta,
.cta-gated a.btn-primary-lnk,.cta-gated a.btn-cta,
.article p a.moon-cta,.article p a.moon-cta:hover,
.lede a.moon-cta,.lede a.moon-cta:hover,
.article p a.navcta,.article p a.inlinecta,
.article p a.btn-primary-lnk,.article p a.btn-cta,
.prose a.moon-cta,.pexit a.moon-cta,.moon-final a.moon-cta{
  color:var(--on-primary);border-bottom:0;
}
.cta-gated a.moon-cta .moon-cta-code,
.article p a.moon-cta .moon-cta-code,
.lede a.moon-cta .moon-cta-code,
.prose a.moon-cta .moon-cta-code,
.pexit a.moon-cta .moon-cta-code,
.moon-final a.moon-cta .moon-cta-code,
.cta-gated a.inlinecta span,.article p a.inlinecta span{color:var(--on-primary)}

/* --- 18. Mobile menu ------------------------------------------------------
   Desktop is unchanged: the burger and the drawer chrome are display:none and
   .navlinks stays a horizontal row. Below 900px the link list leaves the flow
   and becomes a right-hand drawer, so the bar collapses from two wrapped rows
   at 111px to one row, and every link gets a 48px tap height instead of 33px. */
.navburger,.navlinks-head{display:none}
.navscrim{display:none}

@media (max-width:899.98px){
  /* The closed drawer parks at translateX(100%), which sits at x=390..690 on a
     390px viewport and extended document scrollWidth by the drawer width, so
     every mobile page could be dragged 300px sideways into blank space. clip
     rather than hidden because hidden on the root makes it a scroll container
     and kills position:sticky on the nav and the market page rails. */
  html{overflow-x:clip}
  body{overflow-x:clip}
  .sitenav{flex-wrap:nowrap;gap:10px}
  .navburger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:44px;height:44px;padding:0 11px;margin-left:auto;order:9;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;
    cursor:pointer;flex:0 0 auto;
  }
  .navburger .nb-bar{
    display:block;height:2px;width:100%;border-radius:2px;background:var(--text-1);
    transition:transform .18s ease,opacity .18s ease;
  }
  [data-nav="open"] .navburger .nb-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
  [data-nav="open"] .navburger .nb-bar:nth-child(2){opacity:0}
  [data-nav="open"] .navburger .nb-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* The drawer. Off-canvas by transform rather than display so it animates and
     so focusables() can measure it once it is on screen. */
  .navlinks{
    position:fixed;top:0;right:0;z-index:70;
    width:min(84vw,320px);height:100vh;height:100dvh;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:0 0 24px;margin:0;
    background:var(--surface);border-left:1px solid var(--line);
    box-shadow:-18px 0 44px -20px rgba(0,0,0,.32);
    transform:translateX(100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;
  }
  [data-nav="open"] .navlinks{transform:translateX(0);visibility:visible}
  [data-nav="open"]{overflow:hidden}

  .navlinks-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--line);
    font-family:var(--display);font-size:12px;font-weight:650;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
    position:sticky;top:0;background:var(--surface);z-index:1;
  }
  .navclose{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin:-8px -10px -8px 0;
    background:none;border:0;color:var(--text-2);cursor:pointer;border-radius:8px;
  }
  .navclose:hover{background:var(--surface-2);color:var(--text-1)}

  .navlinks a{
    display:flex;align-items:center;min-height:48px;
    padding:0 18px;font-size:15.5px;font-weight:600;
    color:var(--text-1);border-bottom:1px solid var(--hair-1);
  }
  .navlinks a:last-child{border-bottom:0}
  .navlinks a.on{color:var(--violet);background:var(--surface-2);
    box-shadow:inset 3px 0 0 var(--violet)}
  .navlinks a:active{background:var(--surface-2)}

  .navscrim{
    display:block;position:fixed;inset:0;z-index:60;
    /* No backdrop-filter. It promotes the scrim to its own compositing layer
       and ghosted page text through the opaque drawer above it. A flat scrim
       reads the same and composites predictably. */
    background:rgba(11,18,32,.46);
  }
  .navscrim[hidden]{display:none}

  /* The commercial CTA stays in the bar, compacted. It is the money link and
     burying it behind a tap would cost more than the width it takes. */
  .sitenav .navcta{order:8;padding:8px 11px;min-height:40px}
  .sitenav .navcta-sub{display:none}
  .sitenav .themetoggle{order:7;width:40px;height:40px}
  .sitenav .brandlink{margin-right:0}
}

@media (max-width:420px){
  .sitenav .navcta-code{display:none}
  .navlinks{width:min(88vw,300px)}
}

@media (prefers-reduced-motion:reduce){
  .navlinks{transition:none}
  .navburger .nb-bar{transition:none}
}


/* --- 19. One content measure ----------------------------------------------
   padding-inline rather than max-width + auto margins, so the bars keep their
   full-bleed background and border while their contents align to the same
   1180px column as the H1. max() keeps the existing gutter on narrow screens. */
.sitenav,.topbar,.catalyst,.shell,.statusstrip,.page-callouts,.pagehead{
  padding-inline:max(20px,calc((100% - var(--measure)) / 2));
}
.main{padding-inline:0}
@media (max-width:720px){
  .sitenav,.topbar,.catalyst,.shell,.statusstrip,.page-callouts,.pagehead{
    padding-inline:max(14px,calc((100% - var(--measure)) / 2));
  }
}


/* --- 20. Above-the-fold Moon band ------------------------------------------
   Third child of .page-callouts, spanning the full width beneath the verdict
   and the warning, so the conclusion, the caution and the route out arrive on
   one screen. Emitted only where offer.availability() returned verified, so if
   this rule matches nothing on a page that is the gate working, not a bug. */
.callout--moon{
  grid-column:1 / -1;
  border-left-color:var(--gold);
  display:flex;flex-direction:column;gap:8px;
}
.callout--moon .callout__eyebrow{
  color:var(--gold);display:flex;align-items:center;gap:7px;
}
/* The eyebrow sets line-height:1 on a 10.5px monospace label, which would clip
   an 18px crescent. Scale the mark to the label rather than growing the row. */
.callout--moon .callout__eyebrow .moon-mark{width:13px;height:13px;flex:0 0 auto}
.moon-band{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.moon-band-txt{flex:1 1 340px;min-width:0}
.moon-band-line{font-size:14.5px;color:var(--fg);line-height:1.55;margin-top:5px}
.moon-band-line b{color:var(--fg);font-weight:650}
.moon-band .moon-cta{flex:0 0 auto;min-height:48px;white-space:nowrap}
@media (max-width:720px){
  .moon-band-line{font-size:14px}
  /* One column below 720px, and the button takes the row so the tap target is
     the full width of the card rather than a 150px island beside wrapped text. */
  .moon-band{gap:12px}
  .moon-band .moon-cta{width:100%;justify-content:center}
}


/* --- 21. Sticky Moon bar ---------------------------------------------------
   Fixed to the bottom on the shared 1180px rail, revealed by the footer script
   after roughly 400px of scroll and dismissed for good into the mm-sticky key.

   z-index 55 is deliberate and sits between two existing layers: the sticky nav
   and the mobile nav scrim own 60, the nav drawer and the market page's .mbar
   own 70. So the bar never covers navigation, and on a phone the demo-trade bar
   stays reachable while the script lifts this clear of it.

   The bar itself is full bleed, because a floating pill over a full-bleed footer
   looks like a cookie notice. Its contents take the same padding-inline as every
   other band on the site, so the crescent lines up with the H1. */
.mm-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--scrim);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-inline:max(20px,calc((100% - var(--measure)) / 2));
  /* The bar owns the home-indicator strip on an iPhone, so the safe area is
     padding on the bar and not a margin under it: the blurred background runs
     to the physical bottom edge while no content sits inside the inset. */
  padding-block:9px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
  transform:translateY(0);
  transition:transform .22s ease;
}
.mm-sticky[hidden]{display:none}
/* Slide up from below the fold on reveal. The script sets the attribute one
   frame after it unhides the bar, so the transition has a start state. */
.mm-sticky:not([hidden]){transform:translateY(100%)}
html[data-mm-sticky="on"] .mm-sticky{transform:translateY(0)}
/* Published by the script as the bar's measured height plus anything else fixed
   below it, so the last band of the footer is always reachable.

   Both rules are needed, and the second one is the one that does the work. Line
   229 sets html,body{height:100%}, which the app layout depends on, so body's
   content box ends at the viewport and the whole page is overflow below it. A
   padding-bottom on body therefore pads a box that finished thousands of pixels
   ago and adds nothing to scrollHeight: measured at 1440x900 on the homepage, the
   footer still ended 19px inside the bar. Padding on the footer, the last element
   in normal flow on every page type, does extend the scrollable area. The body
   rule stays because it is correct wherever body is not height-constrained, and
   costs nothing where it is. */
html[data-mm-sticky="on"] body{padding-bottom:var(--mm-sticky-pad,0px)}
/* The two base values below are .sitefoot's own, from line 581 and the 720px
   block at line 752. Restated rather than overridden so the footer keeps the
   breathing room it already had and only gains the height of the bar. */
html[data-mm-sticky="on"] footer.sitefoot{
  padding-bottom:calc(40px + var(--mm-sticky-pad,0px));
}
@media (max-width:720px){
  html[data-mm-sticky="on"] footer.sitefoot{
    padding-bottom:calc(32px + var(--mm-sticky-pad,0px));
  }
}
.mm-sticky-in{
  display:flex;align-items:center;gap:14px;min-height:48px;
}
.mm-sticky-mark{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:9px;
  background:var(--surface-2);color:var(--gold);
}
.mm-sticky-txt{
  flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--text-2);line-height:1.4;
}
.mm-sticky-txt b{color:var(--text-1);font-weight:650}
.mm-sticky-sub{color:var(--text-3);white-space:nowrap}
.mm-sticky .moon-cta{
  flex:0 0 auto;min-height:48px;padding:12px 17px;font-size:.9rem;
  white-space:nowrap;box-shadow:none;
}
.mm-sticky .moon-cta:hover{transform:none}
.mm-sticky-x{
  flex:0 0 auto;width:48px;height:48px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  color:var(--text-3);cursor:pointer;
}
.mm-sticky-x:hover{color:var(--text-1);background:var(--surface-2)}
@media (max-width:720px){
  .mm-sticky{padding-inline:max(14px,calc((100% - var(--measure)) / 2))}
  .mm-sticky-in{gap:10px}
}
/* Below 560px the sentence has nowhere to go: the button already reads "Open
   Moon MAXBONUS", so the prose beside it is the same words twice and the only
   thing it can do is wrap the row to two lines. Drop it and let the button take
   the width it needs. */
@media (max-width:560px){
  .mm-sticky-txt{display:none}
  .mm-sticky .moon-cta{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .mm-sticky,.mm-sticky:not([hidden]){transition:none;transform:translateY(0)}
}

/* ---------------------------------------------------------------- risk band
   The operator's mandated leverage warning. It used to render on the 45 market
   pages only, which put it on the pages that describe a market and left it off
   the pages that send you to open an account at 1000x. It now sits directly
   under the nav on every page, so it is above the first commercial link in the
   body on all of them. Amber, not red: red over a red-heavy chart page reads
   as a system fault rather than as advice. */
.mm-risk{
  border-bottom:1px solid var(--line);
  background:rgba(224,147,42,.10);
}
.mm-risk-in{
  max-width:1180px;margin:0 auto;padding:9px 20px;
  display:flex;gap:9px;align-items:baseline;
  font-size:13px;line-height:1.45;color:var(--text);
}
.mm-risk-in b{color:#e0932a}
.mm-risk-mark{
  flex:0 0 auto;color:#e0932a;font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
@media(max-width:640px){
  .mm-risk-in{padding:8px 16px;font-size:12.5px;flex-direction:column;gap:2px}
}

/* --- 22. Phone layout -------------------------------------------------------
   Everything below was found by measuring the built pages at 320, 360, 375,
   390, 414 and 430px rather than by looking at them at 1280px and shrinking
   the window. The order is worst first.

   22a. The menu button was off the screen.
   The bar below 900px is one nowrap row of four fixed-width children. Section
   13 reinstated the wordmark below 900px, which took the brand to 176px, and
   176 + 40 toggle + 99 CTA + 44 burger + 30 gaps + 24 padding demands 413px.
   html and body carry overflow-x:clip, added on purpose to stop the parked
   drawer widening the document, so the surplus was cut rather than left
   scrollable: the burger sat at x=373 to 417 and was entirely off canvas at
   320 and 360px, which is most Android phones and every iPhone SE. There was
   no way into the menu on those widths at all.

   Two changes, both structural rather than cosmetic. The burger gets a
   reserved 44px slot it cannot lose, and the brand becomes the only child
   allowed to shrink, so pressure lands on the wordmark instead of on the only
   control that opens the navigation. */
@media (max-width:899.98px){
  .sitenav{flex-wrap:nowrap;gap:8px}
  .sitenav .brandlink{order:1;flex:1 1 auto;min-width:0;overflow:hidden;margin-right:auto}
  .sitenav .brandlink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sitenav .brandlink svg{flex:0 0 auto}
  .sitenav .themetoggle{order:7;flex:0 0 40px}
  .sitenav .navcta{order:8;flex:0 0 auto;max-width:46vw}
  .sitenav .navburger{order:9;flex:0 0 44px;margin-left:0}
}
/* Below 430px the wordmark is the first thing to go. Four controls plus a
   wordmark do not fit, and the mark alone still identifies the site. */
@media (max-width:429.98px){
  .sitenav .brandlink span{display:none}
  .sitenav .navcta{padding:6px 9px}
}

/* 22b. The drawer's second tier. Seven links filled 394px of an 844px panel. */
.navsub{display:none}
@media (max-width:899.98px){
  .navsub{display:block;border-top:1px solid var(--line);margin-top:8px}
  .navsub-h{
    display:block;padding:14px 18px 8px;
    font-family:var(--display);font-size:11px;font-weight:650;
    letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  }
  .navlinks .navsub a{
    font-size:12px;font-weight:550;color:var(--text-2);
    padding-left:30px;letter-spacing:.09em;
  }
}

/* 22c. The leverage slider was a 4px target.
   A 4px by 296px rail with a 15px thumb is a precision control on a device
   driven by a fingertip. The input keeps its 4px painted rail by moving the
   paint onto the track pseudo-element, and the element itself grows to 44px of
   transparent hit area around it. */
@media (pointer:coarse),(max-width:899.98px){
  input[type=range]{
    height:44px;background:transparent;border-radius:0;
    -webkit-appearance:none;appearance:none;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:4px;border-radius:3px;background:var(--surface-3);
  }
  input[type=range]::-moz-range-track{
    height:4px;border-radius:3px;background:var(--surface-3);
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:24px;height:24px;margin-top:-10px;
    border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--tint-4);
  }
  input[type=range]::-moz-range-thumb{width:24px;height:24px}
  /* The five presets carry the leverage numbers that matter, so on a phone they
     come before the rail rather than under it. Pick 20x with a thumb, or drag
     if you want 137x. */
  .field:has(#levMarks){display:flex;flex-direction:column}
  .field:has(#levMarks) .field-lbl{order:1}
  .field:has(#levMarks) .lev-marks{order:2;margin:2px 0 4px}
  .field:has(#levMarks) #lev{order:3}
  .field:has(#levMarks) .range-ends{order:4}
  .lev-marks{gap:6px;flex-wrap:wrap}
  .lev-marks button{min-height:40px;font-size:12px;flex:1 1 auto}
}

/* 22d. Two bars fixed to the bottom of the same market page.
   div.mbar carries the demo-trade action at 59px and the Moon bar sat on top
   of it at another 59px, so 118px of a 740px viewport was chrome, and the
   market page already showed five competing calls to action on one screen: the
   bar CTA, the Moon bar, the panel button, the mbar button and a link in the
   prose. The market page keeps the bar that belongs to it and drops the
   sitewide one, which appears on every other page type unchanged. */
body.app .mm-sticky{display:none}

/* 22e. The homepage buried its own headline.
   Four full-width session cards at roughly 100px each pushed the h1 to y=507
   on a 740px viewport, so the first screen was a nav, a ticker and a status
   board. Two columns and no note line puts the same four states in 80px. */
@media (max-width:640px){
  .ss-grid{grid-template-columns:1fr 1fr}
  .ss-cell{
    padding:9px 11px;grid-template-columns:auto 1fr;
    grid-template-areas:"dot name" "state state";gap:1px 7px;
  }
  .ss-note{display:none}
  .ss-cell>b{font-size:12px}
  .statusstrip{margin-bottom:18px}
}

/* 22f. Tap targets that were under 44px.
   The class chips were 33px and wrapped to two rows, and the crumb trail was
   17px, which is a target the width of a pencil line. */
@media (max-width:899.98px){
  .classnav a{min-height:42px;display:inline-flex;align-items:center}
  .crumb{align-items:center}
  .crumb a{padding:9px 0;display:inline-block}
  .navclose{width:44px;height:44px}
  .sitenav .themetoggle{width:44px;height:44px}
}

/* 22g. The calculator zoomed Safari on focus.
   Any form control under 16px makes iOS Safari zoom the page when it takes
   focus, and the controls were 14px in a 37 to 39px box. */
@media (max-width:899.98px){
  .calcgrid input,.calcgrid select,
  input.stake-input,
  .ticket input[type=number],.ticket select,
  .risk-grid input,.risk-grid select,
  .field input[type=number]{
    font-size:16px;min-height:44px;
  }
}

/* 22h. The footer was 1234px of stacked 26px links in two ragged columns.
   Nine market links beside two ETF links left a column of empty space, and
   every link was a 26px row. As wrapped chips the same 43 links pack into
   roughly a third of the height and each one is a real target. */
@media (max-width:640px){
  .footgrid{grid-template-columns:1fr;gap:18px}
  .footgrid>div{display:flex;flex-wrap:wrap;gap:6px}
  .footgrid h5{flex:1 0 100%;margin:0 0 2px}
  .footgrid a{
    display:inline-flex;align-items:center;min-height:36px;padding:0 11px;
    background:var(--surface-2);border:1px solid var(--hair-1);border-radius:9px;
    font-size:12.5px;
  }
  .footgrid h5 a{background:none;border:0;padding:0;min-height:0}
}

/* 22i. Type that was too small to read at arm's length.
   The stacked table labels were 10.5px and dropped to 10px under 375px, the
   promo code in the bar rendered at 8.6px and the strapline under it at 7.9px.
   Anything under 11px on a phone is decoration rather than text, and the code
   is the one string on the page you have to be able to copy correctly. */
@media (max-width:640px){
  tbody td::before{font-size:11.5px;letter-spacing:.06em}
  .mcsym{font-size:11.5px}
}
@media (max-width:375px){
  tbody td::before{font-size:11px;letter-spacing:.05em}
}
@media (max-width:899.98px){
  .navcta .navcta-code{font-size:11px}
  .navcta .navcta-sub{display:none}
}

/* 22j. The rest of the controls that were under 44px.
   Measured on a phone at 360px: 46 watchlist rows at 34px, the chart timeframe
   buttons at 27px, the chart type buttons at 24px, the long and short buttons
   at 34px. Every one of those is a control you are meant to use while the
   simulator is running, and every one of them was smaller than a fingertip.
   Inline links inside prose are left alone: they sit in a line of text and
   growing them would break the line. */
@media (pointer:coarse),(max-width:899.98px){
  .wrow{min-height:44px}
  button.tf,button.ct{min-height:40px;min-width:40px}
  button.rside{min-height:46px}
  .icon-btn{min-width:40px;min-height:40px}
  .quick button,.tabs .tab{min-height:40px}
  /* The ticker symbol is the whole point of a mover tile, so the tile's own
     heading gets a target rather than a 15px line of text. */
  .mo-top b a{display:inline-block;padding:11px 0}
  #mBtn{min-height:44px}
  .footgrid a{min-height:40px}
  .tp-i{padding-top:14px;padding-bottom:14px}
}