/* /credits - AI Credits hub: a mobile-first sell/infographic page for the hunt->earn->spend loop. */
.cr-wrap { max-width: 560px; margin: 0 auto; padding: 8px 18px 90px; }
.cr-wrap section { margin-top: 40px; }

/* shared */
.cr-h2 { font: 800 13px var(--font); text-transform: uppercase; letter-spacing: 1px; color: var(--text-md); text-align: center; margin: 0 0 22px; }
.cr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .12s, filter .15s;
}
.cr-cta:hover { transform: translateY(-1px); }
.cr-cta .mat-ic { font-size: 19px; }

.cr-whale { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(123,92,255,.35)); }

/* 1. HERO */
.cr-hero { text-align: center; padding: 24px 0 6px; }
.cr-hero-h { font: 900 38px/1.05 var(--font); letter-spacing: -1.2px; color: var(--text-hi); margin: 16px 0 0; }
.cr-grad { background: linear-gradient(95deg, #a78bff, #7b5cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cr-hero-sub { font-size: 15px; line-height: 1.55; color: var(--text-md); max-width: 420px; margin: 14px auto 22px; }

/* 2. YOUR CREDITS (dynamic) */
.cr-balance:empty { display: none; }
.cr-bal-card { background: var(--bg-card, #0c1017); border: 1px solid color-mix(in srgb, var(--purple,#7b5cff) 32%, var(--border)); border-radius: 18px; padding: 20px; }
.cr-bal-top { display: flex; align-items: baseline; gap: 10px; }
.cr-bal-num { display: inline-flex; align-items: center; gap: 7px; font: 900 34px var(--font); color: var(--text-hi); letter-spacing: -1px; }
.cr-tether { width: 26px; height: 26px; flex: none; display: block; }
.cr-bal-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-lo); }
.cr-bal-prog { margin: 16px 0 4px; }
.cr-bal-prog-row { display: flex; justify-content: space-between; font: 600 12px var(--mono); color: var(--text-md); margin-bottom: 6px; }
.cr-bal-bar { height: 8px; border-radius: 100px; background: var(--bg-card2, #11161f); overflow: hidden; }
.cr-bal-bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #7b5cff, #a78bff); transition: width .5s ease; }
.cr-bal-reset { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-lo); margin-top: 9px; }
.cr-bal-reset .mat-ic { font-size: 13px; }
.cr-bal-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; text-decoration: none; }
.cr-bal-cta .mat-ic { font-size: 16px; }
.cr-bal-guest { text-align: center; background: var(--bg-card, #0c1017); border: 1px solid var(--border); border-radius: 18px; padding: 24px 20px; }
.cr-bal-guest-h { font: 800 19px var(--font); color: var(--text-hi); }
.cr-bal-guest-sub { font-size: 13.5px; color: var(--text-md); line-height: 1.5; margin: 7px 0 18px; }

/* 3. THE LOOP */
.cr-steps { display: flex; flex-direction: column; align-items: center; }
.cr-step { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 420px; background: var(--bg-card, #0c1017); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.cr-step-ic { position: relative; flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--purple,#7b5cff) 14%, transparent); }
.cr-step-ic .mat-ic { font-size: 26px; color: var(--accent-2, #a78bff); }
.cr-step-n { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%; background: var(--purple, #7b5cff); color: #fff; font: 800 11px var(--mono); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.cr-step-body h3 { font: 800 16px var(--font); color: var(--text-hi); margin: 0 0 3px; }
.cr-step-body p { font-size: 13px; color: var(--text-md); line-height: 1.45; margin: 0; }
.cr-arrow { color: color-mix(in srgb, var(--purple,#7b5cff) 60%, var(--text-lo)); height: 26px; display: grid; place-items: center; }
.cr-arrow .mat-ic { font-size: 22px; }
.cr-loopback { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font: 700 12px var(--font); text-transform: uppercase; letter-spacing: .6px; color: var(--accent-2, #a78bff); }
.cr-loopback .mat-ic { font-size: 16px; }

/* 4. UNLOCK CARDS */
.cr-cards { display: grid; gap: 12px; }
.cr-card { position: relative; display: block; background: var(--bg-card, #0c1017); border: 1px solid var(--border); border-radius: 16px; padding: 20px; text-decoration: none; transition: border-color .15s, transform .12s; }
.cr-card:hover { border-color: color-mix(in srgb, var(--purple,#7b5cff) 45%, var(--border)); transform: translateY(-2px); }
.cr-card-ic { font-size: 30px; color: var(--accent-2, #a78bff); }
.cr-card-cost { position: absolute; top: 18px; right: 18px; font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .5px; color: var(--green, #4fb38f); background: color-mix(in srgb, var(--green,#4fb38f) 13%, transparent); padding: 4px 9px; border-radius: 100px; }
.cr-card h3 { font: 800 17px var(--font); color: var(--text-hi); margin: 12px 0 5px; }
.cr-card p { font-size: 13px; color: var(--text-md); line-height: 1.5; margin: 0; }

/* 5. HOW TO EARN */
.cr-earn { text-align: center; }
.cr-earn-lead { font: 600 17px/1.5 var(--font); color: var(--text-hi); max-width: 420px; margin: 0 auto 16px; }
.cr-earn-note { display: flex; align-items: flex-start; gap: 9px; text-align: left; max-width: 420px; margin: 0 auto 22px; background: var(--bg-card, #0c1017); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; font-size: 13px; color: var(--text-md); line-height: 1.5; }
.cr-earn-note .mat-ic { font-size: 18px; color: var(--accent-2, #a78bff); flex: none; margin-top: 1px; }

/* 6. FINAL */
.cr-final { text-align: center; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--purple,#7b5cff) 12%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--purple,#7b5cff) 22%, var(--border)); border-radius: 22px; padding: 34px 20px 28px; margin-top: 44px; }
.cr-whale-sm { font-size: 40px; }
.cr-final-h { font: 900 26px var(--font); letter-spacing: -.6px; color: var(--text-hi); margin: 12px 0 18px; }
.cr-skip { display: block; margin-top: 14px; font: 500 13px var(--font); color: var(--text-lo); text-decoration: none; }
.cr-skip:hover { color: var(--text-md); }

/* desktop: 2-col unlock cards, a touch more air */
@media (min-width: 600px) {
  .cr-cards { grid-template-columns: 1fr 1fr; }
  .cr-hero-h { font-size: 44px; }
}