/* =====================================================
           Generator Page
        ===================================================== */

        .generator-page {
            width: 100%;
            min-height: 70vh;
            padding: 35px 18px 65px;
            background: #f5f8fc;
        }

        .generator-page-container {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
        }

        /* Breadcrumb */

        .generator-breadcrumb {
            margin-bottom: 22px;
            color: #7b8ba0;
            font-size: 13px;
        }

        .generator-breadcrumb a {
            color: #4774a5;
            text-decoration: none;
        }

        .generator-breadcrumb a:hover {
            text-decoration: underline;
        }

        .generator-breadcrumb span {
            margin: 0 8px;
        }

        /* Hero */

        .generator-hero {
            max-width: 850px;
            margin: 0 auto 28px;
            text-align: center;
        }

        .generator-hero .eyebrow {
            display: inline-block;
            margin-bottom: 12px;
            padding: 6px 13px;
            color: #087e79;
            background: #e0f7f4;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .generator-hero h1 {
            margin: 0 0 14px;
            color: #14253b;
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 850;
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .generator-hero p {
            max-width: 760px;
            margin: 0 auto;
            color: #64748b;
            font-size: 16px;
            line-height: 1.8;
        }

        /* Feature row */

        .generator-features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px 22px;
            margin: 22px 0 30px;
        }

        .generator-feature {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #52647b;
            font-size: 13px;
            font-weight: 650;
        }

        .generator-feature .check {
            color: #0caa91;
            font-weight: 900;
        }

        /* Generator card */

        .generator-workspace {
            width: 100%;
            padding: 18px;
            background: #ffffff;
            border: 1px solid #e2eaf2;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(25, 50, 80, .08);
        }

        .generator-workspace-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
            padding: 2px 3px 15px;
            border-bottom: 1px solid #e8eef5;
        }

        .generator-workspace-heading h2 {
            margin: 0;
            color: #1c3048;
            font-size: 17px;
            font-weight: 800;
        }

        .generator-workspace-heading span {
            color: #8494a8;
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 1px;
        }

        /* Keep the original generator mount */

        #sfmaker-app {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        /* Instructions */

        .generator-guide {
            max-width: 1050px;
            margin: 45px auto 0;
        }

        .generator-guide h2 {
            margin: 0 0 12px;
            color: #172b43;
            font-size: 24px;
            font-weight: 850;
            text-align: center;
        }

        .generator-guide-intro {
            max-width: 720px;
            margin: 0 auto 25px;
            color: #6b7c91;
            font-size: 14px;
            line-height: 1.8;
            text-align: center;
        }

        .generator-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .generator-step {
            padding: 22px;
            background: #ffffff;
            border: 1px solid #e5ebf2;
            border-radius: 12px;
        }

        .generator-step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin-bottom: 13px;
            color: #087e79;
            background: #e0f7f4;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 850;
        }

        .generator-step h3 {
            margin: 0 0 8px;
            color: #20344d;
            font-size: 15px;
            font-weight: 800;
        }

        .generator-step p {
            margin: 0;
            color: #718198;
            font-size: 13px;
            line-height: 1.7;
        }

        /* Bottom CTA */

        .generator-bottom-note {
            margin-top: 35px;
            padding: 22px;
            color: #52647b;
            background: #edf4fa;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.8;
            text-align: center;
        }

        .generator-bottom-note strong {
            color: #243c57;
        }

        /* Responsive */

        @media (max-width: 768px) {

            .generator-page {
                padding: 25px 12px 45px;
            }

            .generator-hero {
                margin-bottom: 22px;
            }

            .generator-hero p {
                font-size: 14px;
            }

            .generator-features {
                gap: 10px 14px;
            }

            .generator-feature {
                font-size: 12px;
            }

            .generator-workspace {
                padding: 10px;
                border-radius: 11px;
            }

            .generator-workspace-heading {
                padding: 5px 3px 12px;
            }

            .generator-steps {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .generator-step {
                padding: 18px;
            }

            .generator-guide h2 {
                font-size: 21px;
            }
        }