/* eResonate Media — revenue.css
   The Revenue Engine strip, the artist/venue split bar and the backstage
   session card, lifted from the platform's live.css and backstage.css when
   those blocks moved here on 20 Sep 2026.

   NOTE the two @media blocks at the foot. My first pass at this extraction
   pulled rules out of their media queries and stacked them flat, so
   `.es-grid { grid-template-columns: 1fr }` — the phone rule — sat last and
   won at every width. The strip rendered as one tall column on desktop. If
   more rules are ever lifted from those stylesheets, carry the query with
   them. */

/* Earnings strip */
.earnings-strip {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.07);
}
.es-head h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.es-head p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.es-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.es-card {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.es-card--artist { border-color: var(--border-accent); background: rgba(46, 92, 255, 0.06); }
.es-card--venue { border-color: rgba(62, 224, 140, 0.3); background: rgba(62, 224, 140, 0.05); }
.es-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.es-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.es-card--artist .es-num { color: var(--accent-text); }
.es-card--venue .es-num { color: var(--money); }
.es-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.25rem; }
.split-track {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}
.split-half { flex: 1; padding: 0.55rem; }
.split-artist { background: rgba(46, 92, 255, 0.25); color: color-mix(in srgb, #D9BAFF, black var(--ink-shift)); }
.split-venue { background: rgba(62, 224, 140, 0.18); color: var(--money); }
.split-caption {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.6rem;
}
/* Panels shared */
/* Glass over the backdrop photo. --bg-card is #0D1428 on dark and #FFFFFF on
   light, so one declaration gives the same 82% card on either side. */
.qa-panel, .bs-chat, .merch-panel, .session-rev {
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
}
/* Session revenue */
.session-rev {
  margin-top: 1.25rem;
  padding: 1.25rem 1.3rem;
  border-color: color-mix(in srgb, var(--money) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--money) 9%, transparent), color-mix(in srgb, var(--bg-card) 85%, transparent) 60%);
}
.sr-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.sr-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--money);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sr-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }

@media (max-width: 1024px) {
  .es-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .es-grid { grid-template-columns: 1fr; }
}

/* ---- the demo performance video -----------------------------------------
   A still page arguing about live music is a poor advert for live music, so
   the section opens with a show playing. It is the same file the platform's
   stage used; muted, looped and autoplaying, which browsers allow only while
   it stays muted. */
.rev-demo { margin: 0 0 3rem; }
.rev-stage {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #050A14;
  border: 1px solid var(--border-accent, rgba(46,92,255,.35));
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.rev-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev-stage-tag {
  position: absolute; top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  padding: .3rem .7rem; color: #fff;
  font: 800 .68rem/1 'Outfit', sans-serif; letter-spacing: .14em;
}
.rev-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF4438; }
.rev-h2 {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2rem 0 .6rem;
}
.rev-lede { color: var(--text-muted); max-width: 62ch; margin: 0 0 1.5rem; }
/* The session card was a sidebar item on backstage; here it is a full-width
   panel under the strip, so it loses the top margin it used in the column. */
.rev-demo .session-rev { margin-top: 1.25rem; }