/* eResonate — creators.css · the one page for artists and venues.
   Loads after calculator.css, which supplies the embedded earnings model's
   own styles. Prefixed .cr- so the two cannot collide. */

.cr-main { max-width: 1080px; margin: 0 auto; padding: calc(var(--nav-h) + 40px) 24px 0; }

/* ---------- hero ---------- */
.cr-hero { margin-bottom: 72px; }
.cr-title {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.035em;
  margin: 10px 0 14px; color: #fff; max-width: 16ch;
  text-wrap: balance;
}
.cr-sub {
  margin: 0 0 30px; color: var(--text-muted);
  font-size: 1.12rem; line-height: 1.6; max-width: 60ch;
}

/* role picker */
.cr-roles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.cr-role {
  appearance: none; text-align: left; cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  transition: border-color .16s, background .16s, transform .16s;
}
.cr-role:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.cr-role.on { border-color: var(--accent); background: rgba(46, 92, 255, .12); }
.cr-role-ico { font-size: 1.5rem; line-height: 1; flex: none; margin-top: 1px; }
.cr-role-txt b {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: #fff; margin-bottom: 4px;
}
.cr-role-txt small { display: block; color: var(--text-muted); font-size: .89rem; line-height: 1.5; }

.cr-cta { display: flex; gap: 11px; flex-wrap: wrap; }
.btn-lg { font-size: 1.02rem; padding: 15px 28px; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(255, 255, 255, .03); }
.cr-fine { margin: 14px 0 0; color: var(--text-dim); font-size: .88rem; }

/* ---------- shared section furniture ---------- */
.cr-main h2 {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.028em;
  line-height: 1.1; margin: 8px 0 16px; color: #fff;
  max-width: 20ch; text-wrap: balance;
}
.cr-band, .cr-how, .cr-setup, .cr-earn, .cr-close { margin-bottom: 72px; }

/* ---------- why live ---------- */
.cr-band-p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 62ch; margin: 0 0 30px; }
.cr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.cr-stats div {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.cr-stats b {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: 2.3rem; line-height: 1; letter-spacing: -.03em;
  color: var(--accent-text); margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.cr-stats span { color: var(--text-muted); font-size: .91rem; line-height: 1.5; }
.cr-quote {
  border-left: 2px solid var(--accent);
  padding-left: 20px; margin: 0;
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 1.18rem; line-height: 1.45; color: #fff;
  max-width: 56ch; letter-spacing: -.012em;
}

/* ---------- how it works / setup ---------- */
.cr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cr-steps li, .cr-step {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.cr-n {
  display: block;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .78rem;
  letter-spacing: .12em; color: var(--accent-text); margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.cr-steps b, .cr-step b {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.06rem; color: #fff; margin-bottom: 5px;
}
.cr-steps p, .cr-step p { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.6; max-width: 62ch; }
@media (min-width: 760px) { .cr-steps { grid-template-columns: repeat(3, 1fr); } }

.cr-setup-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- the embedded earnings model ---------- */
.cr-earn-p { color: var(--text-muted); font-size: .98rem; line-height: 1.65; max-width: 74ch; margin: 0 0 28px; }
/* calculator.css assumes it owns the page width; inside this one it does not */
.cr-earn .calc-main { padding-left: 0; padding-right: 0; max-width: none; }

/* ---------- close ---------- */
.cr-close {
  border-top: 1px solid var(--border);
  padding-top: 48px; padding-bottom: 40px;
}
.cr-close p { color: var(--text-muted); font-size: 1.05rem; margin: 0 0 24px; max-width: 56ch; }

@media (max-width: 620px) {
  .cr-main { padding: calc(var(--nav-h) + 24px) 16px 0; }
  .cr-stats b { font-size: 1.9rem; }
  .cr-quote { font-size: 1.05rem; padding-left: 15px; }
}

/* the claim context, when a venue page sent someone here to claim a room */
.cr-claim {
  border: 1px solid var(--border-accent);
  background: linear-gradient(180deg, rgba(46, 92, 255, .16), rgba(46, 92, 255, .05));
  border-radius: var(--radius);
  padding: 13px 17px; margin: 10px 0 4px;
  color: var(--text); font-size: .95rem; line-height: 1.5; max-width: 62ch;
}
.cr-claim b { color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; }