/* ==========================================================================
   Stub - black product theme
   One ground (black), one light source (white, from behind the top edge of
   cards), and colour reserved for price direction only.
   ========================================================================== */

:root {
  --black:   #000000;
  --s-1:     #08090A;
  --s-2:     #0C0E10;
  --s-3:     #131619;
  --s-4:     #1B1F23;

  --line:    rgba(255,255,255,0.07);
  --line-2:  rgba(255,255,255,0.12);
  --line-3:  rgba(255,255,255,0.20);

  --fg:      #F4F5F6;
  --fg-2:    #9BA3AB;
  --fg-3:    #656D75;

  /* Functional only. Never decorative. */
  --up:      #3FB950;
  --down:    #F0574E;
  --warn:    #D9A441;

  --ui:      "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --gut:  clamp(1.25rem, 4vw, 3rem);
  --maxw: 1160px;
  --r:    12px;
  --r-sm: 8px;

  --bg: var(--black); --bg-2: var(--s-2);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--fg-3); }

.label {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--fg-3); margin: 0;
}

/* --------------------------------------------------------------------------
   Backlight - the only lighting in the system.
   A soft source sits behind the top edge of a card and spills upward, plus a
   hairline that brightens toward the centre of that edge.
   -------------------------------------------------------------------------- */

.lit { position: relative; }

.lit::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 76%; height: 190px;
  transform: translate(-50%, -55%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.085), rgba(255,255,255,0) 70%);
  pointer-events: none; z-index: 0;
}

.lit::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32) 50%, transparent);
  pointer-events: none; z-index: 1;
}

.lit > * { position: relative; z-index: 1; }

/* A single ambient source behind the hero, centred - never at the page edges. */
.ambient {
  position: absolute; left: 50%; top: -120px;
  width: min(1100px, 120%); height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 62%);
  pointer-events: none; z-index: 0;
}

/* ---------------------------------------------------------------- Nav ---- */

.nav-shell {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, background 220ms ease;
}

.nav-shell.stuck { border-bottom-color: var(--line); background: rgba(0,0,0,.9); }

.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.05rem; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em;
  text-decoration: none; line-height: 1; color: var(--fg);
}

.brand .mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--fg); color: var(--black);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
}

/* The delivered mark is a white glyph on transparent, which sits directly on
   the dark shell with no plate behind it. Slightly oversized against the
   wordmark because the glyph's own margins are tight. */
.brand .mark-img {
  width: 28px; height: 28px;
  display: block; object-fit: contain;
  flex: none;
}

.foot-mode {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.6; color: var(--fg-3, var(--fg-2));
}

.masthead nav { display: flex; align-items: center; gap: 1.6rem; font-size: .875rem; }
.masthead nav a { text-decoration: none; color: var(--fg-2); transition: color 160ms ease; }
.masthead nav a:hover { color: var(--fg); }
.masthead nav a.btn { color: var(--black); }
.masthead nav a.btn-ghost { color: var(--fg); }

/* ------------------------------------------------------------ Buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--fg); color: var(--black);
  font: inherit; font-size: .875rem; font-weight: 500; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.btn:hover { background: #FFFFFF; }
.btn-accent { background: var(--fg); color: var(--black); }
.btn-accent:hover { background: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,.05); border-color: var(--line-3); }
.btn-buy  { background: var(--up);   color: #04150A; }
.btn-buy:hover { background: #4ACB5D; }
.btn-sell { background: var(--down); color: #1B0403; }
.btn-sell:hover { background: #FF6A61; }
.btn-sm { padding: .42rem .8rem; font-size: .8125rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

:where(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* --------------------------------------------------------------- Tape ---- */

.tape {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--black);
  padding-block: .75rem;
}

/* Items emerge from and return to the dark rather than hitting a hard edge. */
.tape::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%);
}

.tape-rail { display: flex; width: max-content; animation: tape-run 72s linear infinite; will-change: transform; }
.tape:hover .tape-rail, .tape:focus-within .tape-rail { animation-play-state: paused; }

@keyframes tape-run { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.tape-item {
  display: flex; align-items: baseline; gap: .5rem;
  padding-inline: 1.4rem; white-space: nowrap;
  font-family: var(--mono); font-size: .8125rem;
}

.tape-sym { font-weight: 500; color: var(--fg); }
.tape-px  { color: var(--fg-2); }
.tape-chg { font-size: .75rem; }
.tape-item.is-stale { opacity: .3; }

/* --------------------------------------------------------------- Hero ---- */

.hero { position: relative; overflow: hidden; padding-block: clamp(4rem,9vw,7rem) clamp(3rem,7vw,5rem); }
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .34rem .8rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255,255,255,.03); font-size: .78rem; color: var(--fg-2);
}

.pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--up); display: block; }

.hero h1 {
  font-size: clamp(2.3rem,5vw,3.5rem); font-weight: 600;
  line-height: 1.06; letter-spacing: -.035em;
  margin: 1.35rem 0 1.15rem;
}

.hero .lede { font-size: 1.05rem; color: var(--fg-2); max-width: 44ch; margin: 0 0 2rem; letter-spacing: -.004em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.hero-trust .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 500; letter-spacing: -.03em; display: block; margin-bottom: .15rem; }
.hero-trust .k { font-size: .78rem; color: var(--fg-3); }

/* Product mockup */
.mock {
  position: relative;
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .35rem .95rem .55rem;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,1);
}

.mock-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem .15rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }

.tc-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem;
  align-items: baseline; padding-block: .62rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .8125rem;
}

.tc-row:last-child { border-bottom: 0; }
.tc-row .sym { color: var(--fg); font-weight: 500; }
.tc-row .nm { font-family: var(--ui); color: var(--fg-3); font-size: .76rem; }
.tc-row .px { color: var(--fg); }
.tc-row.is-stale { opacity: .3; }

.tick-flash { animation: flash 800ms ease-out; }
@keyframes flash { from { background: rgba(255,255,255,.10); } to { background: transparent; } }

/* ----------------------------------------------------------- Sections ---- */

.band { position: relative; padding-block: clamp(3.5rem,8vw,5.75rem); }
.band-line { border-top: 1px solid var(--line); }

.band-head { max-width: 58ch; margin-bottom: 2.5rem; }
.band-head.center { margin-inline: auto; text-align: center; }
.band-head h2 { font-size: clamp(1.75rem,3.6vw,2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.032em; margin: .7rem 0 .8rem; }
.band-head p { color: var(--fg-2); margin: 0; font-size: 1rem; }

.feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: clamp(2rem,5vw,4rem); align-items: center; padding-block: clamp(2rem,4vw,3rem); }
.feature.flip > .feature-visual { order: -1; }
.feature h3 { font-size: clamp(1.35rem,2.6vw,1.85rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.15; margin: .65rem 0 .8rem; }
.feature p { color: var(--fg-2); margin: 0 0 1.2rem; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tick-list li { display: flex; gap: .7rem; font-size: .9rem; color: var(--fg-2); }
.tick-list li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--fg-3); }

.card {
  position: relative;
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem;
}

.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

/* Market grid */
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: .75rem; }

.mkt-card {
  background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem 1rem; transition: border-color 200ms ease, background 200ms ease;
}

.mkt-card:hover { border-color: var(--line-2); background: var(--s-2); }
.mkt-card .top { display: flex; justify-content: space-between; align-items: baseline; }
.mkt-card .s { font-family: var(--mono); font-weight: 500; font-size: .875rem; }
.mkt-card .nm { font-size: .74rem; color: var(--fg-3); margin-top: .1rem; }
.mkt-card .p { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; letter-spacing: -.03em; margin-top: .55rem; }
.mkt-card .c { font-family: var(--mono); font-size: .78rem; margin-top: .1rem; }
.mkt-card svg { display: block; width: 100%; height: 30px; margin-top: .5rem; }
.mkt-card.is-stale { opacity: .35; }

/* Desks */
.desk-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: .9rem; }

.desk { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; transition: border-color 220ms ease, background 220ms ease; }
.desk:hover { border-color: var(--line-2); background: var(--s-2); }
.desk h3 { font-size: 1.05rem; font-weight: 600; margin: .7rem 0 .25rem; letter-spacing: -.02em; }
.desk .op { font-size: .8rem; color: var(--fg-3); margin: 0 0 .9rem; }
.desk .bl { font-size: .875rem; color: var(--fg-2); margin: 0 0 1.1rem; min-height: 3.4em; }

.desk-stats { display: flex; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.desk-stats .k { font-size: .7rem; color: var(--fg-3); display: block; margin-bottom: .15rem; }
.desk-stats .v { font-family: var(--mono); font-size: 1rem; font-weight: 500; }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-bottom: 1.1rem; }
.bars span { flex: 1; border-radius: 1px; background: var(--s-4); }
.bars span.hi { background: var(--fg-3); }

/* Steps */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); gap: 1.5rem; counter-reset: s; }
.step-item { position: relative; padding-top: 2.6rem; }

.step-item::before {
  counter-increment: s; content: counter(s,decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-3); border: 1px solid var(--line-2); color: var(--fg-2);
}

.step-item h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; letter-spacing: -.015em; }
.step-item p { color: var(--fg-2); font-size: .875rem; margin: 0; }

/* Closing CTA */
.cta { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,3rem); background: var(--s-1); text-align: center; overflow: hidden; }
.cta h2 { font-size: clamp(1.7rem,3.8vw,2.5rem); font-weight: 600; letter-spacing: -.032em; line-height: 1.1; margin: 0 0 .8rem; }
.cta p { color: var(--fg-2); margin: 0 auto 1.9rem; max-width: 44ch; }

/* Reveal - content emerges from the dark and settles. */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Tables ---- */

.table-scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }

table.grid th { text-align: left; font-size: .72rem; font-weight: 500; color: var(--fg-3); padding: .75rem .85rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid td { padding: .8rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid td.n, table.grid th.n { text-align: right; }
table.grid tbody tr:hover { background: rgba(255,255,255,.02); }

.sym { font-family: var(--mono); font-weight: 500; }
.sub { display: block; font-size: .78rem; color: var(--fg-3); font-family: var(--ui); font-weight: 400; letter-spacing: 0; margin-top: .15rem; }

.chip { display: inline-block; padding: .18rem .5rem; border: 1px solid var(--line-2); border-radius: 5px; font-size: .7rem; font-weight: 500; color: var(--fg-2); }
.chip-ok   { color: var(--up);   border-color: rgba(63,185,80,.35); }
.chip-bad  { color: var(--down); border-color: rgba(240,87,78,.35); }
.chip-warn { color: var(--warn); border-color: rgba(217,164,65,.35); }

/* -------------------------------------------------------------- Forms ---- */

.field { display: block; margin-bottom: 1rem; }
.field > .label { display: block; margin-bottom: .4rem; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=file], select {
  width: 100%; padding: .68rem .8rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--s-2); color: var(--fg);
  font: inherit; font-size: .9rem;
  transition: border-color 160ms ease;
}

input:focus, select:focus { border-color: var(--line-3); }
input[type=number] { font-family: var(--mono); }
input::placeholder { color: var(--fg-3); }
select option { background: var(--s-3); color: var(--fg); }

.row { display: flex; gap: .7rem; }
.row > * { flex: 1; min-width: 0; }

.form-error { padding: .65rem .8rem; border: 1px solid rgba(240,87,78,.35); border-radius: var(--r-sm); background: rgba(240,87,78,.08); font-size: .85rem; margin-bottom: 1rem; }

.auth-wrap { position: relative; display: grid; place-items: center; min-height: calc(100vh - 200px); padding-block: 3rem; }
.auth-card { position: relative; width: min(400px,100%); background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1.9rem; }
.auth-card h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; margin: .45rem 0 1.5rem; }
.auth-alt { margin-top: 1.1rem; font-size: .85rem; color: var(--fg-2); text-align: center; }

/* ---------------------------------------------------------- App shell ---- */

.shell { display: grid; grid-template-columns: 212px minmax(0,1fr); min-height: 100vh; }

.rail { border-right: 1px solid var(--line); background: var(--s-1); padding: 1.1rem 0; position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; }
.rail .brand { padding-inline: 1.1rem; margin-bottom: 1.6rem; }
.rail-nav { display: flex; flex-direction: column; gap: .1rem; padding-inline: .55rem; }

.rail-nav button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.rail-nav button:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.rail-nav button[aria-current=true] { color: var(--fg); background: var(--s-3); }

.rail-foot { margin-top: auto; padding: 1.1rem 1.1rem 0; border-top: 1px solid var(--line); font-size: .8rem; color: var(--fg-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.view { padding: 1.6rem var(--gut) 3rem; }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.view-head h1 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 600; letter-spacing: -.03em; margin: .3rem 0 0; line-height: 1.1; }

.sim-note { display: flex; align-items: center; gap: .6rem; padding: .55rem var(--gut); border-bottom: 1px solid var(--line); background: var(--s-1); font-size: .8rem; color: var(--fg-2); }
.sim-note strong { font-size: .7rem; font-weight: 600; color: var(--warn); }

.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: .75rem; margin-bottom: 1.6rem; }
.stat { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; }
.stat .v { font-family: var(--mono); font-size: 1.45rem; font-weight: 500; letter-spacing: -.04em; margin-top: .3rem; }

.panel { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.panel-body { padding: 1.1rem; }

.split { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 1.25rem; align-items: start; }
.empty { padding: 2.5rem 1.1rem; text-align: center; color: var(--fg-2); font-size: .9rem; }
.empty .btn { margin-top: 1rem; }

.spark { display: block; width: 100%; height: 140px; }
.spark path { fill: none; stroke: var(--fg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .area { fill: rgba(255,255,255,.05); stroke: none; }

.toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 80; max-width: min(360px, calc(100vw - 2rem)); }
.toast { padding: .72rem .9rem; border: 1px solid var(--line-2); border-left-width: 2px; background: var(--s-3); border-radius: var(--r-sm); font-size: .85rem; animation: rise 240ms cubic-bezier(.16,1,.3,1); }
.toast.good { border-left-color: var(--up); }
.toast.bad  { border-left-color: var(--down); }
.toast.info { border-left-color: var(--fg-3); }

@keyframes rise { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.steps { display: flex; gap: .5rem; margin-bottom: 1.6rem; }
.step { flex: 1; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-1); font-size: .82rem; color: var(--fg-2); }
.step[data-state=active] { border-color: var(--line-3); background: var(--s-3); color: var(--fg); }
.step[data-state=done] { color: var(--up); border-color: rgba(63,185,80,.3); }
.step .n { font-family: var(--mono); font-size: .68rem; display: block; color: var(--fg-3); margin-bottom: .1rem; }

.code-input { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .5em; text-align: center; padding-block: .8rem; }

.callout { padding: .8rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--s-2); font-size: .85rem; color: var(--fg-2); }
.callout code { font-family: var(--mono); color: var(--fg); font-size: 1.15em; letter-spacing: .12em; font-weight: 600; }

/* -------------------------------------------------------------- Modal ---- */

.modal-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 1rem;
  animation: fade 200ms ease;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative; width: min(420px,100%);
  background: var(--s-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 1.5rem;
  animation: rise 260ms cubic-bezier(.16,1,.3,1);
  max-height: calc(100vh - 2rem); overflow-y: auto;
}

.modal h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin: .3rem 0 .4rem; }
.modal .desc { color: var(--fg-2); font-size: .875rem; margin: 0 0 1.25rem; }
.modal-close { position: absolute; top: .85rem; right: .85rem; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font-size: 1rem; line-height: 1; cursor: pointer; }
.modal-close:hover { background: rgba(255,255,255,.06); color: var(--fg); }

.quick { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.quick button { flex: 1; min-width: 68px; padding: .45rem .3rem; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--fg-2); font: inherit; font-size: .8rem; font-family: var(--mono); cursor: pointer; }
.quick button:hover, .quick button[aria-pressed=true] { background: var(--s-4); color: var(--fg); border-color: var(--line-3); }

.leg-list { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.leg { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .8rem; color: var(--fg-2); padding: .4rem .55rem; background: var(--s-1); border-radius: 6px; }

/* ------------------------------------------------------------- Footer ---- */

.foot { border-top: 1px solid var(--line); padding-block: 2.25rem 2.75rem; font-size: .85rem; color: var(--fg-2); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-end; }
.foot a { color: var(--fg-2); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot .built { font-size: .78rem; color: var(--fg-3); }
.foot .built b { font-weight: 600; color: var(--fg); }

/* --------------------------------------------------------- Responsive ---- */

@media (max-width: 980px) {
  .hero-grid, .feature { grid-template-columns: 1fr; }
  .feature.flip > .feature-visual { order: 0; }
  .split { grid-template-columns: 1fr; }
  .lit::before { width: 90%; height: 150px; }
}

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; gap: .4rem; border-right: 0; border-bottom: 1px solid var(--line); padding: .65rem var(--gut); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail .brand { margin: 0 .6rem 0 0; padding: 0; font-size: 1.05rem; flex: 0 0 auto; }
  .rail-nav { flex-direction: row; padding: 0; gap: .2rem; flex: 0 0 auto; }
  .rail-nav button { white-space: nowrap; padding: .42rem .7rem; }
  .rail-foot { margin: 0 0 0 auto; padding: 0 0 0 .6rem; border-top: 0; display: flex; align-items: center; flex: 0 0 auto; }
  .rail-foot p { display: none; }
  .view { padding: 1.25rem var(--gut) 2.5rem; }
  .masthead nav { gap: .9rem; font-size: .82rem; }
  .masthead nav .hide-sm { display: none; }
  .steps { flex-direction: column; }
  .hero-trust { gap: 1.5rem 2rem; }
  .toasts { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
  .desk-stats { gap: 1.1rem; }
  table.grid th, table.grid td { padding: .65rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .tape-rail { animation: none; }
  .tape { overflow-x: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- Copy allocations ---- */

.alloc { background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; margin-bottom: .75rem; }
.alloc-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.alloc-top strong { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }

.alloc-nums { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.alloc-nums .k { display: block; font-size: .72rem; color: var(--fg-3); margin-bottom: .2rem; }
.alloc-nums .v { font-size: .95rem; font-weight: 500; }

.alloc-legs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0; }
.leg-tag { font-family: var(--mono); font-size: .72rem; color: var(--fg-2); background: var(--s-3); border-radius: 5px; padding: .22rem .45rem; }

/* Secondary panel-header text has no room to sit beside the title on a phone. */
@media (max-width: 640px) {
  .panel-head { flex-wrap: wrap; row-gap: .3rem; }
  .panel-head .label + .label { display: none; }
  .alloc-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .view-head { align-items: flex-start; }
}

/* --------------------------------------------------------------- Media ---- */

.media {
  position: relative; width: 100%;
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.media-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-align: center; padding: 1.25rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 10px, transparent 10px 20px);
}

.media-name { font-family: var(--mono); font-size: .8rem; color: var(--fg-2); margin: 0; }
.media-name span { color: var(--fg); }
.media-hint { font-size: .82rem; color: var(--fg-3); margin: 0; max-width: 42ch; }
.media-ratio { font-family: var(--mono); font-size: .7rem; color: var(--fg-3); margin: .2rem 0 0; }

.showcase { position: relative; }
.media-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.media-cap { font-size: .82rem; color: var(--fg-3); margin: .7rem 0 0; }

/* -------------------------------------------------------------- Footer ---- */

.foot { border-top: 1px solid var(--line); padding-block: 3rem 2rem; font-size: .875rem; color: var(--fg-2); background: var(--black); }

.foot-top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,2.4fr); gap: clamp(2rem,5vw,4rem); padding-bottom: 2.5rem; }

.foot-brand .brand { margin-bottom: .9rem; }
.foot-brand p { margin: 0 0 .9rem; max-width: 38ch; color: var(--fg-2); font-size: .85rem; line-height: 1.65; }
.foot-brand .built { font-size: .78rem; color: var(--fg-3); margin: 0; }
.foot-brand .built b { color: var(--fg); font-weight: 600; }

.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.5rem; }
.foot-h { font-size: .8rem; font-weight: 600; color: var(--fg); margin: 0 0 .85rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot-cols a { color: var(--fg-2); text-decoration: none; font-size: .84rem; transition: color 150ms ease; }
.foot-cols a:hover { color: var(--fg); }

.foot-note { border-top: 1px solid var(--line); padding-block: 1.5rem; display: grid; gap: .75rem; }
.foot-note p { margin: 0; font-size: .78rem; line-height: 1.65; color: var(--fg-3); max-width: 92ch; }
.foot-note b { color: var(--fg-2); font-weight: 600; }

.foot-bottom { border-top: 1px solid var(--line); padding-top: 1.35rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; }
.foot-bottom p { margin: 0; font-size: .78rem; color: var(--fg-3); }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 2.25rem; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.75rem 1.25rem; }
  .media-strip { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Skeletons ---- */

.sk {
  position: relative; overflow: hidden;
  background: var(--s-3); border-radius: 5px;
  color: transparent !important;
}

.sk::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: sweep 1.5s ease-in-out infinite;
}

@keyframes sweep { to { transform: translateX(100%); } }

.sk-line { height: 10px; margin: .3rem 0; }
.sk-line.w-25 { width: 25%; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-num { height: 22px; width: 62%; margin-top: .4rem; }
.sk-chart { height: 140px; width: 100%; border-radius: 8px; }
.sk-spark { height: 30px; width: 100%; margin-top: .5rem; border-radius: 4px; }

.sk-row td { padding-block: .95rem; }

/* --------------------------------------------------------------- Chart ---- */

.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: 170px; overflow: visible; }

.chart-line { fill: none; stroke: var(--fg); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: rgba(255,255,255,.05); stroke: none; }
.chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }

.chart-line.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.5s cubic-bezier(.16,1,.3,1) forwards; }
.chart-area.fade { opacity: 0; animation: areaIn .9s ease-out .5s forwards; }

@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes areaIn { to { opacity: 1; } }

.chart-cross { stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.chart-dot { fill: var(--fg); opacity: 0; }
.chart-wrap.hot .chart-cross, .chart-wrap.hot .chart-dot { opacity: 1; }

.chart-tip {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -125%);
  background: var(--s-4); border: 1px solid var(--line-2);
  border-radius: 6px; padding: .35rem .55rem;
  font-family: var(--mono); font-size: .75rem; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 140ms ease;
}

.chart-wrap.hot .chart-tip { opacity: 1; }
.chart-tip .t { display: block; color: var(--fg-3); font-size: .68rem; }

/* Desk sparkline on the copy trading cards */
.desk-spark { width: 100%; height: 44px; display: block; margin-bottom: 1rem; }
.desk-spark path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.perf-src { font-size: .7rem; color: var(--fg-3); }

/* ---------------------------------------------------------- Onboarding ---- */

.ob { min-height: 100vh; padding-bottom: 4rem; }
.ob-head { display: flex; align-items: center; justify-content: space-between; padding-block: 1.15rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }

.ob-steps { display: flex; gap: .5rem; margin-bottom: 2.5rem; }
.ob-step { flex: 1; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-1); font-size: .84rem; color: var(--fg-3); }
.ob-step[data-state=active] { border-color: var(--line-3); background: var(--s-3); color: var(--fg); }
.ob-step[data-state=done] { color: var(--up); border-color: rgba(63,185,80,.3); }
.ob-step .n { font-family: var(--mono); font-size: .68rem; display: block; color: var(--fg-3); margin-bottom: .1rem; }

.ob-intro { max-width: 60ch; margin-bottom: 2.25rem; }
.ob-intro h1 { font-size: clamp(1.7rem,3.6vw,2.4rem); font-weight: 600; letter-spacing: -.032em; line-height: 1.1; margin: 0 0 .8rem; }
.ob-intro p { color: var(--fg-2); margin: 0; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; align-items: start; }

.plan { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; }
.plan-pick { border-color: var(--line-3); background: var(--s-2); }
.plan-tag { position: absolute; top: -1px; right: 1.1rem; transform: translateY(-50%); background: var(--fg); color: var(--black); font-size: .68rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; }

.plan-price { margin: .5rem 0 .8rem; display: flex; align-items: baseline; gap: .35rem; }
.plan-price .v { font-family: var(--mono); font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; }
.plan-price .per { font-size: .8rem; color: var(--fg-3); }

.plan-blurb { font-size: .86rem; color: var(--fg-2); margin: 0 0 1rem; min-height: 3.6em; }
.plan-cap { font-size: .78rem; color: var(--fg-3); padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin: 0 0 1rem; }

.plan-feats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; flex: 1; }
.plan-feats li { font-size: .84rem; color: var(--fg-2); display: flex; gap: .55rem; }
.plan-feats li::before { content: ""; flex: 0 0 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--fg-3); }

.ob-card { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; max-width: 560px; }
.ob-plan-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ob-range { font-size: .78rem; color: var(--fg-3); margin: -.4rem 0 1.25rem; }

.ob-check { display: flex; gap: .7rem; align-items: flex-start; padding: .95rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-2); cursor: pointer; }
.ob-check input { margin-top: .2rem; flex: 0 0 auto; width: auto; }
.ob-check span { font-size: .82rem; color: var(--fg-3); line-height: 1.55; }
.ob-check b { display: block; color: var(--fg); font-weight: 600; font-size: .875rem; margin-bottom: .2rem; }

.fund-rows { display: grid; gap: .8rem; }
.fund-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }

.outcome-pick { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.outcome-pick button { text-align: left; padding: .9rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--fg-2); font: inherit; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.outcome-pick button b { display: block; color: var(--fg); font-size: .9rem; font-weight: 600; margin-bottom: .2rem; }
.outcome-pick button span { font-size: .78rem; color: var(--fg-3); line-height: 1.45; }
.outcome-pick button[aria-pressed=true] { border-color: var(--line-3); background: var(--s-3); }

.fund-progress { margin-top: 1.35rem; }
.fund-progress .bar { height: 3px; background: var(--s-3); border-radius: 2px; overflow: hidden; }
.fund-progress .bar span { display: block; height: 100%; width: 0; background: var(--fg); transition: width .45s cubic-bezier(.16,1,.3,1); }
.fund-progress .label { margin-top: .5rem; }

.ob-note { font-size: .76rem; color: var(--fg-3); margin: 1.25rem 0 0; line-height: 1.55; }

.ob-done { text-align: center; margin-inline: auto; }
.ob-done h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; margin: .9rem 0 .6rem; }
.ob-done p { color: var(--fg-2); font-size: .9rem; margin: 0 0 1.25rem; }
.ob-done .leg-list { justify-content: center; }

@media (max-width: 640px) {
  .ob-steps { flex-direction: column; }
  .outcome-pick { grid-template-columns: 1fr; }
  .ob-card { padding: 1.35rem; }
}

/* ------------------------------------------------------- Terminal frame ---- */

.frame { position: relative; background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--s-2); }
.frame-dots { display: flex; gap: 5px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.frame-title { font-size: .78rem; color: var(--fg-3); }

.frame-body { display: grid; grid-template-columns: 148px minmax(0,1fr); min-height: 380px; }
.frame-rail { border-right: 1px solid var(--line); padding: .9rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.frame-rail span { padding: .45rem .6rem; border-radius: 6px; font-size: .8rem; color: var(--fg-3); }
.frame-rail span.on { background: var(--s-3); color: var(--fg); }

.frame-main { padding: 1.1rem; min-width: 0; }
.frame-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; margin-bottom: 1rem; }
.frame-stat { background: var(--s-2); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; }
.frame-stat .k { font-size: .68rem; color: var(--fg-3); display: block; }
.frame-stat .v { font-family: var(--mono); font-size: 1rem; font-weight: 500; letter-spacing: -.03em; margin-top: .2rem; display: block; }

.frame-split { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: .9rem; }
.frame-panel { background: var(--s-2); border: 1px solid var(--line); border-radius: 8px; padding: .85rem; }
.frame-panel .label { margin-bottom: .6rem; }

.frame-tbl { width: 100%; border-collapse: collapse; font-size: .76rem; }
.frame-tbl td { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.frame-tbl tr:last-child td { border-bottom: 0; }
.frame-tbl .r { text-align: right; font-family: var(--mono); }

/* ------------------------------------------------------------- Metrics ---- */

.metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.metric { background: var(--s-1); padding: 1.4rem 1.2rem; }
.metric .v { font-family: var(--mono); font-size: clamp(1.6rem,3.2vw,2.15rem); font-weight: 600; letter-spacing: -.04em; display: block; line-height: 1; }
.metric .k { font-size: .8rem; color: var(--fg-2); display: block; margin-top: .5rem; }
.metric .s { font-size: .74rem; color: var(--fg-3); display: block; margin-top: .2rem; }

/* --------------------------------------------------------- Leaderboard ---- */

.board-wrap { background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.board-sort { display: flex; gap: .35rem; flex-wrap: wrap; }
.board-sort button { padding: .32rem .65rem; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--fg-3); font: inherit; font-size: .76rem; cursor: pointer; }
.board-sort button[aria-pressed=true] { background: var(--s-3); color: var(--fg); border-color: var(--line-3); }

table.board { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.board th { text-align: left; font-size: .7rem; font-weight: 500; color: var(--fg-3); padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.board td { padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.board tr:last-child td { border-bottom: 0; }
table.board tbody tr:hover { background: rgba(255,255,255,.02); }
table.board .n { text-align: right; font-family: var(--mono); }
table.board .op { display: flex; align-items: center; gap: .6rem; }

.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--s-4); color: var(--fg-2); display: grid; place-items: center; font-size: .68rem; font-weight: 600; flex: 0 0 auto; }
.desk-name { font-weight: 600; font-size: .86rem; display: block; }
.desk-op { font-size: .74rem; color: var(--fg-3); }
.mini { width: 74px; height: 24px; display: block; }
.mini path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------ Spec grid ---- */

.spec { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec-cell { background: var(--s-1); padding: 1.25rem; }
.spec-cell h4 { font-size: .88rem; font-weight: 600; margin: 0 0 .4rem; }
.spec-cell p { font-size: .82rem; color: var(--fg-3); margin: 0; line-height: 1.55; }
.spec-cell .num { color: var(--fg-2); font-size: .78rem; display: block; margin-top: .5rem; }

@media (max-width: 860px) {
  .frame-body { grid-template-columns: 1fr; }
  .frame-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .frame-rail span { white-space: nowrap; }
  .frame-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .frame-split { grid-template-columns: 1fr; }
  table.board th, table.board td { padding: .65rem .7rem; }
  .board-hide-sm { display: none; }
}

/* ------------------------------------------------------ Collapse + fade ---- */

.collapse { position: relative; overflow: hidden; transition: max-height .65s cubic-bezier(.22,1,.36,1); }
.collapse.is-clipped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 55%, #000 100%);
  pointer-events: none; transition: opacity .45s ease;
}
.collapse.is-open::after { opacity: 0; }

.expand-row { display: flex; justify-content: center; margin-top: -2.4rem; position: relative; z-index: 2; }
.expand-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--s-2); color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.expand-btn:hover { background: var(--s-3); border-color: var(--line-3); transform: translateY(-1px); }
.expand-btn .caret { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); font-size: .7em; }
.expand-btn[aria-expanded=true] .caret { transform: rotate(180deg); }

/* Staggered reveal. Children lift in sequence rather than all at once. */
.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 45ms; }
.stagger.in > *:nth-child(3) { transition-delay: 90ms; }
.stagger.in > *:nth-child(4) { transition-delay: 135ms; }
.stagger.in > *:nth-child(5) { transition-delay: 180ms; }
.stagger.in > *:nth-child(6) { transition-delay: 225ms; }
.stagger.in > *:nth-child(7) { transition-delay: 270ms; }
.stagger.in > *:nth-child(8) { transition-delay: 315ms; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

.mkt-card { transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.mkt-card:hover { transform: translateY(-3px); }
.desk:hover { transform: translateY(-3px); }
.desk { transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.22,1,.36,1); }

/* ----------------------------------------------------------- Confirming ---- */

.confirm-box { margin-top: 1.35rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-2); padding: 1rem; }

.confirm-stages { display: grid; gap: .55rem; margin-bottom: 1rem; }
.confirm-stage { display: flex; align-items: center; gap: .65rem; font-size: .82rem; color: var(--fg-3); transition: color .3s ease; }
.confirm-stage .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); flex: 0 0 auto; position: relative; transition: border-color .3s ease, background .3s ease; }
.confirm-stage[data-state=doing] { color: var(--fg); }
.confirm-stage[data-state=doing] .dot { border-color: var(--fg); }
.confirm-stage[data-state=doing] .dot::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--fg);
  animation: pulse 1.1s ease-in-out infinite;
}
.confirm-stage[data-state=done] { color: var(--up); }
.confirm-stage[data-state=done] .dot { border-color: var(--up); background: var(--up); }
.confirm-stage[data-state=fail] { color: var(--down); }
.confirm-stage[data-state=fail] .dot { border-color: var(--down); background: var(--down); }

@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.conf-meter { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.conf-meter .pips { display: flex; gap: 3px; }
.conf-meter .pips i { width: 22px; height: 4px; border-radius: 2px; background: var(--s-4); display: block; transition: background .4s cubic-bezier(.22,1,.36,1); }
.conf-meter .pips i.on { background: var(--up); }
.conf-meter .txt { font-family: var(--mono); font-size: .76rem; color: var(--fg-2); }

.hashline { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; background: var(--s-1); border: 1px solid var(--line); border-radius: 6px; margin-bottom: .5rem; }
.hashline .k { font-size: .72rem; color: var(--fg-3); flex: 0 0 auto; }
.hashline .v { font-family: var(--mono); font-size: .76rem; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { flex: 0 0 auto; padding: .25rem .5rem; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--fg-3); font: inherit; font-size: .7rem; cursor: pointer; transition: all .2s ease; }
.copy-btn:hover { color: var(--fg); border-color: var(--line-3); }
.copy-btn.done { color: var(--up); border-color: rgba(63,185,80,.4); }

@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; transform: none; }
  .collapse { transition: none; }
}

/* ------------------------------------------------------------- Scenario ---- */

.scen-pick { display: grid; gap: .5rem; }
.scen-pick button { text-align: left; padding: .8rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--fg-2); font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.scen-pick button b { display: block; color: var(--fg); font-size: .88rem; font-weight: 600; margin-bottom: .15rem; }
.scen-pick button span { font-size: .76rem; color: var(--fg-3); line-height: 1.45; }
.scen-pick button[aria-pressed=true] { border-color: var(--line-3); background: var(--s-3); }

.scen-tag { font-size: .7rem; padding: .14rem .45rem; border-radius: 4px; border: 1px solid var(--line-2); color: var(--fg-3); }
.scen-tag.bull { color: var(--up); border-color: rgba(63,185,80,.35); }
.scen-tag.bear { color: var(--down); border-color: rgba(240,87,78,.35); }

/* --------------------------------------------------------------- Payment ---- */

.pay-assets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; margin-bottom: 1rem; }
.pay-asset { padding: .7rem .5rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--fg-2); font: inherit; cursor: pointer; text-align: center; transition: border-color .2s ease, background .2s ease; }
.pay-asset b { display: block; font-family: var(--mono); font-size: .85rem; color: var(--fg); }
.pay-asset span { font-size: .68rem; color: var(--fg-3); }
.pay-asset[aria-pressed=true] { border-color: var(--line-3); background: var(--s-3); }
.pay-asset:disabled { opacity: .35; cursor: not-allowed; }

.pay-nets { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pay-nets button { padding: .35rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--fg-3); font: inherit; font-size: .78rem; cursor: pointer; }
.pay-nets button[aria-pressed=true] { background: var(--s-3); color: var(--fg); border-color: var(--line-3); }

.pay-quote { background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem; margin-bottom: 1rem; }
.pay-due { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.pay-rate { font-size: .76rem; color: var(--fg-3); margin-top: .25rem; }
.pay-lock { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .76rem; color: var(--fg-3); }
.pay-lock .ring { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: pulse 1.6s ease-in-out infinite; }

.addr-box { background: var(--s-1); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: .85rem; margin-bottom: 1rem; }
.addr-box .k { font-size: .72rem; color: var(--fg-3); display: block; margin-bottom: .4rem; }
.addr-box input { font-family: var(--mono); font-size: .8rem; opacity: .55; cursor: not-allowed; }
.addr-note { font-size: .74rem; color: var(--fg-3); margin: .55rem 0 0; line-height: 1.5; }

@media (max-width: 640px) { .pay-assets { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.rail-admin { display: block; padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--warn); font-size: .875rem; text-decoration: none; }
.rail-admin:hover { background: rgba(255,255,255,.04); }

.ob-tabs { display: flex; gap: .4rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ob-tabs button { padding: .65rem 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--fg-3); font: inherit; font-size: .9rem; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.ob-tabs button:hover { color: var(--fg-2); }
.ob-tabs button[aria-pressed=true] { color: var(--fg); border-bottom-color: var(--fg); }