/* ============================================================
   Moon affiliate simulator — dark trading-desk system
   ============================================================ */
:root{
  /* Commercial accent. Global, because .moon-cta and .moon-inline-lnk appear on
     pages that do not carry the .moonskin body class. */
  --gold:#e8b44a;
  --gold-dim:#a37c2c;
  --bg:#000000;
  --surface:#0e0e11;
  --surface-2:#16161a;
  --surface-3:#1d1d22;
  --line:#26262d;
  --line-soft:#1c1c21;
  --text:#f4f4f6;
  --text-2:#9a9aa4;
  --text-3:#6a6a74;
  --violet:#6c5ce7;
  --violet-hi:#7d6ef0;
  --up:#28c76f;
  --down:#f0525b;
  --pill:#e8447a;
  --amber:#f0a52e;
  --radius:10px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{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:14px;line-height:1.45;-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 rgba(240,165,46,.4);background:rgba(240,165,46,.09);
  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:#fff;
  box-shadow:0 0 0 3px rgba(108,92,231,.35);cursor:pointer;
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:#fff;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:rgba(108,92,231,.16);border-color:var(--violet);color:#c9c0ff}

.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:#3a3a44;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:rgba(240,165,46,.08);
  border:1px solid rgba(240,165,46,.28);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:#c9c0ff;background:rgba(108,92,231,.15);
  border:1px solid rgba(108,92,231,.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:rgba(108,92,231,.12)}

/* ---------------------------------------------------------- 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:rgba(8,8,10,.96);
    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}
.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:#fff;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:#fff;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:#fff}

/* -------------------------------------------------------- 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 rgba(108,92,231,.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:rgba(240,165,46,.08);border:1px solid rgba(240,165,46,.28);
  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:#fff;
  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:rgba(255,255,255,.18);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:rgba(240,165,46,.07);border:1px solid rgba(240,165,46,.24);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:22px 24px 4px;max-width:1180px;margin:0 auto}
.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:16px 14px 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:rgba(240,165,46,.12)}
.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%, rgba(108,92,231,.20), transparent 62%),
    radial-gradient(760px 460px at 6% 4%, rgba(232,180,74,.075), 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%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 62% 9%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.3px 1.3px at 84% 32%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px 1px at 31% 46%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.5px 1.5px at 73% 63%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 21% 77%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.2px 1.2px at 47% 88%, rgba(255,255,255,.38), transparent),
    radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,.28), 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 rgba(232,180,74,.32);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,rgba(18,21,39,.85),rgba(11,13,26,.85));
}
.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 rgba(30,34,55,.55);padding:11px 14px;font-size:.86rem;
}
.moonskin tbody tr:last-child td{border-bottom:0}
.moonskin tbody tr:hover td{background:rgba(108,92,231,.055)}
.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,rgba(108,92,231,.10),rgba(232,180,74,.055));
}
.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:rgba(5,6,14,.5);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 rgba(30,34,55,.5);
}
.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:#eef0fa;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%, rgba(232,180,74,.15), transparent 66%),
    linear-gradient(180deg,rgba(18,21,39,.92),rgba(11,13,26,.92));
}
.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 rgba(232,180,74,.45);border-radius:9px;padding:8px 20px;
  background:rgba(232,180,74,.055);
}
.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,rgba(18,21,39,.7),rgba(11,13,26,.7));
}
.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:#eef0fa;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:#0b0a05;
  background:linear-gradient(135deg,#f3c463,var(--gold) 46%,#c8912f);
  border-radius:10px;padding:13px 19px;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 26px -12px rgba(232,180,74,.6);
  transition:transform .16s ease,box-shadow .16s ease;
}
.moon-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 15px 32px -12px rgba(232,180,74,.75);
}
.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:rgba(11,10,5,.19);border:1px solid rgba(11,10,5,.22);
  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%, rgba(108,92,231,.24), transparent 70%),
    linear-gradient(180deg,rgba(18,21,39,.6),rgba(11,13,26,.85));
}
.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{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#f3c463,var(--gold,#e8b44a) 48%,#c8912f);
  color:#0b0a05;font-weight:650;border:0;
}
.navcta span{
  font-family:var(--mono);font-size:.72em;font-weight:600;letter-spacing:.05em;
  background:rgba(11,10,5,.18);border-radius:4px;padding:2px 5px;
}
.navcta:hover{filter:brightness(1.07)}

/* ---- 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,#e8b44a)}

@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 span{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,rgba(11,13,26,.96));
  }
}
.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%, rgba(232,180,74,.09), 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:#e8b44a;text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(232,180,74,.32);padding-bottom:1px;
}
.moon-inline-lnk:hover{border-bottom-color:#e8b44a}
@media(max-width:600px){
  .pexit{flex-direction:column;align-items:stretch}
  .pexit .moon-cta{justify-content:center}
}