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 & 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 & 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.