/* ---------------------------------------------------------------------------
   pricing.css — the /pricing page.

   SOURCE: pages/pricing_06.txt (8 September 2026), verified against the live
   crawl: it is the version carrying the referral prefill and the subscriber
   guard. pages/pricing_03.txt is the OLD one — no Stripe links, no referral
   code — do not use it.

   Rules VERBATIM apart from the two global rules the shell owns, which are
   parked on dead class names rather than deleted so the declarations they
   carried stay visible in a diff.
   --------------------------------------------------------------------------- */

    /* ============================================
       BRANDING VARIABLES
       ============================================ */
    :root {
      --primary-color: #1DB954;
      --primary-hover: #1ed760;
      --accent-color: #FFD700;
      --background: #0a0a0a;
      --surface: #1a1a1a;
      --surface-elevated: #2a2a2a;
      --border: #333;
      --text-primary: #ffffff;
      --text-secondary: #999;
      --text-on-primary: #000;

      --font-family: HelveticaNeue, Arial, 'Open Sans', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* was the page's own stack */
      --font-size-h1: 48px;
      --font-size-h2: 32px;
      --font-size-h3: 24px;
      --font-size-price: 48px;
      --font-size-body: 16px;

      --spacing-xs: 8px;
      --spacing-sm: 16px;
      --spacing-md: 24px;
      --spacing-lg: 40px;
      --spacing-xl: 60px;

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-pill: 30px;
    }

    /* Global `*` reset removed — theme-black.css sets it site-wide. */
    .rb-pricing-reset-removed {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* The page's own `body` rule was removed — the shell owns body type,
       colour and background. --font-family below is repointed at the site
       stack so the page's own rules agree with the rest of the site. */
    .rb-pricing-body-removed {
      font-family: var(--font-family);
      background: var(--background);
      color: var(--text-primary);
      line-height: 1.6;
    }

    .pricing-page {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xl) var(--spacing-md);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);
      gap: var(--spacing-md);
    }

    .header h1 {
      font-size: var(--font-size-h1);
      margin: 0;
      font-weight: 700;
      color: var(--text-primary) !important;
      flex: 1;
    }

    .header-login {
      white-space: nowrap;
      flex-shrink: 0;
    }

    .header-login a {
      color: var(--primary-color) !important;
      text-decoration: none !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      transition: color 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .header-login a:hover {
      color: var(--primary-hover) !important;
    }

    .billing-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--spacing-sm);
      margin: var(--spacing-md) 0 var(--spacing-lg) 0;
    }

    .toggle-container {
      position: relative;
      width: 60px;
      height: 32px;
      background: var(--surface);
      border-radius: var(--radius-pill);
      cursor: pointer;
      border: 2px solid var(--border);
      transition: all 0.3s ease;
    }

    .toggle-container.active {
      background: var(--primary-color);
      border-color: var(--primary-color);
    }

    .toggle-slider {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      background: var(--text-primary);
      border-radius: 50%;
      transition: transform 0.3s ease;
    }

    .toggle-container.active .toggle-slider {
      transform: translateX(28px);
    }

    .toggle-label {
      font-size: var(--font-size-body);
      font-weight: 600;
      cursor: pointer;
      transition: color 0.3s ease;
      color: var(--text-secondary) !important;
    }

    .toggle-label.active {
      color: var(--primary-color) !important;
    }

    .toggle-label.inactive {
      color: var(--text-secondary) !important;
    }

    .save-badge {
      background: var(--accent-color) !important;
      color: var(--text-on-primary) !important;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 700;
      margin-left: var(--spacing-xs);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .tier-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-xl);
    }

    .tier-card {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--spacing-md);
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      z-index: 100;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      min-height: 480px;
    }

    .tier-card:hover {
      transform: translateY(-8px);
      border-color: var(--primary-color);
      box-shadow: 0 12px 40px rgba(29, 185, 84, 0.2);
    }

    .tier-card.featured {
      border-color: var(--primary-color);
      background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
    }

    .tier-card.featured::before {
      content: '⭐ BEST VALUE';
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary-color) !important;
      color: var(--text-on-primary) !important;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .tier-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .tier-cta {
      margin-top: auto;
      padding-top: var(--spacing-md);
    }

    .tier-name {
      font-size: var(--font-size-h3);
      font-weight: 700;
      margin-bottom: var(--spacing-sm);
      color: var(--text-primary) !important;
      background: none;
      display: block;
      width: 100%;
      text-align: center;
    }

    .tier-price {
      font-size: var(--font-size-price);
      font-weight: 700;
      margin: var(--spacing-sm) 0;
      color: var(--primary-color) !important;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      line-height: 1;
    }

    .tier-price .cents {
      font-size: 20px;
      font-weight: 600;
      margin-top: 4px;
      margin-left: 2px;
    }

    .tier-price span {
      font-size: 18px;
      color: var(--text-secondary) !important;
      font-weight: 400;
      align-self: flex-end;
      margin-left: 4px;
    }

    .tier-credits {
      font-size: var(--font-size-body);
      color: var(--text-secondary) !important;
      margin-bottom: var(--spacing-sm);
    }

    .bonus-badge {
      display: inline-block;
      background: var(--accent-color) !important;
      color: var(--text-on-primary) !important;
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      font-size: 14px;
      font-weight: 700;
      margin: var(--spacing-sm) 0;
    }

    .year-total {
      margin: var(--spacing-sm) 0;
      font-size: 14px;
      color: var(--text-secondary) !important;
    }

    .tier-features {
      list-style: none;
      text-align: left;
      margin: var(--spacing-sm) 0;
      padding: 0;
      flex: 1;
    }

    .tier-features li {
      padding: var(--spacing-xs) 0;
      color: var(--text-secondary) !important;
      position: relative;
      padding-left: 24px;
      font-size: 14px;
    }

    .tier-features li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--primary-color) !important;
      font-weight: 700;
    }

    .tier-features li strong {
      color: var(--primary-color) !important;
    }

    .subscribe-btn {
      width: 100%;
      background: var(--primary-color) !important;
      color: var(--text-on-primary) !important;
      border: none;
      padding: 16px 32px;
      font-size: 18px;
      font-weight: 700;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: var(--spacing-md);
      position: relative !important;
      z-index: 10000 !important;
      pointer-events: auto !important;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      text-decoration: none !important;
      display: block;
    }

    .subscribe-btn:hover {
      background: var(--primary-hover) !important;
      transform: scale(1.02);
    }

    .subscribe-btn:active {
      transform: scale(0.98);
    }

    /* ============================================
       COMPARISON TABLE
       ============================================ */
    .comparison-section {
      margin: var(--spacing-xl) 0;
      padding: var(--spacing-xl) 0;
      border-top: 2px solid var(--border);
    }

    .comparison-section h2,
    .whats-included h2,
    .faq-section h2,
    .alternative-section h2 {
      color: var(--text-primary) !important;
    }

    .comparison-table {
      background: var(--surface);
      border-radius: var(--radius-md);
      overflow: hidden;
      max-width: 900px;
      margin: 0 auto;
    }

    .comparison-table table {
      width: 100%;
      border-collapse: collapse;
    }

    .comparison-table th,
    .comparison-table td {
      padding: var(--spacing-md);
      text-align: left;
      border-bottom: 1px solid var(--border);
      color: var(--text-secondary) !important;
    }

    .comparison-table th {
      background: var(--background);
      font-weight: 700;
      text-align: center;
      color: var(--text-primary) !important;
    }

    .comparison-table th:first-child {
      text-align: left;
    }

    .comparison-table td {
      text-align: center;
      font-size: var(--font-size-body);
    }

    .comparison-table td:first-child {
      text-align: left;
      color: var(--text-primary) !important;
      font-weight: 600;
    }

    .comparison-table td strong {
      color: var(--text-primary) !important;
    }

    .comparison-table tr:last-child td {
      border-bottom: none;
    }

    .comparison-table td:nth-child(4) {
      background: rgba(29, 185, 84, 0.05);
    }

    /* ============================================
       WHAT'S INCLUDED SECTION
       ============================================ */
    .whats-included {
      margin: var(--spacing-xl) 0;
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-lg);
      max-width: 1000px;
      margin: 0 auto;
    }

    .benefit {
      text-align: center;
    }

    .benefit-icon {
      font-size: 48px;
      margin-bottom: var(--spacing-sm);
    }

    .benefit h3 {
      font-size: 18px;
      margin-bottom: var(--spacing-sm);
      color: var(--text-primary) !important;
    }

    .benefit p {
      font-size: 14px;
      color: var(--text-secondary) !important;
      line-height: 1.6;
    }

    /* ============================================
       FAQ SECTION
       ============================================ */
    .faq-section {
      margin: var(--spacing-xl) 0;
      padding: var(--spacing-xl) 0;
      border-top: 2px solid var(--border);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-lg);
      max-width: 1000px;
      margin: 0 auto;
    }

    .faq-item {
      background: var(--surface);
      padding: var(--spacing-lg);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
    }

    .faq-item h3 {
      font-size: 18px;
      margin-bottom: var(--spacing-sm);
      color: var(--primary-color) !important;
      font-weight: 600;
    }

    .faq-item p {
      font-size: 14px;
      color: var(--text-secondary) !important;
      line-height: 1.6;
    }

    /* ============================================
       REGGAE STEMS ALTERNATIVE SECTION
       ============================================ */
    .alternative-section {
      margin: var(--spacing-xl) 0;
      padding: var(--spacing-xl) 0;
      border-top: 2px solid var(--border);
    }

    .alternative-section p {
      color: var(--text-secondary) !important;
    }

    .alternative-section strong {
      color: var(--text-primary) !important;
    }

    .stems-cta {
      display: inline-block;
      background: var(--accent-color) !important;
      color: var(--text-on-primary) !important;
      padding: 16px 40px;
      font-size: 18px;
      font-weight: 700;
      border-radius: var(--radius-pill);
      text-decoration: none !important;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .stems-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
    }

    /* ============================================
       SUBSCRIBER GUARD — styles for existing
       subscribers (see script at end of page)
       ============================================ */
    .rb-current-plan {
      display: block;
      width: 100%;
      padding: 16px 32px;
      border-radius: var(--radius-pill);
      margin-top: var(--spacing-md);
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      cursor: default;
      border: 2px solid var(--primary-color);
      color: var(--primary-color) !important;
      background: transparent;
    }

    @media (max-width: 768px) {
      :root {
        --font-size-h1: 32px;
        --font-size-h2: 24px;
        --font-size-price: 36px;
      }

      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
      }

      .header h1 {
        font-size: 28px;
      }

      .header-login {
        align-self: flex-end;
      }

      .tier-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
      }

      .pricing-page {
        padding: var(--spacing-md);
      }

      .billing-toggle {
        flex-wrap: wrap;
      }

      .comparison-table {
        font-size: 13px;
        overflow-x: auto;
      }

      .comparison-table th,
      .comparison-table td {
        padding: var(--spacing-sm);
      }

      .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
      }

      .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    .show-monthly .annual-only {
      display: none;
    }

    .show-annual .monthly-only {
      display: none;
    }

/* ---------------------------------------------------------------------------
   TRAILING SPACE BEFORE THE FOOTER — 17 September 2026.

   Measured on the deployed page: 180px of empty dark space sat between the
   "Visit ReggaeStems.com" button and the footer's top border, which reads as a
   footer twice its real height. The footer itself measures 268px and is
   correct. The 180px was all page, stacked from three sources:

       .alternative-section  padding-bottom  60px
       .alternative-section  margin-bottom   60px
       .pricing-page         padding-bottom  60px

   WHY IT LOOKED FINE ON riddimbank.com: /main-page is the only live page with
   a footer at all. Everywhere else the document simply ended, so 180px of tail
   was invisible — it was the bottom of the page. Put a footer under it and the
   same 180px becomes a gap.

   EXPECT THIS ON EVERY PORTED PAGE. It is not a bug in the source; it is what
   happens when a page written to end gains something after it. Check the tail
   of each page as it is ported.

   Only the LAST child is trimmed, so section spacing in the middle of the page
   is untouched. 180px -> 56px.
   --------------------------------------------------------------------------- */
.pricing-page { padding-bottom: 32px; }

.pricing-page > *:last-child {
  margin-bottom: 0;
  padding-bottom: 24px;
}

/* The free 15-minute call, above the ReggaeStems block. Framed as a card so it
   reads as an offer rather than a stray paragraph after the FAQ. */
.call-section {
  max-width: 760px; margin: 0 auto 48px; padding: 30px 28px;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px; text-align: center;
}
.call-section h2 { margin: 0 0 10px; font-size: 24px; color: #fff; }
.call-section p  { margin: 0 auto 20px; max-width: 58ch; font-size: 16px; line-height: 1.7; color: #b0b0b0; }