/* ---------------------------------------------------------------------------
   PARKED FOR PHASE 3 — NOT LOADED BY ANY LAYOUT.
   The page-specific half of main-page's stylesheet: hero, offer, how-it-works,
   styles showcase, final CTA. It travels with /main-page when that page is
   ported onto / in Phase 3. Kept as a file so none of it is lost in the split.
   Extracted 17 September 2026 from the live page mirror at
   ~/riddimbank-crawl-2026-09-17/pages/main-page.html (style block #5).
   Rules are ported AS THEY ARE, !important and all. Cleanup is Phase 9.
   --------------------------------------------------------------------------- */



        /* Full Width Video Hero */
        .hero {
            position: relative;
            width: 100%;
            height: 80vh;
            min-height: 600px;
            overflow: hidden;
        }

        /* Poster image - shows immediately */
        /* -------------------------------------------------------------------
           THE HERO VIDEO — rewritten 17 September 2026.

           This replaced FIVE rules (.hero-poster, .hero-poster.hidden,
           .hero-video-container, its iframe, and .loaded) plus a block of
           JavaScript with a timer in it. All of that existed to fake something
           a <video> tag does natively: show a still, then swap to the video
           once it can play.

           The still is now the `poster` attribute. The browser holds it until
           the first frame is decodable and swaps with no flash, no timer, and
           nothing to get wrong. If the video never arrives, the poster simply
           stays — which is what a fallback is supposed to do.

           The poster is frame one of THIS EXACT ENCODE, so there is no jump at
           the handoff. Regenerate it if the video is ever re-encoded:
             ffmpeg -i hero-loop.mp4 -frames:v 1 -c:v libwebp -quality 82 \
                    hero-poster.webp

           pointer-events: none matters — the old iframe sat over the hero and
           needed pointer-events juggling so the CTAs stayed clickable. A video
           that ignores clicks cannot steal them in the first place.
           ------------------------------------------------------------------- */
        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            pointer-events: none;
        }

        .hero-video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            pointer-events: auto;
        }

        /* Dark overlay behind text */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(10, 10, 10, 0.7));
            z-index: 2;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 60px;
            pointer-events: none;
        }

        .hero-text {
            max-width: 900px;
            animation: fadeInUp 0.6s ease-out;
            pointer-events: none;
        }

        .hero-text a, .hero-text button {
            pointer-events: auto !important;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 .highlight {
            color: #00A651;
        }

        .hero-subtitle {
            font-size: clamp(1.125rem, 2.2vw, 1.375rem);
            color: #FFFFFF !important;
            margin-bottom: 40px;
            line-height: 1.65;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            max-width: 800px;
        }

        .hero-ctas {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        /* What We Offer Section */
        .what-we-offer {
            padding: 80px 24px;
            background: var(--card-bg);
            border-bottom: 1px solid rgba(0, 166, 81, 0.2);
        }

        .offer-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .offer-content {
            text-align: center;
            margin-bottom: 48px;
        }

        .offer-text {
            font-size: 1.25rem;
            line-height: 1.8;
            color: var(--text-primary);
            margin-bottom: 24px;
        }

        .offer-subtext {
            font-size: 1rem;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .credits-callout {
            background: linear-gradient(135deg, rgba(29, 185, 84, 0.15), rgba(29, 185, 84, 0.05));
            border: 2px solid rgba(29, 185, 84, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 700px;
            margin: 0 auto;
        }

        .callout-icon {
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .callout-content {
            flex: 1;
        }

        .callout-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
            line-height: 1.3;
        }

        .callout-text {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.3;
        }

        /* How It Works */
        .how-it-works {
            background: var(--dark-bg);
            padding: 100px 24px;
        }

        .how-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 48px;
            margin-top: 60px;
        }

        .step {
            text-align: center;
            position: relative;
        }

        .step-number {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-green), #005A2D);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Archivo Black', sans-serif;
  font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */
            font-size: 2rem;
            color: #FFFFFF !important;
            margin: 0 auto 24px;
        }

        .step-title {
            font-family: 'Archivo Black', sans-serif;
  font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */
            font-size: 1.5rem;
            margin-bottom: 16px;
            color: #FFFFFF !important;
        }

        .step-description {
            color: #C8C8C8 !important;
            font-size: 1rem;
            line-height: 1.6;
        }

        /* Styles Showcase */
        .styles-showcase {
            padding: 100px 24px;
            max-width: 1400px;
            margin: 0 auto;
            background: var(--dark-bg);
        }

        .styles-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;
        }

        .style-card {
            background: var(--card-bg);
            border: 1px solid rgba(0, 166, 81, 0.2);
            border-radius: 16px;
            padding: 24px 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            display: block;
            color: inherit;
            flex: 0 1 200px;
            min-width: 160px;
            max-width: 220px;
        }

        .style-card:hover {
            transform: translateY(-8px);
            border-color: var(--primary-green);
            background: linear-gradient(135deg, var(--card-bg), rgba(0, 166, 81, 0.05));
            box-shadow: 0 12px 30px rgba(0, 166, 81, 0.2);
        }

        .style-icon {
            margin-bottom: 12px;
            overflow: hidden;
            border-radius: 8px;
        }

        .style-icon img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: transform 0.3s ease;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }

        .style-card:hover .style-icon img {
            transform: scale(1.05);
        }

        .style-name {
            font-family: 'Archivo Black', sans-serif;
  font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */
            font-size: 1.125rem;
            margin-bottom: 8px;
            color: #00A651 !important;
        }

        .style-description {
            color: #C8C8C8 !important;
            font-size: 0.8125rem;
            line-height: 1.4;
        }

        .styles-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px;
            color: var(--text-secondary);
            gap: 12px;
        }

        .styles-loading .mini-spinner {
            width: 24px;
            height: 24px;
            border: 3px solid #333;
            border-top-color: var(--primary-green);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Final CTA */
        .final-cta {
            background: linear-gradient(135deg, rgba(0, 166, 81, 0.1), rgba(0, 166, 81, 0.05));
            padding: 100px 24px;
            text-align: center;
        }

        .final-cta-container {
            max-width: 800px;
            margin: 0 auto;
        }

        /* 25-year badge (21 Sep 2026). It sits ON the line between the style
           cards and this section, half in each section's existing 100px of
           padding, so it adds no height to the page (Joe: "too much wasted
           space" when it sat in the flow). Absolute = takes up no room. */
        .final-cta {
            position: relative;
        }

        .final-cta-badge {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 190px;
            height: auto;
            z-index: 2;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .final-cta-badge { width: 160px; }
        }

        .final-cta h2 {
            font-family: 'Archivo Black', sans-serif;
  font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */
            font-size: clamp(2rem, 5vw, 3.5rem);
            margin-bottom: 24px;
            line-height: 1.2;
            color: #FFFFFF !important;
        }

        .final-cta p {
            font-size: 1.25rem;
            color: #C8C8C8 !important;
            margin-bottom: 40px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .hero-content {
                padding: 0 40px;
            }

            .style-card {
                flex: 0 1 180px;
                min-width: 140px;
            }
        }
@media (max-width: 768px) {

            .hero {
                height: 70vh;
                min-height: 500px;
            }

            .hero-content {
                padding: 0 24px;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .offer-text {
                font-size: 1.125rem;
            }

            .credits-callout {
                flex-direction: column;
                text-align: center;
                padding: 16px;
            }

            .callout-icon {
                font-size: 1.25rem;
            }

            .callout-title {
                font-size: 0.9375rem;
            }

            .callout-text {
                font-size: 0.8125rem;
            }

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

            .styles-grid {
                gap: 16px;
            }

            .style-card {
                flex: 0 1 calc(50% - 8px);
                min-width: 140px;
                max-width: none;
            }

            .hero-ctas {
                flex-direction: column;
            }
}