PageSourceSearch

https://dtfan.itsalexmarques.chatgpt.site/

html dtfan.itsalexmarques.chatgpt.site collected 2026-10-03 03:59:05 UTC 79,471 bytes, 1,151 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/assets/index-nuX_G0lw.css" data-rsc-css-href="/assets/index-nuX_G0lw.css" data-precedence="vite-rsc/importer-resources"/><link rel="modulepreload" href="/assets/layout-segment-context-DKYboXdR.js" crossorigin=""/><link rel="modulepreload" href="/assets/rolldown-runtime-S-ySWqyJ.js" crossorigin=""/><link rel="modulepreload" href="/assets/index-zr180E2l.js" crossorigin=""/><link rel="modulepreload" href="/assets/framework-XU8gKkFC.js" crossorigin=""/><title>Direct-to-Fan Calculator</title><meta name="description" content="A private direct-to-fan revenue calculator for artists, teams, and labels."/><meta name="robots" content="noindex, nofollow, nocache"/><link rel="shortcut icon" href="/favicon.svg"/><link rel="icon" href="/favicon.svg"/>
1<script>self.__VINEXT_RSC_PARAMS__={}</script>
1<script>self.__VINEXT_RSC_NAV__={"pathname":"/","searchParams":[]}</script>
1<link rel="modulepreload" href="/assets/index-zr180E2l.js" />
2</head><body><style>
3    :root {
4      --bg: #0b0c10;
5      --panel: #111827;
6      --panel-soft: #020617;
7      --accent: #8b5cf6;
8      --spotify-green: #22c55e;
9      --text: #f9fafb;
10      --text-soft: #9ca3af;
11      --text-muted: #6b7280;
12      --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
13    }
14
15    * { box-sizing: border-box; }
16    .sr-only {
17      position: absolute;
18      width: 1px;
19      height: 1px;
20      padding: 0;
21      margin: -1px;
22      overflow: hidden;
23      clip: rect(0, 0, 0, 0);
24      white-space: nowrap;
25      border: 0;
26    }
27
28    .footer-text {
29  text-wrap: balance;
30}
31
32    body {
33      margin: 0;
34      padding: 24px;
35      min-height: 100vh;
36      font-family: var(--font-sans);
37      background: radial-gradient(circle at top left, #111827, #020617 55%);
38      color: var(--text);
39      display: flex;
40      justify-content: center;
41    }
42
43    .page {
44      max-width: 960px;
45      width: 100%;
46      background: linear-gradient(145deg, var(--panel-soft), var(--panel));
47      border-radius: 18px;
48      border: 1px solid rgba(148,163,184,0.25);
49      box-shadow:
50        0 32px 80px rgba(15,23,42,0.75),
51        0 0 0 1px rgba(15,23,42,0.85);
52      padding: 24px 24px 40px;
53    }
54
55    .page-header {
56      margin-bottom: 24px;
57      text-align: center;
58      display: flex;
59      flex-direction: column;
60      align-items: center;
61    }
62
63    .page-title {
64      font-size: 1.35rem;
65      text-transform: uppercase;
66      font-weight: 600;
67    }
68
69    .page-subtitle {
70      font-size: 0.92rem;
71      color: var(--text-soft);
72      max-width: 640px;
73      margin: 8px auto 0;
74    }
75
76    .layout {
77      display: grid;
78      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
79      gap: 20px;
80    }
81
82    /* Make left and right columns stretch evenly */
83    .layout > section {
84      display: flex;
85      flex-direction: column;
86    }
87
88    .layout > section:first-child .summary-card {
89      flex-grow: 1;
90      display: flex;
91      flex-direction: column;
92    }
93
94    .layout > section:last-child #proPlaceholder {
95      flex-grow: 1;
96      display: flex;
97      flex-direction: column;
98    }
99    .layout > section {
100  height: 100%;
101}
102
103@media(max-width:768px){
104  .layout { grid-template-columns: 1fr; }
105}
106
107    .summary-card,
108    .annual-card,
109    .spotify-card,
110    #proPlaceholder {
111      flex-grow: 1;
112    }
113
114    @media(max-width:768px){
115      .layout { grid-template-columns: 1fr; }
116    }
117
118    .card {
119      background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));
120      border-radius: 14px;
121      border: 1px solid rgba(31,41,55,0.9);
122      padding: 16px;
123      margin-bottom: 12px;
124    }
125
126    .card-title {
127      font-size: 0.86rem;
128      letter-spacing: 0.12em;
129      color: var(--text-soft);
130      text-transform: uppercase;
131      margin-bottom: 12px;
132    }
133
134    .card-subtext {
135      font-size: 0.70rem;
136      color: var(--text-muted);
137      margin-bottom: 10px;
138      margin-top: -2px;
139    }
140
141    .field-grid {
142      display: grid;
143      grid-template-columns: 1.1fr 0.9fr;
144      gap: 10px 12px;
145      align-items: center;
146      margin-bottom: 10px;
147    }
148    @media(max-width:640px){
149      .field-grid { grid-template-columns: 1fr; }
150    }
151
152    .field-label {
153      font-size: 0.8rem;
154      color: var(--text-soft);
155    }
156
157    .field-input {
158      width: 100%;
159      padding: 7px 10px;
160      border-radius: 8px;
161      border: 1px solid rgba(55,65,81,0.85);
162      background: rgba(15,23,42,0.9);
163      color: var(--text);
164      font-size: 0.85rem;
165    }
166    select.field-input {
167  appearance: none;
168  -webkit-appearance: none;
169  -moz-appearance: none;
170  cursor: pointer;
171  padding-right: 36px;
172  background-image:
173    linear-gradient(45deg, transparent 50%, rgba(156,163,175,0.9) 50%),
174    linear-gradient(135deg, rgba(156,163,175,0.9) 50%, transparent 50%);
175  background-position:
176    calc(100% - 18px) calc(50% - 3px),
177    calc(100% - 12px) calc(50% - 3px);
178  background-size: 6px 6px, 6px 6px;
179  background-repeat: no-repeat;
180}
181
182    .field-input.input-zero-placeholder {
183      color: var(--text-muted);
184    }
185
186    .input-prefix-wrap {
187      position: relative;
188      width: 100%;
189    }
190
191    .input-prefix-wrap .prefix {
192      position: absolute;
193      left: 10px;
194      top: 50%;
195      transform: translateY(-50%);
196      color: var(--text-soft);
197      font-size: 0.85rem;
198      pointer-events: none;
199    }
200
201    .prefix-input {
202      padding-left: 22px
203    }
204
205.platform-options {
206  display: flex;
207  gap: 6px;
208  justify-content: flex-start;
209}
210
211.platform-option input[type="radio"] {
212  display: none;
213}
214
215.platform-option label {
216  display: block;
217  padding: 6px 10px;
218  border-radius: 8px;
219  border: 1px solid rgba(55,65,81,0.85);
220  background: rgba(15,23,42,0.9);
221  color: var(--text-soft);
222  font-size: 0.72rem;
223  text-align: center;
224  cursor: pointer;
225  transition: all 0.2s ease;
226  line-height: 1.1;
227  white-space: nowrap;
228}
229
230@media (max-width: 420px) {
231  .platform-option label {
232    padding: 5px 8px;
233    font-size: 0.68rem;
234  }
235}
236
237.platform-option input[type="radio"]:checked + label {
238  background: rgba(139,92,246,0.2);
239  border-color: var(--accent);
240  color: var(--text);
241}
242
243.platform-note {
244  font-size: 0.7rem;
245  color: var(--text-muted);
246  margin-top: 4px;
247  line-height: 1.4;
248  font-style: italic;
249}
250
251    .outputs-grid {
252      display: grid;
253      grid-template-columns: repeat(2,minmax(0,1fr));
254      gap: 10px;
255      margin-top: 10px;
256    }
257
258    .output-box {
259      border: 1px solid rgba(55,65,81,0.95);
260      background: radial-gradient(circle at top left, rgba(148,163,184,0.18), rgba(15,23,42,0.98));
261      border-radius: 10px;
262      padding: 10px;
263    }
264
265    .output-label {
266      font-size: 0.75rem;
267      color: var(--text-soft);
268      text-transform: uppercase;
269    }
270
271    .output-value {
272      font-size: 1rem;
273      font-weight: 600;
274      white-space: normal;
275      word-break: break-word;
276    }
277
278    .output-muted-zero {
279      color: var(--text-muted);
280      font-weight: 500;
281    }
282
283    .summary-card {
284  margin-top: 0;
285  margin-bottom: 0;
286  border-radius: 12px;
287  border: 1px solid rgba(31,41,55,0.9);
288  background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));
289  padding: 16px 18px;
290  line-height: 1.45;
291  font-size: 0.75rem;
292  text-align: center;
293  flex-grow: 1;
294  display: flex;
295  flex-direction: column;
296  justify-content: center;
297
298  /* 👉 Add this */
299  min-height: 220px;
300}
301
302
303    #summaryText {
304      min-height: 55px;
305      display: block;
306    }
307
308    .summary-label {
309      font-size: 1.05rem;
310      color: var(--text);
311      font-weight: 600;
312      margin-bottom: 6px;
313      text-transform: none;
314      letter-spacing: 0;
315    }
316
317    .launch-fund-insight {
318      margin: 14px auto 0;
319      max-width: 420px;
320      border-top: 1px solid rgba(148,163,184,0.18);
321      padding-top: 14px;
322      text-align: center;
323    }
324
325    .launch-fund-label {
326      text-transform: uppercase;
327      letter-spacing: 0.08em;
328      color: var(--text-soft);
329      font-size: 0.72rem;
330      line-height: 1.35;
331      margin-bottom: 4px;
332    }
333
334    .launch-fund-value {
335      color: var(--text);
336      font-size: 1.15rem;
337      line-height: 1.25;
338      font-weight: 700;
339      margin-bottom: 3px;
340    }
341
342    .launch-fund-sub {
343      color: var(--text-muted);
344      font-size: 0.72rem;
345      line-height: 1.35;
346    }
347
348    .annual-card {
349      border-radius: 12px;
350      border: 1px solid rgba(55,65,81,0.95);
351      background: radial-gradient(circle at top left, rgba(22,163,74,0.16), rgba(15,23,42,0.98));
352      padding: 14px;
353      margin-bottom: 20px;
354    }
355
356    .annual-card .card-title,
357    .annual-card .card-subtext {
358      text-align: center;
359    }
360
361    .annual-grid {
362      display: grid;
363      grid-template-columns: repeat(2,minmax(0,1fr));
364      gap: 10px;
365      margin-top: 10px;
366    }
367
368    .annual-top-item {
369      border-radius: 10px;
370      padding: 10px 10px;
371      text-align: center;
372    }
373
374   .annual-bottom {
375  grid-column: 1 / -1;
376  border-radius: 10px;
377  padding: 8px 10px;
378  margin-top: 4px;
379  text-align: center;
380}
381
382.annual-bottom .annual-value {
383  margin-bottom: 6px; /* spacing between value + rate line */
384}
385
386.annual-bottom div[style*="font-size:0.7rem"] {
387  margin-top: 2px !important; /* ensures rate line isn’t glued to value */
388}
389
390
391    .annual-label {
392  font-size: 0.75rem;
393  color: var(--text-soft);
394  text-transform: uppercase;
395  margin-bottom: 6px; /* ← add spacing BELOW the label */
396}
397
398.annual-value {
399  font-size: 1rem;
400  font-weight: 600;
401  white-space: normal;
402  word-break: break-word;
403  margin-top: 2px; /* ← tiny extra padding above the value */
404}
405
406    .pro-card {
407      border-radius: 12px;
408      border: 1px solid rgba(55,65,81,0.6);
409      background: rgba(15,23,42,0.5);
410      padding: 14px;
411      text-align: center;
412      opacity: 1;
413      cursor: not-allowed;
414    }
415
416    #proPlaceholder {
417      padding: 16px;
418      margin-bottom: 0px;
419      border-radius: 14px;
420      border: 1px solid rgba(31,41,55,0.9);
421    }
422
423    #proPlaceholder.pro-active {
424      opacity: 1 !important;
425      cursor: default !important;
426    }
427
428    .pro-card.centered-placeholder {
429      display: flex;
430      flex-direction: column;
431      justify-content: center;
432      align-items: center;
433      min-height: 200px;
434      padding: 20px 14px;
435      position: relative;
436    }
437
438    .pro-card.centered-placeholder .pro-button {
439      cursor: pointer;
440      opacity: 1;
441      pointer-events: auto;
442    }
443
444    .pro-content {
445      flex-grow: 1;
446      display: flex;
447      flex-direction: column;
448      justify-content: center;
449      align-items: center;
450      text-align: center;
451    }
452
453    .pro-button {
454      padding: 10px 16px;
455      background: rgba(55,65,81,0.4);
456      border-radius: 8px;
457      color: var(--text-soft);
458      font-size: 0.85rem;
459      text-transform: uppercase;
460      letter-spacing: 0.08em;
461      border: 1px solid rgba(75,85,99,0.4);
462      display: inline-block;
463      cursor: pointer;
464    }
465
466    .pro-credit {
467      font-size: 0.65rem;
468      color: var(--text-muted);
469      opacity: 0.55;
470      margin-top: auto;
471    }
472
473    .spotify-card {
474      position: relative;
475      overflow: hidden;
476    }
477
478    .spotify-card .card-title {
479      text-align: center;
480      color: var(--spotify-green);
481    }
482
483    .spotify-inner {
484  filter: none;
485  opacity: 1;
486  pointer-events: auto;
487}
488
489    .spotify-card.open .spotify-inner {
490      filter: none;
491      opacity: 1;
492      pointer-events: auto;
493    }
494
495    .spotify-overlay {
496  position: absolute;
497  inset: 0;
498  background: rgba(15,23,42,0.78); /* clean dark layer */
499  backdrop-filter: blur(6px);       /* blur BEHIND the overlay */
500  -webkit-backdrop-filter: blur(6px);
501  display: flex;
502  flex-direction: column;
503  justify-content: center;
504  align-items: center;
505  text-align: center;
506  padding: 24px;
507  z-index: 10;
508  transition: opacity .25s ease;
509  border-radius: 14px; /* keeps it clean with your card edges */
510}
511
512
513    .spotify-card.open .spotify-overlay {
514      opacity: 0;
515      pointer-events: none;
516    }
517
518    .spotify-overlay-text {
519      font-size: 0.8rem;
520      color: var(--text-soft);
521      max-width: 260px;
522    }
523
524    .spotify-button {
525      padding: 8px 14px;
526      border-radius: 999px;
527      border: 1px solid rgba(148,163,184,0.7);
528      background: radial-gradient(circle at top left, rgba(148,163,184,0.25), rgba(15,23,42,1));
529      color: var(--text);
530      font-size: 0.8rem;
531      letter-spacing: 0.05em;
532      text-transform: uppercase;
533      cursor: pointer;
534      margin-top: 10px;
535      animation: pulse-glow 2.5s ease-in-out infinite;
536    }
537
538    @keyframes pulse-glow {
539      0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
540      55% { box-shadow: 0 0 12px 4px rgba(139,92,246,0.3); }
541    }
542
543    .spotify-small-label {
544      font-size: 0.75rem;
545      color: var(--text-soft);
546      margin-bottom: 4px;
547    }
548
549    .spotify-blurb {
550      margin-top: 8px;
551      font-size: 0.8rem;
552      color: var(--text-soft);
553      white-space: pre-line;
554      line-height: 1.4;
555      text-align: center;
556    }
557
558    .assumptions {
559      max-width: 740px;
560      margin: 32px auto 20px;
561      padding: 18px 20px;
562      background: radial-gradient(circle at top left, rgba(148,163,184,0.08), rgba(15,23,42,0.95));
563      border-radius: 12px;
564      border: 1px solid rgba(55,65,81,0.6);
565    }
566
567    .assumptions-title {
568      font-size: 0.88rem;
569      text-transform: uppercase;
570      letter-spacing: 0.08em;
571      color: var(--text-soft);
572      margin: 0 0 12px 0;
573      font-weight: 600;
574    }
575
576    .assumptions-list {
577      margin: 0;
578      padding-left: 20px;
579      font-size: 0.78rem;
580      color: var(--text-soft);
581      line-height: 1.6;
582    }
583
584    .assumptions-list li { margin-bottom: 8px; }
585
586    .assumptions a {
587      color: #c4b5fd;
588      font-weight: 600;
589      text-decoration: underline;
590      text-decoration-color: rgba(196,181,253,0.75);
591      text-underline-offset: 3px;
592    }
593
594    .assumptions a:hover,
595    .assumptions a:focus {
596      color: #ddd6fe;
597      text-decoration-color: #ddd6fe;
598    }
599    .assumptions-list li:last-child { margin-bottom: 0; }
600    .assumptions-list strong { color: var(--text); font-weight: 600; }
601
602    .pro-mode-section {
603      display: none;
604      opacity: 0;
605      max-height: 0;
606      overflow: hidden;
607      transition: opacity 0.3s ease, max-height 0.3s ease;
608    }
609
610    .pro-mode-section.active {
611  display: grid;
612  grid-template-columns: repeat(2, minmax(0, 1fr));
613  gap: 20px;
614  opacity: 1;
615  max-height: 2000px;
616  max-width: 960px;
617  margin: 20px auto 20px; /* Changed from 20px to 32px for more space */
618}
619
620    @media(max-width:768px){
621      .pro-mode-section.active { grid-template-columns: 1fr; }
622    }
623
624  .pro-mode-section .pro-card {
625  background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));
626  border-radius: 14px;
627  border: 1px solid rgba(139,92,246,0.3);
628  padding: 18px;
629  margin-bottom: 0;
630  cursor: default;
631}
632
633    .pro-card-title {
634      font-size: 0.88rem;
635      letter-spacing: 0.1em;
636      color: var(--accent);
637      text-transform: uppercase;
638      margin-bottom: 12px;
639      font-weight: 600;
640      text-align: center;
641    }
642
643    .recoup-grid,
644    .unit-econ-grid {
645      display: grid;
646      grid-template-columns: repeat(2, minmax(0, 1fr));
647      gap: 10px;
648      margin-top: 10px;
649    }
650
651    .pro-note {
652      font-size: 0.72rem;
653      color: var(--text-muted);
654      margin-top: 10px;
655      line-height: 1.4;
656      font-style: italic;
657      text-align: center;
658    }
659
660    .unit-status-banner {
661      margin-top: 12px;
662      padding: 14px;
663      border-radius: 10px;
664      text-align: center;
665      font-size: 0.9rem;
666      font-weight: 600;
667      text-transform: none;
668      letter-spacing: 0.02em;
669      line-height: 1.4;
670    }
671
672    .unit-status-banner.good {
673      background: rgba(16,185,129,0.18);
674      border: 1px solid rgba(16,185,129,0.45);
675      color: #34d399;
676    }
677
678    .unit-status-banner.warning {
679      background: rgba(245,158,11,0.15);
680      border: 1px solid rgba(245,158,11,0.45);
681      color: #fbbf24;
682    }
683
684    .unit-status-banner.bad {
685      background: rgba(239,68,68,0.15);
686      border: 1px solid rgba(239,68,68,0.45);
687      color: #f87171;
688    }
689
690    .disclaimer {
691      font-size: 0.7rem;
692      color: var(--text-muted);
693      margin-top: 20px;
694      text-align: center;
695      line-height: 1.5;
696      opacity: 0.8;
697      max-width: 640px;
698      margin-left: auto;
699      margin-right: auto;
700    }
701
702    .pro-active-title {
703      font-size: 1.2rem;
704      font-weight: 700;
705      color: var(--accent);
706      margin-bottom: 10px;
707      text-transform: uppercase;
708      text-align: center;
709    }
710
711    .pro-active-text {
712      font-size: 0.85rem;
713      color: var(--text);
714      text-align: center;
715      opacity: 0.9;
716      max-width: 300px;
717      margin: 0 auto;
718      line-height: 1.5;
719    }
720  </style><div><main class="page">
721    <header class="page-header">
722      <h1 class="page-title" data-i18n="ui.pageTitle">Direct-to-Fan Mini Calculator</h1>
723
724      <p class="page-subtitle" data-i18n="ui.pageSubtitle">
725        Drop in your IG follower count, the % of fans you think would support your first release,
726        and a base price for your release.
727      </p>
728
729      <p
730        id="pageKicker"
731        style="font-size:0.78rem;color:#9ca3af;margin-top:8px;max-width:640px;text-align:center;"
732        data-i18n="ui.pageKicker"
733      >
734        Even 5–10% of fans can make a meaningful difference. At a glance, these numbers show what’s possible with an active community — not just a high follower count.
735      </p>
736    </header>
737
738    <section class="layout">
739      <!-- LEFT -->
740      <section>
741        <div class="card">
742          <h2 class="card-title" style="text-align:center; margin-bottom:12px;" data-i18n="ui.inputsTitle">
743            Inputs
744          </h2>
745
746          <div class="field-grid">
747            <label class="field-label" for="followers" data-i18n="ui.igFollowersLabel">IG Followers</label>
748            <input id="followers" class="field-input" type="text" value="1,234" />
749
750            <label class="field-label" for="percent" data-i18n="ui.percentFansLabel">% of Fans</label>
751            <input id="percent" class="field-input" type="text" value="5" inputmode="decimal" />
752
753            <!-- COUNTRY / LANGUAGE BUTTONS (UNDER % OF FANS) -->
754<label class="field-label" for="countrySelect" data-i18n="ui.countryLabel">Country</label>
755<select id="countrySelect" class="field-input">
756  <option value="en" selected>United States (US)</option>
757  <option value="en-CA">Canada (CA)</option>
758  <option value="en-GB">United Kingdom (UK)</option>
759  <option value="en-AU">Australia (AU)</option>
760  <option value="fr-FR">France (FR)</option>
761  <option value="it-IT">Italy (IT)</option>
762  <option value="pt-PT">Portugal (PT)</option>
763  <option value="de-DE">Germany (DE)</option>
764  <option value="es-ES">Spain (ES)</option>
765  <option value="es-MX">Mexico (MX)</option>
766  <option value="pt-BR">Brazil (BR)</option>
767</select>
768
769
770            <label class="field-label" for="basePrice" data-i18n="ui.basePriceLabel">Base Price</label>
771            <div class="input-prefix-wrap">
772              <span class="prefix" id="currencyPrefix"></span>
773              <input id="basePrice" class="field-input prefix-input" type="text" value="7.99" />
774            </div>
775
776            <label class="field-label" data-i18n="ui.platformLabel">Platform</label>
777            <div class="platform-options">
778              <div class="platform-option">
779                <input type="radio" id="platformEven" name="platform" value="even" checked />
780                <label for="platformEven">EVEN</label>
781              </div>
782
783              <div class="platform-option">
784                <input type="radio" id="platformSingle" name="platform" value="single" />
785                <label for="platformSingle" data-i18n="ui.platformSingleLabel">Single* / Bandcamp</label>
786              </div>
787            </div>
788          </div>
789
790          <div class="platform-note" data-i18n="ui.platformNote">
791            * Single runs on Shopify and requires an active subscription (monthly fees not factored in). Single &amp; Bandcamp take ~15% on digital.
792          </div>
793
794          <div class="outputs-grid">
795            <div class="output-box">
796              <div class="output-label" data-i18n="ui.directSupportersLabel">Direct Supporters</div>
797              <div id="fansOutput" class="output-value">0</div>
798            </div>
799
800            <div class="output-box">
801              <div class="output-label" data-i18n="ui.communityValueLabel">Community Value</div>
802              <div id="grossOutput" class="output-value">0</div>
803            </div>
804
805            <div class="output-box">
806              <div class="output-label" data-i18n="ui.youKeepLabel">You Keep</div>
807              <div id="netOutput" class="output-value">0</div>
808            </div>
809
810            <div class="output-box">
811              <div class="output-label" data-i18n="ui.spotifyEquivalentLabel">Spotify Equivalent</div>
812              <div id="streamsOutput" class="output-value">0</div>
813            </div>
814          </div>
815        </div>
816
817        <div class="summary-card">
818          <div style="flex:1; display:flex; flex-direction:column; justify-content:center; padding:10px 0;">
819            <div class="summary-label" style="margin-bottom:12px;" data-i18n="ui.inShortLabel">In short:</div>
820            <div id="summaryText" style="margin-bottom:18px; text-align:center;"></div>
821            <div class="launch-fund-insight">
822              <div class="launch-fund-label" data-i18n="ui.launchCanFundLabel">This Release Can Fund</div>
823              <div class="launch-fund-value" id="launchCanFundOutput">0</div>
824              <div class="launch-fund-sub" data-i18n="ui.launchCanFundSub">For promo, marketing, ads, merch, or the next release.</div>
825            </div>
826          </div>
827        </div>
828      </section>
829
830      <!-- RIGHT -->
831      <section>
832        <div class="annual-card">
833          <h2 class="card-title" data-i18n="ui.annualTitle">Annualized Snapshot</h2>
834          <div class="card-subtext" data-i18n="ui.annualSubtext">
835            Assumes roughly the same % of new people buy each month, capped at 100% total reach.
836          </div>
837
838          <div class="annual-grid">
839            <div class="annual-top-item">
840              <div class="annual-label" data-i18n="ui.annualGrossLabel">Annual Gross</div>
841              <div id="annualGrossOutput" class="annual-value">0</div>
842            </div>
843
844            <div class="annual-top-item">
845              <div class="annual-label" data-i18n="ui.annualNetLabel">Annual Net</div>
846              <div id="annualNetOutput" class="annual-value">0</div>
847            </div>
848
849            <div class="annual-bottom">
850              <div class="annual-label" data-i18n="ui.annualSpotifyEquivalentLabel">Annual Spotify Equivalent</div>
851              <div id="annualStreamsOutput" class="annual-value">0</div>
852              <div id="streamRateNote" style="font-size:0.7rem;color:var(--text-muted);">
853  
854</div>
855            </div>
856          </div>
857        </div>
858
859        <div class="card spotify-card" id="spotifyCard">
860          <h2 class="card-title" data-i18n="ui.spotifyComparisonTitle">Spotify Comparison</h2>
861
862          <div class="spotify-overlay">
863            <p class="spotify-overlay-text" data-i18n="ui.spotifyOverlayText">
864              Add your annual Spotify streams to compare your year of streaming income with what your own community can generate directly.
865            </p>
866            <button type="button" class="spotify-button" id="spotifyToggle" data-i18n="ui.spotifyToggleButton">
867              I know my Spotify numbers
868            </button>
869          </div>
870
871          <div class="spotify-inner">
872            <div class="field-grid" style="margin-bottom: 10px;">
873              <div>
874                <div class="spotify-small-label" data-i18n="ui.spotifyStreamsLabel">Spotify streams (last 12 months)</div>
875                <input id="spotifyStreams" class="field-input input-zero-placeholder" type="text" value="0" />
876              </div>
877              <div>
878                <div class="spotify-small-label" data-i18n="ui.spotifyIncomeLabel">Approx. Spotify income</div>
879                <div id="spotifyIncomeOutput" class="output-value output-muted-zero">0</div>
880              </div>
881            </div>
882
883            <div id="spotifyBlurb" class="spotify-blurb" data-i18n="ui.spotifyBlurbDefault">
884              Add your annual Spotify streams (and make sure your IG %, price, and followers are set) to see how this compares.
885            </div>
886          </div>
887        </div>
888
889        <div class="pro-card centered-placeholder" id="proPlaceholder">
890          <div class="pro-content" id="proContent">
891            <div class="pro-button" data-i18n="ui.proModeButton">Pro Mode (coming soon)</div>
892
893            <p
894              style="
895                font-size:0.75rem;
896                margin-top:10px;
897                color:var(--text-soft);
898                max-width:240px;
899                margin-left:auto;
900                margin-right:auto;
901              "
902              data-i18n="ui.proModeTeaser"
903            >
904              Includes deeper breakdowns for fan value, recoupment, and early unit-economics modeling.
905            </p>
906          </div>
907        </div>
908      </section>
909    </section>
910
911    <!-- PRO MODE SECTION -->
912    <div class="pro-mode-section" id="proModeSection">
913      <div class="pro-card">
914        <h3 class="pro-card-title" data-i18n="ui.proFanValueTitle">Fan Value Snapshot</h3>
915
916        <div class="outputs-grid">
917          <div class="output-box">
918            <div class="output-label" data-i18n="ui.proDirectValueLabel">Direct Value (Net)</div>
919            <div id="fanValueDirect" class="output-value">0</div>
920          </div>
921
922          <div class="output-box">
923            <div class="output-label" data-i18n="ui.proSpotifyValueLabel">Spotify Value</div>
924            <div id="fanValueSpotify" class="output-value">0</div>
925          </div>
926
927          <div class="output-box">
928            <div class="output-label" data-i18n="ui.proValueMultipleLabel">Value Multiple</div>
929            <div id="fanValueMultiple" class="output-value">–</div>
930          </div>
931
932          <div class="output-box">
933            <div class="output-label" data-i18n="ui.proBreakEvenLabel">Break-Even CAC</div>
934            <div id="fanValueBreakEven" class="output-value">0</div>
935          </div>
936        </div>
937
938        <p class="pro-note" data-i18n="ui.proFanValueNote">
939          Direct = estimated net per sale. Spotify value and break-even spend are modeled privately server-side.
940        </p>
941      </div>
942
943      <div class="pro-card">
944        <h3 class="pro-card-title" data-i18n="ui.proRecoupTitle">Recoupment Calculator</h3>
945
946        <div class="field-grid">
947          <label class="field-label" for="projectCost" data-i18n="ui.projectCostLabel">Project Cost/Advance</label>
948          <div class="input-prefix-wrap">
949           <span class="prefix" id="currencyPrefix2"></span>
950            <input id="projectCost" class="field-input prefix-input" type="number" value="0" min="0" />
951          </div>
952
953          <label class="field-label" for="labelCut" data-i18n="ui.labelCutLabel">Label/Distro Cut (%)</label>
954          <input id="labelCut" class="field-input" type="number" value="0" min="0" max="100" />
955        </div>
956
957        <div class="recoup-grid">
958          <div class="output-box">
959            <div class="output-label" data-i18n="ui.salesNeededLabel">Sales Needed</div>
960            <div id="proSalesNeeded" class="output-value">0</div>
961          </div>
962
963          <div class="output-box">
964            <div class="output-label" data-i18n="ui.percentAudienceLabel">% of Audience</div>
965            <div id="proAudiencePercent" class="output-value">0%</div>
966          </div>
967
968          <div class="output-box">
969            <div class="output-label" data-i18n="ui.proSpotifyEquivLabel">Spotify Equivalent</div>
970            <div id="proSpotifyEquiv" class="output-value">0</div>
971          </div>
972
973          <div class="output-box">
974            <div class="output-label" data-i18n="ui.proYouKeepLabel">You Keep</div>
975            <div id="proNetAfterCut" class="output-value">0</div>
976          </div>
977        </div>
978
979        <p class="pro-note" id="proRecoupNote" data-i18n="ui.proRecoupHint">
980          Enter a project cost or advance amount to see recoupment calculations.
981        </p>
982      </div>
983
984      <div class="pro-card">
985        <h3 class="pro-card-title" data-i18n="ui.proUnitEconTitle">Unit Economics</h3>
986
987        <div class="unit-econ-grid">
988          <div class="output-box">
989            <div class="output-label" data-i18n="ui.convRateLabel">Conversion Rate</div>
990            <div class="output-value">Modeled</div>
991          </div>
992
993          <div class="output-box">
994            <div class="output-label" data-i18n="ui.cpcLabel">CPC</div>
995            <div class="output-value">Modeled</div>
996          </div>
997
998          <div class="output-box">
999            <div class="output-label" data-i18n="ui.netPerSaleLabel">You Keep (Net per sale)</div>
1000            <div id="proNetPerSale" class="output-value">0</div>
1001          </div>
1002
1003          <div class="output-box">
1004            <div class="output-label" data-i18n="ui.ltvCacLabel">LTV:CAC Ratio (2 purchases)</div>
1005            <div id="proLTVCAC" class="output-value">0.0×</div>
1006          </div>
1007        </div>
1008
1009        <div class="unit-status-banner good" id="proStatusBanner">
1010          <span id="proStatus" data-i18n="ui.statusGood">✓ Profitable — Scalable With Paid Ads</span>
1011        </div>
1012
1013        <p class="pro-note" data-i18n="ui.proUnitEconNote">
1014          Uses illustrative paid-growth assumptions. Results will vary by artist, creative, audience, and targeting.
1015        </p>
1016      </div>
1017    </div>
1018
1019    <div class="assumptions">
1020  <h3 class="assumptions-title" data-i18n="ui.assumptionsTitle">Assumptions &amp; Notes</h3>
1021  <ul class="assumptions-list">
1022
1023    <li data-i18n="ui.assumption1">
1024      <strong>Community First:</strong>
1025      This model assumes trust and engagement already exist. It’s not about squeezing more out of an audience — it’s about serving the people who already care about your music.
1026    </li>
1027
1028    <li data-i18n="ui.assumption2">
1029      <strong>Directional, Not Predictive:</strong>
1030      These projections are simplified and don’t guarantee performance. Real results vary by creative, audience health, timing, and rollout.
1031    </li>
1032
1033    <li data-i18n="ui.assumption3">
1034      <strong>Supporter %:</strong>
1035      Some campaigns may target 5–15% of engaged followers converting into first-release supporters. Adjust based on audience trust and engagement.
1036    </li>
1037
1038    <li data-i18n="ui.assumption4">
1039      <strong>Base Price:</strong>
1040      Chart reporting rules can include pricing, bundle, format, and distributor-delivery requirements. If chart eligibility matters, verify the current rules with the relevant chart body.
1041    </li>
1042
1043    <li data-i18n="ui.assumption5">
1044      <strong>Platform Fees:</strong>
1045      This model uses 20% for EVEN and ~15% for Bandcamp/Single digital sales as directional platform-fee assumptions. Shopify processing, subscriptions, caps, product type, taxes, and current platform terms can change the actual net.
1046    </li>
1047
1048    <li data-i18n="ui.assumption6">
1049      <strong>Spotify Rate:</strong>
1050      Streaming value is estimated with a private directional benchmark; actual payouts vary widely by territory, listener plan, and distribution terms.
1051    </li>
1052
1053    <li data-i18n="ui.assumption7">
1054      <strong>Direct + Streaming:</strong>
1055      These approaches aren’t mutually exclusive—you can (and should) do both.
1056    </li>
1057
1058  </ul>
1059</div>
1060
1061    <div
1062      style="
1063        max-width: 720px;
1064        margin: 28px auto 16px;
1065        padding: 14px 12px 12px;
1066        border-radius: 10px;
1067        background: rgba(15,23,42,0.6);
1068        border: 1px solid rgba(148,163,184,0.18);
1069        text-align: center;
1070      "
1071      >
1072      <p class="sr-only">
1073        This is not affiliated with, endorsed by, or officially connected to any third-party platform or brand referenced in the comparison.
1074      </p>
1075
1076      <div
1077        style="
1078          font-size: 0.65rem;
1079          text-transform: uppercase;
1080          letter-spacing: 0.08em;
1081          color: #9ca3af;
1082          margin-bottom: 6px;
1083        "
1084        data-i18n="ui.platformsReferenced"
1085      >
1086        Platforms Referenced
1087      </div>
1088
1089      <div style="font-size: 0.8rem; color: #e5e7eb;">
1090        <a
1091          href="https://even.biz"
1092          target="_blank"
1093          rel="noopener nofollow"
1094          aria-label="EVEN external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by EVEN."
1095          title="External reference; independent calculator, not affiliated."
1096          style="color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;"
1097        >EVEN</a>
1098        <span style="opacity:0.4;"> · </span>
1099
1100        <a
1101          href="https://singlemusic.co"
1102          target="_blank"
1103          rel="noopener nofollow"
1104          aria-label="Single external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by Single."
1105          title="External reference; independent calculator, not affiliated."
1106          style="color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;"
1107        >Single</a>
1108        <span style="opacity:0.4;"> · </span>
1109
1110        <a
1111          href="https://bandcamp.com"
1112          target="_blank"
1113          rel="noopener nofollow"
1114          aria-label="Bandcamp external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by Bandcamp."
1115          title="External reference; independent calculator, not affiliated."
1116          style="color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;"
1117        >Bandcamp</a>
1118      </div>
1119    </div>
1120
1121    <div style="max-width: 720px; margin: 36px auto 0; text-align: center;">
1122      <div style="max-width: 560px; margin: 0 auto;">
1123        <p
1124          style="
1125            font-size:0.78rem;
1126            color:#9ca3af;
1127            line-height:1.6;
1128            margin-bottom:22px;
1129            max-width:560px;
1130            margin-left:auto;
1131            margin-right:auto;
1132          "
1133          data-i18n="ui.footerPitch"
1134        >
1135          This mini calculator is a simplified version of a larger rollout, revenue, and community model I build with artists, teams, and labels. I’m always happy to collaborate on deeper, customized versions of this work—or more broadly across strategy, releases, and direct-to-fan execution.
1136        </p>
1137
1138        <p style="font-size:0.70rem; color:#6b7280;">
1139          <span data-i18n="ui.builtBy">Built by</span>
1140          <a
1141            href="https://www.instagram.com/its.alexmarques/"
1142            target="_blank"
1143            rel="noopener"
1144            style="color:#6b7280;text-decoration:underline;text-underline-offset:3px;"
1145          >
1146            Alex Marques
1147          </a>
1148        </p>
1149      </div>
1150    </div>
1151  </main></div>
1151<script src="/calculator-i18n.js" defer=""></script>
1151<script src="/calculator-client.js" defer=""></script>
1151<script id="_R_">import("/assets/index-zr180E2l.js")</script>
1151<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a449082f2a842c83',t:'MTc5MDk5OTk0Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1151</body></html>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("2:I[\"752415709cd7\",[],\"Children\",1]\n3:I[\"3c1a6b559290\",[],\"LayoutSegmentProvider\",1]\n4:I[\"752415709cd7\",[],\"Slot\",1]\n5:I[\"fa2fcf37606f\",[],\"RedirectBoundary\",1]\n:HL[\"/assets/index-nuX_G0lw.css\",\"style\"]\n0:{\"__route\":\"route:/\",\"__interceptionContext\":null,\"__layoutIds\":[\"layout:/\"],\"__rootLayout\":\"/\",\"page:/\":\"$L1\",\"layout:/\":[[[[\"$\",\"link\",\"css:/assets/index-nuX_G0lw.css\",{\"rel\":\"stylesheet\",\"precedence\":\"vite-rsc/importer-resources\",\"href\":\"/assets/index-nuX_G0lw.css\",\"data-rsc-css-href\":\"/assets/index-nuX_G0lw.css\"}],\"$undefined\"],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{}]}]}]],null],\"route:/\":[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],[[\"$\",\"title\",\"0\",{\"children\":\"Direct-to-Fan Calculator\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A private direct-to-fan revenue calculator for artists, teams, and labels.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"noindex, nofollow, nocache\"}],[\"$\",\"link\",\"3\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.svg\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\"}]],[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]],[\"$\",\"$L3\",null,{\"segmentMap\":{\"children\":[]},\"children\":[\"$\",\"$L4\",null,{\"id\":\"layout:/\",\"parallelSlots\":\"$undefined\",\"children\":[\"$\",\"$L5\",null,{\"children\":[\"$\",\"$L3\",null,{\"segmentMap\":{\"children\":[]},\"children\":[\"$\",\"$L4\",null,{\"id\":\"page:/\"}]}]}]}]}]],\"__layoutFlags\":{\"layout:/\":\"s\"},\"__artifactCompatibility\":{\"schemaVersion\":1,\"graphVersion\":\"app-route-graph:4uhn5s1wvoptc\",\"deploymentVersion\":\"0e0162cb-faf6-4244-b01a-353fc901b875\",\"appElementsSchemaVersion\":1,\"rscPayloadSchemaVersion\":1,\"rootBoundaryId\":\"/\",\"renderEpoch\":null}}\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("6:T3e08,\n    :root {\n      --bg: #0b0c10;\n      --panel: #111827;\n      --panel-soft: #020617;\n      --accent: #8b5cf6;\n      --spotify-green: #22c55e;\n      --text: #f9fafb;\n      --text-soft: #9ca3af;\n      --text-muted: #6b7280;\n      --font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    }\n\n    * { box-sizing: border-box; }\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .footer-text {\n  text-wrap: balance;\n}\n\n    body {\n      margin: 0;\n      padding: 24px;\n      min-height: 100vh;\n      font-family: var(--font-sans);\n      background: radial-gradient(circle at top left, #111827, #020617 55%);\n      color: var(--text);\n      display: flex;\n      justify-content: center;\n    }\n\n    .page {\n      max-width: 960px;\n      width: 100%;\n      background: linear-gradient(145deg, var(--panel-soft), var(--panel));\n      border-radius: 18px;\n      border: 1px solid rgba(148,163,184,0.25);\n      box-shadow:\n        0 32px 80px rgba(15,23,42,0.75),\n        0 0 0 1px rgba(15,23,42,0.85);\n      padding: 24px 24px 40px;\n    }\n\n    .page-header {\n      margin-bottom: 24px;\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .page-title {\n      font-size: 1.35rem;\n      text-transform: uppercase;\n      font-weight: 600;\n    }\n\n    .page-subtitle {\n      font-size: 0.92rem;\n      color: var(--text-soft);\n      max-width: 640px;\n      margin: 8px auto 0;\n    }\n\n    .layout {\n      display: grid;\n      grid-template-columns: minmax(0,1fr) minmax(0,1fr);\n      gap: 20px;\n    }\n\n    /* Make left and right columns stretch evenly */\n    .layout \u003e section {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .layout \u003e section:first-child .summary-card {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .layout \u003e section:last-child #proPlaceholder {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n    }\n    .layout \u003e section {\n  height: 100%;\n}\n\n@media(max-width:768px){\n  .layout { grid-template-columns: 1fr; }\n}\n\n    .summary-card,\n    .annual-card,\n    .spotify-card,\n    #proPlaceholder {\n      flex-grow: 1;\n    }\n\n    @media(max-width:768px){\n      .layout { grid-template-columns: 1fr; }\n    }\n\n    .card {\n      background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));\n      border-radius: 14px;\n      border: 1px solid rgba(31,41,55,0.9);\n      padding: 16px;\n      margin-bottom: 12px;\n    }\n\n    .card-title {\n      font-size: 0.86rem;\n      letter-spacing: 0.12em;\n      color: var(--text-soft);\n      text-transform: uppercase;\n      margin-bottom: 12px;\n    }\n\n    .card-subtext {\n      font-size: 0.70rem;\n      color: var(--text-muted);\n      margin-bottom: 10px;\n      margin-top: -2px;\n    }\n\n    .field-grid {\n      display: grid;\n      grid-template-columns: 1.1fr 0.9fr;\n      gap: 10px 12px;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n    @media(max-width:640px){\n      .field-grid { grid-template-columns: 1fr; }\n    }\n\n    .field-label {\n      font-size: 0.8rem;\n      color: var(--text-soft);\n    }\n\n    .field-input {\n      width: 100%;\n      padding: 7px 10px;\n      border-radius: 8px;\n      border: 1px solid rgba(55,65,81,0.85);\n      background: rgba(15,23,42,0.9);\n      color: var(--text);\n      font-size: 0.85rem;\n    }\n    select.field-input {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  cursor: pointer;\n  padding-right: 36px;\n  background-image:\n    linear-gradient(45deg, transparent 50%, rgba(156,163,175,0.9) 50%),\n    linear-gradient(135deg, rgba(156,163,175,0.9) 50%, transparent 50%);\n  background-position:\n    calc(100% - 18px) calc(50% - 3px),\n    calc(100% - 12px) calc(50% - 3px);\n  background-size: 6px 6px, 6px 6px;\n  background-repeat: no-repeat;\n}\n\n    .field-input.input-zero-placeholder {\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("      color: var(--text-muted);\n    }\n\n    .input-prefix-wrap {\n      position: relative;\n      width: 100%;\n    }\n\n    .input-prefix-wrap .prefix {\n      position: absolute;\n      left: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      color: var(--text-soft);\n      font-size: 0.85rem;\n      pointer-events: none;\n    }\n\n    .prefix-input {\n      padding-left: 22px\n    }\n\n.platform-options {\n  display: flex;\n  gap: 6px;\n  justify-content: flex-start;\n}\n\n.platform-option input[type=\"radio\"] {\n  display: none;\n}\n\n.platform-option label {\n  display: block;\n  padding: 6px 10px;\n  border-radius: 8px;\n  border: 1px solid rgba(55,65,81,0.85);\n  background: rgba(15,23,42,0.9);\n  color: var(--text-soft);\n  font-size: 0.72rem;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n\n@media (max-width: 420px) {\n  .platform-option label {\n    padding: 5px 8px;\n    font-size: 0.68rem;\n  }\n}\n\n.platform-option input[type=\"radio\"]:checked + label {\n  background: rgba(139,92,246,0.2);\n  border-color: var(--accent);\n  color: var(--text);\n}\n\n.platform-note {\n  font-size: 0.7rem;\n  color: var(--text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n  font-style: italic;\n}\n\n    .outputs-grid {\n      display: grid;\n      grid-template-columns: repeat(2,minmax(0,1fr));\n      gap: 10px;\n      margin-top: 10px;\n    }\n\n    .output-box {\n      border: 1px solid rgba(55,65,81,0.95);\n      background: radial-gradient(circle at top left, rgba(148,163,184,0.18), rgba(15,23,42,0.98));\n      border-radius: 10px;\n      padding: 10px;\n    }\n\n    .output-label {\n      font-size: 0.75rem;\n      color: var(--text-soft);\n      text-transform: uppercase;\n    }\n\n    .output-value {\n      font-size: 1rem;\n      font-weight: 600;\n      white-space: normal;\n      word-break: break-word;\n    }\n\n    .output-muted-zero {\n      color: var(--text-muted);\n      font-weight: 500;\n    }\n\n    .summary-card {\n  margin-top: 0;\n  margin-bottom: 0;\n  border-radius: 12px;\n  border: 1px solid rgba(31,41,55,0.9);\n  background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));\n  padding: 16px 18px;\n  line-height: 1.45;\n  font-size: 0.75rem;\n  text-align: center;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  /* 👉 Add this */\n  min-height: 220px;\n}\n\n\n    #summaryText {\n      min-height: 55px;\n      display: block;\n    }\n\n    .summary-label {\n      font-size: 1.05rem;\n      color: var(--text);\n      font-weight: 600;\n      margin-bottom: 6px;\n      text-transform: none;\n      letter-spacing: 0;\n    }\n\n    .launch-fund-insight {\n      margin: 14px auto 0;\n      max-width: 420px;\n      border-top: 1px solid rgba(148,163,184,0.18);\n      padding-top: 14px;\n      text-align: center;\n    }\n\n    .launch-fund-label {\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--text-soft);\n      font-size: 0.72rem;\n      line-height: 1.35;\n      margin-bottom: 4px;\n    }\n\n    .launch-fund-value {\n      color: var(--text);\n      font-size: 1.15rem;\n      line-height: 1.25;\n      font-weight: 700;\n      margin-bottom: 3px;\n    }\n\n    .launch-fund-sub {\n      color: var(--text-muted);\n      font-size: 0.72rem;\n      line-height: 1.35;\n    }\n\n    .annual-card {\n      border-radius: 12px;\n      border: 1px solid rgba(55,65,81,0.95);\n      background: radial-gradient(circle at top left, rgba(22,163,74,0.16), rgba(15,23,42,0.98));\n      padding: 14px;\n      margin-bottom: 20px;\n    }\n\n    .annual-card .card-title,\n    .annual-card .card-subtext {\n      text-align: center;\n    }\n\n    .annual-grid {\n      display: grid;\n      grid-template-columns: repeat(2,minmax(0,1fr));\n      gap: 10px;\n      margin-top: 10px;\n    }\n\n    .annual-top-item {\n      border-radius: 10px;\n      padding: 10px 10px;\n      text-align: center;\n    }\n\n   .annual-bottom {\n  grid-column: 1 / -1;\n  border-radius: 10px;\n  padding: 8px 10px;\n  margin-top: 4px;\n  text-align: center;\n}\n\n.annual-bottom .annual-value {\n  margin-bottom: 6px; /* spacing between value + rate line */\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("}\n\n.annual-bottom div[style*=\"font-size:0.7rem\"] {\n  margin-top: 2px !important; /* ensures rate line isn’t glued to value */\n}\n\n\n    .annual-label {\n  font-size: 0.75rem;\n  color: var(--text-soft);\n  text-transform: uppercase;\n  margin-bottom: 6px; /* ← add spacing BELOW the label */\n}\n\n.annual-value {\n  font-size: 1rem;\n  font-weight: 600;\n  white-space: normal;\n  word-break: break-word;\n  margin-top: 2px; /* ← tiny extra padding above the value */\n}\n\n    .pro-card {\n      border-radius: 12px;\n      border: 1px solid rgba(55,65,81,0.6);\n      background: rgba(15,23,42,0.5);\n      padding: 14px;\n      text-align: center;\n      opacity: 1;\n      cursor: not-allowed;\n    }\n\n    #proPlaceholder {\n      padding: 16px;\n      margin-bottom: 0px;\n      border-radius: 14px;\n      border: 1px solid rgba(31,41,55,0.9);\n    }\n\n    #proPlaceholder.pro-active {\n      opacity: 1 !important;\n      cursor: default !important;\n    }\n\n    .pro-card.centered-placeholder {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      min-height: 200px;\n      padding: 20px 14px;\n      position: relative;\n    }\n\n    .pro-card.centered-placeholder .pro-button {\n      cursor: pointer;\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .pro-content {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n\n    .pro-button {\n      padding: 10px 16px;\n      background: rgba(55,65,81,0.4);\n      border-radius: 8px;\n      color: var(--text-soft);\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      border: 1px solid rgba(75,85,99,0.4);\n      display: inline-block;\n      cursor: pointer;\n    }\n\n    .pro-credit {\n      font-size: 0.65rem;\n      color: var(--text-muted);\n      opacity: 0.55;\n      margin-top: auto;\n    }\n\n    .spotify-card {\n      position: relative;\n      overflow: hidden;\n    }\n\n    .spotify-card .card-title {\n      text-align: center;\n      color: var(--spotify-green);\n    }\n\n    .spotify-inner {\n  filter: none;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n    .spotify-card.open .spotify-inner {\n      filter: none;\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .spotify-overlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(15,23,42,0.78); /* clean dark layer */\n  backdrop-filter: blur(6px);       /* blur BEHIND the overlay */\n  -webkit-backdrop-filter: blur(6px);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 24px;\n  z-index: 10;\n  transition: opacity .25s ease;\n  border-radius: 14px; /* keeps it clean with your card edges */\n}\n\n\n    .spotify-card.open .spotify-overlay {\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    .spotify-overlay-text {\n      font-size: 0.8rem;\n      color: var(--text-soft);\n      max-width: 260px;\n    }\n\n    .spotify-button {\n      padding: 8px 14px;\n      border-radius: 999px;\n      border: 1px solid rgba(148,163,184,0.7);\n      background: radial-gradient(circle at top left, rgba(148,163,184,0.25), rgba(15,23,42,1));\n      color: var(--text);\n      font-size: 0.8rem;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n      cursor: pointer;\n      margin-top: 10px;\n      animation: pulse-glow 2.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse-glow {\n      0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }\n      55% { box-shadow: 0 0 12px 4px rgba(139,92,246,0.3); }\n    }\n\n    .spotify-small-label {\n      font-size: 0.75rem;\n      color: var(--text-soft);\n      margin-bottom: 4px;\n    }\n\n    .spotify-blurb {\n      margin-top: 8px;\n      font-size: 0.8rem;\n      color: var(--text-soft);\n      white-space: pre-line;\n      line-height: 1.4;\n      text-align: center;\n    }\n\n    .assumptions {\n      max-width: 740px;\n      margin: 32px auto 20px;\n      padding: 18px 20px;\n      background: radial-gradient(circle at top left, rgba(148,163,184,0.08), rgba(15,23,42,0.95));\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("      border-radius: 12px;\n      border: 1px solid rgba(55,65,81,0.6);\n    }\n\n    .assumptions-title {\n      font-size: 0.88rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--text-soft);\n      margin: 0 0 12px 0;\n      font-weight: 600;\n    }\n\n    .assumptions-list {\n      margin: 0;\n      padding-left: 20px;\n      font-size: 0.78rem;\n      color: var(--text-soft);\n      line-height: 1.6;\n    }\n\n    .assumptions-list li { margin-bottom: 8px; }\n\n    .assumptions a {\n      color: #c4b5fd;\n      font-weight: 600;\n      text-decoration: underline;\n      text-decoration-color: rgba(196,181,253,0.75);\n      text-underline-offset: 3px;\n    }\n\n    .assumptions a:hover,\n    .assumptions a:focus {\n      color: #ddd6fe;\n      text-decoration-color: #ddd6fe;\n    }\n    .assumptions-list li:last-child { margin-bottom: 0; }\n    .assumptions-list strong { color: var(--text); font-weight: 600; }\n\n    .pro-mode-section {\n      display: none;\n      opacity: 0;\n      max-height: 0;\n      overflow: hidden;\n      transition: opacity 0.3s ease, max-height 0.3s ease;\n    }\n\n    .pro-mode-section.active {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 20px;\n  opacity: 1;\n  max-height: 2000px;\n  max-width: 960px;\n  margin: 20px auto 20px; /* Changed from 20px to 32px for more space */\n}\n\n    @media(max-width:768px){\n      .pro-mode-section.active { grid-template-columns: 1fr; }\n    }\n\n  .pro-mode-section .pro-card {\n  background: radial-gradient(circle at top left, rgba(148,163,184,0.1), rgba(15,23,42,0.96));\n  border-radius: 14px;\n  border: 1px solid rgba(139,92,246,0.3);\n  padding: 18px;\n  margin-bottom: 0;\n  cursor: default;\n}\n\n    .pro-card-title {\n      font-size: 0.88rem;\n      letter-spacing: 0.1em;\n      color: var(--accent);\n      text-transform: uppercase;\n      margin-bottom: 12px;\n      font-weight: 600;\n      text-align: center;\n    }\n\n    .recoup-grid,\n    .unit-econ-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 10px;\n      margin-top: 10px;\n    }\n\n    .pro-note {\n      font-size: 0.72rem;\n      color: var(--text-muted);\n      margin-top: 10px;\n      line-height: 1.4;\n      font-style: italic;\n      text-align: center;\n    }\n\n    .unit-status-banner {\n      margin-top: 12px;\n      padding: 14px;\n      border-radius: 10px;\n      text-align: center;\n      font-size: 0.9rem;\n      font-weight: 600;\n      text-transform: none;\n      letter-spacing: 0.02em;\n      line-height: 1.4;\n    }\n\n    .unit-status-banner.good {\n      background: rgba(16,185,129,0.18);\n      border: 1px solid rgba(16,185,129,0.45);\n      color: #34d399;\n    }\n\n    .unit-status-banner.warning {\n      background: rgba(245,158,11,0.15);\n      border: 1px solid rgba(245,158,11,0.45);\n      color: #fbbf24;\n    }\n\n    .unit-status-banner.bad {\n      background: rgba(239,68,68,0.15);\n      border: 1px solid rgba(239,68,68,0.45);\n      color: #f87171;\n    }\n\n    .disclaimer {\n      font-size: 0.7rem;\n      color: var(--text-muted);\n      margin-top: 20px;\n      text-align: center;\n      line-height: 1.5;\n      opacity: 0.8;\n      max-width: 640px;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .pro-active-title {\n      font-size: 1.2rem;\n      font-weight: 700;\n      color: var(--accent);\n      margin-bottom: 10px;\n      text-transform: uppercase;\n      text-align: center;\n    }\n\n    .pro-active-text {\n      font-size: 0.85rem;\n      color: var(--text);\n      text-align: center;\n      opacity: 0.9;\n      max-width: 300px;\n      margin: 0 auto;\n      line-height: 1.5;\n    }\n  1:[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$6\"}}],\"$L7\",\"$L8\",\"$L9\"]\na:T4767,\u003cmain class=\"page\"\u003e\n    \u003cheader class=\"page-header\"\u003e\n      \u003ch1 class=\"page-title\" data-i18n=\"ui.pageTitle\"\u003eDirect-to-Fan Mini Calculator\u003c/h1\u003e\n\n      \u003cp class=\"page-subtitle\" data-i18n=\"ui.pageSubtitle\"\u003e\n        Drop in your IG follower count, the % of fans you think would support your first release,\n        and a base price for your release.\n      \u003c/p\u003e\n\n      \u003cp\n        id=\"pageKicker\"\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("        style=\"font-size:0.78rem;color:#9ca3af;margin-top:8px;max-width:640px;text-align:center;\"\n        data-i18n=\"ui.pageKicker\"\n      \u003e\n        Even 5–10% of fans can make a meaningful difference. At a glance, these numbers show what’s possible with an active community — not just a high follower count.\n      \u003c/p\u003e\n    \u003c/header\u003e\n\n    \u003csection class=\"layout\"\u003e\n      \u003c!-- LEFT --\u003e\n      \u003csection\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003ch2 class=\"card-title\" style=\"text-align:center; margin-bottom:12px;\" data-i18n=\"ui.inputsTitle\"\u003e\n            Inputs\n          \u003c/h2\u003e\n\n          \u003cdiv class=\"field-grid\"\u003e\n            \u003clabel class=\"field-label\" for=\"followers\" data-i18n=\"ui.igFollowersLabel\"\u003eIG Followers\u003c/label\u003e\n            \u003cinput id=\"followers\" class=\"field-input\" type=\"text\" value=\"1,234\" /\u003e\n\n            \u003clabel class=\"field-label\" for=\"percent\" data-i18n=\"ui.percentFansLabel\"\u003e% of Fans\u003c/label\u003e\n            \u003cinput id=\"percent\" class=\"field-input\" type=\"text\" value=\"5\" inputmode=\"decimal\" /\u003e\n\n            \u003c!-- COUNTRY / LANGUAGE BUTTONS (UNDER % OF FANS) --\u003e\n\u003clabel class=\"field-label\" for=\"countrySelect\" data-i18n=\"ui.countryLabel\"\u003eCountry\u003c/label\u003e\n\u003cselect id=\"countrySelect\" class=\"field-input\"\u003e\n  \u003coption value=\"en\" selected\u003eUnited States (US)\u003c/option\u003e\n  \u003coption value=\"en-CA\"\u003eCanada (CA)\u003c/option\u003e\n  \u003coption value=\"en-GB\"\u003eUnited Kingdom (UK)\u003c/option\u003e\n  \u003coption value=\"en-AU\"\u003eAustralia (AU)\u003c/option\u003e\n  \u003coption value=\"fr-FR\"\u003eFrance (FR)\u003c/option\u003e\n  \u003coption value=\"it-IT\"\u003eItaly (IT)\u003c/option\u003e\n  \u003coption value=\"pt-PT\"\u003ePortugal (PT)\u003c/option\u003e\n  \u003coption value=\"de-DE\"\u003eGermany (DE)\u003c/option\u003e\n  \u003coption value=\"es-ES\"\u003eSpain (ES)\u003c/option\u003e\n  \u003coption value=\"es-MX\"\u003eMexico (MX)\u003c/option\u003e\n  \u003coption value=\"pt-BR\"\u003eBrazil (BR)\u003c/option\u003e\n\u003c/select\u003e\n\n\n            \u003clabel class=\"field-label\" for=\"basePrice\" data-i18n=\"ui.basePriceLabel\"\u003eBase Price\u003c/label\u003e\n            \u003cdiv class=\"input-prefix-wrap\"\u003e\n              \u003cspan class=\"prefix\" id=\"currencyPrefix\"\u003e\u003c/span\u003e\n              \u003cinput id=\"basePrice\" class=\"field-input prefix-input\" type=\"text\" value=\"7.99\" /\u003e\n            \u003c/div\u003e\n\n            \u003clabel class=\"field-label\" data-i18n=\"ui.platformLabel\"\u003ePlatform\u003c/label\u003e\n            \u003cdiv class=\"platform-options\"\u003e\n              \u003cdiv class=\"platform-option\"\u003e\n                \u003cinput type=\"radio\" id=\"platformEven\" name=\"platform\" value=\"even\" checked /\u003e\n                \u003clabel for=\"platformEven\"\u003eEVEN\u003c/label\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"platform-option\"\u003e\n                \u003cinput type=\"radio\" id=\"platformSingle\" name=\"platform\" value=\"single\" /\u003e\n                \u003clabel for=\"platformSingle\" data-i18n=\"ui.platformSingleLabel\"\u003eSingle* / Bandcamp\u003c/label\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"platform-note\" data-i18n=\"ui.platformNote\"\u003e\n            * Single runs on Shopify and requires an active subscription (monthly fees not factored in). Single \u0026amp; Bandcamp take ~15% on digital.\n          \u003c/div\u003e\n\n          \u003cdiv class=\"outputs-grid\"\u003e\n            \u003cdiv class=\"output-box\"\u003e\n              \u003cdiv class=\"output-label\" data-i18n=\"ui.directSupportersLabel\"\u003eDirect Supporters\u003c/div\u003e\n              \u003cdiv id=\"fansOutput\" class=\"output-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"output-box\"\u003e\n              \u003cdiv class=\"output-label\" data-i18n=\"ui.communityValueLabel\"\u003eCommunity Value\u003c/div\u003e\n              \u003cdiv id=\"grossOutput\" class=\"output-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"output-box\"\u003e\n              \u003cdiv class=\"output-label\" data-i18n=\"ui.youKeepLabel\"\u003eYou Keep\u003c/div\u003e\n              \u003cdiv id=\"netOutput\" class=\"output-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"output-box\"\u003e\n              \u003cdiv class=\"output-label\" data-i18n=\"ui.spotifyEquivalentLabel\"\u003eSpotify Equivalent\u003c/div\u003e\n              \u003cdiv id=\"streamsOutput\" class=\"output-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"summary-card\"\u003e\n          \u003cdiv style=\"flex:1; display:flex; flex-direction:column; justify-content:center; padding:10px 0;\"\u003e\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("            \u003cdiv class=\"summary-label\" style=\"margin-bottom:12px;\" data-i18n=\"ui.inShortLabel\"\u003eIn short:\u003c/div\u003e\n            \u003cdiv id=\"summaryText\" style=\"margin-bottom:18px; text-align:center;\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"launch-fund-insight\"\u003e\n              \u003cdiv class=\"launch-fund-label\" data-i18n=\"ui.launchCanFundLabel\"\u003eThis Release Can Fund\u003c/div\u003e\n              \u003cdiv class=\"launch-fund-value\" id=\"launchCanFundOutput\"\u003e0\u003c/div\u003e\n              \u003cdiv class=\"launch-fund-sub\" data-i18n=\"ui.launchCanFundSub\"\u003eFor promo, marketing, ads, merch, or the next release.\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n\n      \u003c!-- RIGHT --\u003e\n      \u003csection\u003e\n        \u003cdiv class=\"annual-card\"\u003e\n          \u003ch2 class=\"card-title\" data-i18n=\"ui.annualTitle\"\u003eAnnualized Snapshot\u003c/h2\u003e\n          \u003cdiv class=\"card-subtext\" data-i18n=\"ui.annualSubtext\"\u003e\n            Assumes roughly the same % of new people buy each month, capped at 100% total reach.\n          \u003c/div\u003e\n\n          \u003cdiv class=\"annual-grid\"\u003e\n            \u003cdiv class=\"annual-top-item\"\u003e\n              \u003cdiv class=\"annual-label\" data-i18n=\"ui.annualGrossLabel\"\u003eAnnual Gross\u003c/div\u003e\n              \u003cdiv id=\"annualGrossOutput\" class=\"annual-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"annual-top-item\"\u003e\n              \u003cdiv class=\"annual-label\" data-i18n=\"ui.annualNetLabel\"\u003eAnnual Net\u003c/div\u003e\n              \u003cdiv id=\"annualNetOutput\" class=\"annual-value\"\u003e0\u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"annual-bottom\"\u003e\n              \u003cdiv class=\"annual-label\" data-i18n=\"ui.annualSpotifyEquivalentLabel\"\u003eAnnual Spotify Equivalent\u003c/div\u003e\n              \u003cdiv id=\"annualStreamsOutput\" class=\"annual-value\"\u003e0\u003c/div\u003e\n              \u003cdiv id=\"streamRateNote\" style=\"font-size:0.7rem;color:var(--text-muted);\"\u003e\n  \n\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"card spotify-card\" id=\"spotifyCard\"\u003e\n          \u003ch2 class=\"card-title\" data-i18n=\"ui.spotifyComparisonTitle\"\u003eSpotify Comparison\u003c/h2\u003e\n\n          \u003cdiv class=\"spotify-overlay\"\u003e\n            \u003cp class=\"spotify-overlay-text\" data-i18n=\"ui.spotifyOverlayText\"\u003e\n              Add your annual Spotify streams to compare your year of streaming income with what your own community can generate directly.\n            \u003c/p\u003e\n            \u003cbutton type=\"button\" class=\"spotify-button\" id=\"spotifyToggle\" data-i18n=\"ui.spotifyToggleButton\"\u003e\n              I know my Spotify numbers\n            \u003c/button\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"spotify-inner\"\u003e\n            \u003cdiv class=\"field-grid\" style=\"margin-bottom: 10px;\"\u003e\n              \u003cdiv\u003e\n                \u003cdiv class=\"spotify-small-label\" data-i18n=\"ui.spotifyStreamsLabel\"\u003eSpotify streams (last 12 months)\u003c/div\u003e\n                \u003cinput id=\"spotifyStreams\" class=\"field-input input-zero-placeholder\" type=\"text\" value=\"0\" /\u003e\n              \u003c/div\u003e\n              \u003cdiv\u003e\n                \u003cdiv class=\"spotify-small-label\" data-i18n=\"ui.spotifyIncomeLabel\"\u003eApprox. Spotify income\u003c/div\u003e\n                \u003cdiv id=\"spotifyIncomeOutput\" class=\"output-value output-muted-zero\"\u003e0\u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv id=\"spotifyBlurb\" class=\"spotify-blurb\" data-i18n=\"ui.spotifyBlurbDefault\"\u003e\n              Add your annual Spotify streams (and make sure your IG %, price, and followers are set) to see how this compares.\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"pro-card centered-placeholder\" id=\"proPlaceholder\"\u003e\n          \u003cdiv class=\"pro-content\" id=\"proContent\"\u003e\n            \u003cdiv class=\"pro-button\" data-i18n=\"ui.proModeButton\"\u003ePro Mode (coming soon)\u003c/div\u003e\n\n            \u003cp\n              style=\"\n                font-size:0.75rem;\n                margin-top:10px;\n                color:var(--text-soft);\n                max-width:240px;\n                margin-left:auto;\n                margin-right:auto;\n              \"\n              data-i18n=\"ui.proModeTeaser\"\n            \u003e\n              Includes deeper breakdowns for fan value, recoupment, and early unit-economics modeling.\n            \u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    \u003c/section\u003e\n\n    \u003c!-- PRO MODE SECTION --\u003e\n    \u003cdiv class=\"pro-mode-section\" id=\"proModeSection\"\u003e\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("      \u003cdiv class=\"pro-card\"\u003e\n        \u003ch3 class=\"pro-card-title\" data-i18n=\"ui.proFanValueTitle\"\u003eFan Value Snapshot\u003c/h3\u003e\n\n        \u003cdiv class=\"outputs-grid\"\u003e\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proDirectValueLabel\"\u003eDirect Value (Net)\u003c/div\u003e\n            \u003cdiv id=\"fanValueDirect\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proSpotifyValueLabel\"\u003eSpotify Value\u003c/div\u003e\n            \u003cdiv id=\"fanValueSpotify\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proValueMultipleLabel\"\u003eValue Multiple\u003c/div\u003e\n            \u003cdiv id=\"fanValueMultiple\" class=\"output-value\"\u003e–\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proBreakEvenLabel\"\u003eBreak-Even CAC\u003c/div\u003e\n            \u003cdiv id=\"fanValueBreakEven\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cp class=\"pro-note\" data-i18n=\"ui.proFanValueNote\"\u003e\n          Direct = estimated net per sale. Spotify value and break-even spend are modeled privately server-side.\n        \u003c/p\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"pro-card\"\u003e\n        \u003ch3 class=\"pro-card-title\" data-i18n=\"ui.proRecoupTitle\"\u003eRecoupment Calculator\u003c/h3\u003e\n\n        \u003cdiv class=\"field-grid\"\u003e\n          \u003clabel class=\"field-label\" for=\"projectCost\" data-i18n=\"ui.projectCostLabel\"\u003eProject Cost/Advance\u003c/label\u003e\n          \u003cdiv class=\"input-prefix-wrap\"\u003e\n           \u003cspan class=\"prefix\" id=\"currencyPrefix2\"\u003e\u003c/span\u003e\n            \u003cinput id=\"projectCost\" class=\"field-input prefix-input\" type=\"number\" value=\"0\" min=\"0\" /\u003e\n          \u003c/div\u003e\n\n          \u003clabel class=\"field-label\" for=\"labelCut\" data-i18n=\"ui.labelCutLabel\"\u003eLabel/Distro Cut (%)\u003c/label\u003e\n          \u003cinput id=\"labelCut\" class=\"field-input\" type=\"number\" value=\"0\" min=\"0\" max=\"100\" /\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"recoup-grid\"\u003e\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.salesNeededLabel\"\u003eSales Needed\u003c/div\u003e\n            \u003cdiv id=\"proSalesNeeded\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.percentAudienceLabel\"\u003e% of Audience\u003c/div\u003e\n            \u003cdiv id=\"proAudiencePercent\" class=\"output-value\"\u003e0%\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proSpotifyEquivLabel\"\u003eSpotify Equivalent\u003c/div\u003e\n            \u003cdiv id=\"proSpotifyEquiv\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.proYouKeepLabel\"\u003eYou Keep\u003c/div\u003e\n            \u003cdiv id=\"proNetAfterCut\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cp class=\"pro-note\" id=\"proRecoupNote\" data-i18n=\"ui.proRecoupHint\"\u003e\n          Enter a project cost or advance amount to see recoupment calculations.\n        \u003c/p\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"pro-card\"\u003e\n        \u003ch3 class=\"pro-card-title\" data-i18n=\"ui.proUnitEconTitle\"\u003eUnit Economics\u003c/h3\u003e\n\n        \u003cdiv class=\"unit-econ-grid\"\u003e\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.convRateLabel\"\u003eConversion Rate\u003c/div\u003e\n            \u003cdiv class=\"output-value\"\u003eModeled\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.cpcLabel\"\u003eCPC\u003c/div\u003e\n            \u003cdiv class=\"output-value\"\u003eModeled\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.netPerSaleLabel\"\u003eYou Keep (Net per sale)\u003c/div\u003e\n            \u003cdiv id=\"proNetPerSale\" class=\"output-value\"\u003e0\u003c/div\u003e\n          \u003c/div\u003e\n\n          \u003cdiv class=\"output-box\"\u003e\n            \u003cdiv class=\"output-label\" data-i18n=\"ui.ltvCacLabel\"\u003eLTV:CAC Ratio (2 purchases)\u003c/div\u003e\n            \u003cdiv id=\"proLTVCAC\" class=\"output-value\"\u003e0.0×\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"unit-status-banner good\" id=\"proStatusBanner\"\u003e\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("          \u003cspan id=\"proStatus\" data-i18n=\"ui.statusGood\"\u003e✓ Profitable — Scalable With Paid Ads\u003c/span\u003e\n        \u003c/div\u003e\n\n        \u003cp class=\"pro-note\" data-i18n=\"ui.proUnitEconNote\"\u003e\n          Uses illustrative paid-growth assumptions. Results will vary by artist, creative, audience, and targeting.\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"assumptions\"\u003e\n  \u003ch3 class=\"assumptions-title\" data-i18n=\"ui.assumptionsTitle\"\u003eAssumptions \u0026amp; Notes\u003c/h3\u003e\n  \u003cul class=\"assumptions-list\"\u003e\n\n    \u003cli data-i18n=\"ui.assumption1\"\u003e\n      \u003cstrong\u003eCommunity First:\u003c/strong\u003e\n      This model assumes trust and engagement already exist. It’s not about squeezing more out of an audience — it’s about serving the people who already care about your music.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption2\"\u003e\n      \u003cstrong\u003eDirectional, Not Predictive:\u003c/strong\u003e\n      These projections are simplified and don’t guarantee performance. Real results vary by creative, audience health, timing, and rollout.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption3\"\u003e\n      \u003cstrong\u003eSupporter %:\u003c/strong\u003e\n      Some campaigns may target 5–15% of engaged followers converting into first-release supporters. Adjust based on audience trust and engagement.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption4\"\u003e\n      \u003cstrong\u003eBase Price:\u003c/strong\u003e\n      Chart reporting rules can include pricing, bundle, format, and distributor-delivery requirements. If chart eligibility matters, verify the current rules with the relevant chart body.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption5\"\u003e\n      \u003cstrong\u003ePlatform Fees:\u003c/strong\u003e\n      This model uses 20% for EVEN and ~15% for Bandcamp/Single digital sales as directional platform-fee assumptions. Shopify processing, subscriptions, caps, product type, taxes, and current platform terms can change the actual net.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption6\"\u003e\n      \u003cstrong\u003eSpotify Rate:\u003c/strong\u003e\n      Streaming value is estimated with a private directional benchmark; actual payouts vary widely by territory, listener plan, and distribution terms.\n    \u003c/li\u003e\n\n    \u003cli data-i18n=\"ui.assumption7\"\u003e\n      \u003cstrong\u003eDirect + Streaming:\u003c/strong\u003e\n      These approaches aren’t mutually exclusive—you can (and should) do both.\n    \u003c/li\u003e\n\n  \u003c/ul\u003e\n\u003c/div\u003e\n\n    \u003cdiv\n      style=\"\n        max-width: 720px;\n        margin: 28px auto 16px;\n        padding: 14px 12px 12px;\n        border-radius: 10px;\n        background: rgba(15,23,42,0.6);\n        border: 1px solid rgba(148,163,184,0.18);\n        text-align: center;\n      \"\n      \u003e\n      \u003cp class=\"sr-only\"\u003e\n        This is not affiliated with, endorsed by, or officially connected to any third-party platform or brand referenced in the comparison.\n      \u003c/p\u003e\n\n      \u003cdiv\n        style=\"\n          font-size: 0.65rem;\n          text-transform: uppercase;\n          letter-spacing: 0.08em;\n          color: #9ca3af;\n          margin-bottom: 6px;\n        \"\n        data-i18n=\"ui.platformsReferenced\"\n      \u003e\n        Platforms Referenced\n      \u003c/div\u003e\n\n      \u003cdiv style=\"font-size: 0.8rem; color: #e5e7eb;\"\u003e\n        \u003ca\n          href=\"https://even.biz\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n          aria-label=\"EVEN external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by EVEN.\"\n          title=\"External reference; independent calculator, not affiliated.\"\n          style=\"color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;\"\n        \u003eEVEN\u003c/a\u003e\n        \u003cspan style=\"opacity:0.4;\"\u003e · \u003c/span\u003e\n\n        \u003ca\n          href=\"https://singlemusic.co\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n          aria-label=\"
1151Single external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by Single.\"\n          title=\"External reference; independent calculator, not affiliated.\"\n          style=\"color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;\"\n        \u003eSingle\u003c/a\u003e\n        \u003cspan style=\"opacity:0.4;\"\u003e · \u003c/span\u003e\n\n        \u003ca\n          href=\"https://bandcamp.com\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n")</script>
1151<script>self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("          aria-label=\"Bandcamp external reference. Independent calculator; not affiliated with, sponsored by, or endorsed by Bandcamp.\"\n          title=\"External reference; independent calculator, not affiliated.\"\n          style=\"color:#e5e7eb;text-decoration:underline;text-underline-offset:3px;\"\n        \u003eBandcamp\u003c/a\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv style=\"max-width: 720px; margin: 36px auto 0; text-align: center;\"\u003e\n      \u003cdiv style=\"max-width: 560px; margin: 0 auto;\"\u003e\n        \u003cp\n          style=\"\n            font-size:0.78rem;\n            color:#9ca3af;\n            line-height:1.6;\n            margin-bottom:22px;\n            max-width:560px;\n            margin-left:auto;\n            margin-right:auto;\n          \"\n          data-i18n=\"ui.footerPitch\"\n        \u003e\n          This mini calculator is a simplified version of a larger rollout, revenue, and community model I build with artists, teams, and labels. I’m always happy to collaborate on deeper, customized versions of this work—or more broadly across strategy, releases, and direct-to-fan execution.\n        \u003c/p\u003e\n\n        \u003cp style=\"font-size:0.70rem; color:#6b7280;\"\u003e\n          \u003cspan data-i18n=\"ui.builtBy\"\u003eBuilt by\u003c/span\u003e\n          \u003ca\n            href=\"https://www.instagram.com/its.alexmarques/\"\n            target=\"_blank\"\n            rel=\"noopener\"\n            style=\"color:#6b7280;text-decoration:underline;text-underline-offset:3px;\"\n          \u003e\n            Alex Marques\n          \u003c/a\u003e\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/main\u003e7:[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$a\"}}]\n8:[\"$\",\"script\",null,{\"src\":\"/calculator-i18n.js\",\"defer\":true}]\n9:[\"$\",\"script\",null,{\"src\":\"/calculator-client.js\",\"defer\":true}]\n")</script>
1151<script>self.__VINEXT_RSC_DONE__=true</script>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.