/* ===========================================================================
   The supply-side recruitment pages — shared components, layered on about.css.
   Loaded ONLY by PageController::becomeModel() (/cams/become-a-model) and
   PageController::sellVideos() (/videos/sell) — plus PageController::advertise()
   (/advertise), which reuses the icon cards, steps, FAQ and closing — via $pageStyles, AFTER about.css,
   whose bands, stripes, glow CTA, scenes and display type both pages reuse.
   Holds the components the partials/ui/earn-* family renders: the earnings
   calculator, the step numbers, the split figures, the icon cards, the FAQ
   surface and the closing rule. A page's own components stay in its own sheet
   (become-model.css).

   The same sanctioned departure from Bootstrap-first as about.css (styling.md
   §"The one sanctioned exception"): layout, grid, spacing, buttons and the
   accordion stay Bootstrap; these rules are decoration. Every colour resolves
   from the theme's --bs-* vars and the --accent-* / --card-* aliases.
   =========================================================================== */

/* Earnings calculator — a rounded outlined panel with the result in a solid
   crimson block, the "income" card shape. */
.earn-calc {
    border: 2px solid var(--border);
    border-radius: 2.5rem;
    background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--bs-primary) 18%, transparent), transparent 60%);
}

.earn-calc-result {
    border-radius: 2rem;
    background: var(--bs-primary);
    box-shadow: 0 0 50px color-mix(in srgb, var(--accent-glow) 35%, transparent);
}

/* The result figure: fluid, so a four-digit sum never overflows a phone. */
.earn-calc-figure {
    font-size: clamp(2.75rem, 8vw, 4.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

/* Numbered onboarding steps — a solid circle per step. */
.earn-step-num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bs-primary);
}

/* A neon glow on the steps illustration. */
.earn-neon {
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

/* Split figures — rounded tiles; the performer's share glows. */
.earn-box {
    border-radius: 1.5rem;
    background: var(--card-2);
}

.earn-box-you {
    background: var(--bs-primary);
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent-glow) 45%, transparent);
}

/* Icon-card glyphs — a gradient circle, larger than the step numbers. */
.earn-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--accent-glow), var(--bs-primary));
}

/* FAQ — the accordion on the page's dark ground instead of a card surface. */
.earn-faq {
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--bs-white);
    --bs-accordion-btn-color: var(--bs-white);
}

/* Closing CTA — a crimson rule down the start edge of the block. */
.earn-closing {
    max-width: 760px;
    border-inline-start: 6px solid var(--bs-primary);
}