/* =============================================================================
   HERO CTA — the sign-up call to action on the two landing surfaces (/ and
   /marketcap): the green "Create free account" pill, the A++ upsell link, and
   the "already collecting?" line. Carries its own max-width:560px rule, because
   a component owns its responsive behaviour.

   HISTORY: this deliberately lived as two identical copies, one per page, and
   index.html said so — "no shared file, by request". That is reversed here. Two
   copies maintained by one person is not a duplication, it is a scheduled bug:
   the day someone edits the button on / and not on /marketcap, the two CTAs
   disagree and nothing catches it. They were still byte-identical when this was
   written, which is the cheapest possible moment to merge them.

   If the two CTAs ever SHOULD differ, the answer is a modifier class here
   (.hero-cta--compact), not a second copy of the block.

   Colours are theme.css tokens, so this follows the theme. Linked after
   theme.css (needs its tokens) and before each page's inline <style>, so any
   page-level override keeps winning exactly as it did when these sat inline.
   ========================================================================== */

.hero-cta { display: flex; flex-direction: column; align-items: center; margin: 12px 0 22px; }
.hero-cta .hero-free-btn { display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
    color: #05210f; background: var(--neon-green); padding: 11px 28px; border-radius: 999px;
    box-shadow: 0 6px 18px -8px var(--neon-green); transition: transform .12s, filter .12s, box-shadow .12s; }
.hero-cta .hero-free-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 11px 26px -8px var(--neon-green); }
@media (max-width: 560px) { .hero-cta .hero-free-btn { font-size: 0.76rem; padding: 10px 26px; } .hero-cta .hero-aplus-link { font-size: 0.63rem; } }
body.work-mode .hero-cta .hero-free-btn { color: #fff; background: var(--green); box-shadow: 0 6px 18px -8px var(--green); }
.hero-collect { display: block; text-align: center; margin: 12px 0 0; font-size: 0.82rem; letter-spacing: .5px; color: var(--neon-green); }
.hero-collect i { font-size: 1.05em; vertical-align: -.1em; }
body.work-mode .hero-collect { color: var(--green); }
.hero-cta .hero-aplus-link { display: inline-block; margin-top: 12px; line-height: 1; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; color: var(--neon-orange); opacity: .95; transition: opacity .12s; }
.hero-cta .hero-aplus-link:hover { opacity: 1; text-decoration: underline; }
.hero-cta .aplus-star { margin-right: 5px; }
.hero-cta .saplus-arrow { font-size: 1.5em; line-height: 0; vertical-align: -.26em; margin-left: 1px; transition: transform .12s; }
.hero-cta .hero-aplus-link:hover .saplus-arrow { transform: translateX(3px); }
body.work-mode .hero-cta .hero-aplus-link { color: var(--accent); }
/* signed-in A+ member: the A++ link is the ONLY cta -> promote it to a gold pill button */
.hero-cta .hero-aplus-link.hero-aplus-solo { font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px;
    color: #2a1400; background: var(--neon-orange); padding: 11px 28px; border-radius: 999px; opacity: 1;
    box-shadow: 0 6px 18px -8px var(--neon-orange); }
.hero-cta .hero-aplus-link.hero-aplus-solo:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; }
body.work-mode .hero-cta .hero-aplus-link.hero-aplus-solo { background: var(--accent); color: #fff; }