body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
        .top-branding { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
        .top-branding img { max-width: 150px; height: auto; }
        .top-branding-right { display: flex; gap: 1rem; align-items: center; }
        .top-branding-right a { color: #667eea; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
        .top-branding-right a:hover { opacity: 0.8; }
        .page-container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
        .header-section { text-align: center; color: white; margin-bottom: 3rem; }
        .header-section h1 { font-size: 3rem; font-weight: bold; margin-bottom: 1rem; color: #fff; }
        .header-section p { font-size: 1.3rem; opacity: 0.9; margin: 0; }

        /* Filter Controls Styling */
        .filter-section { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 2.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
        .filter-label { font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; display: block; }
        .form-select-custom { border: 2px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 1rem; font-weight: 500; color: #475569; transition: border-color 0.2s; }
        .form-select-custom:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }

        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 3rem; }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            border-color: #667eea;
        }
        .card-top { margin-bottom: 1.5rem; }
        .industry-tag { display: inline-block; background: #e0e7ff; color: #4338ca; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 20px; margin-bottom: 1rem; text-transform: uppercase; }
        .feature-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1.25rem; }
        .feature-card h3 { color: #1e293b; font-weight: 600; margin-bottom: 0.5rem; font-size: 1.2rem; }
        .feature-card p { color: #64748b; margin-bottom: 1rem; line-height: 1.5; font-size: 0.9rem; }
        .skills-paragraph { font-size: 0.825rem; color: #475569; background: #f8fafc; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; border-left: 3px solid #cbd5e1; }
        
        .price-tag { font-size: 1.4rem; font-weight: 700; color: #667eea; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.25rem; }
        .price-tag span { font-size: 0.85rem; color: #64748b; font-weight: 400; }
        .feature-card .btn { width: 100%; padding: 0.75rem; font-weight: 600; border-radius: 8px; margin-bottom: 0.75rem; }
        
        .status-badge { display: inline-block; text-align: center; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 1rem; border-radius: 20px; width: max-content; }
        .status-available { background: #d1fae5; color: #065f46; }
        .status-coming-soon { background: #fed7aa; color: #92400e; }

        .benefits-section { background: white; border-radius: 12px; padding: 3rem; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
        .benefits-section h2 { color: #1e293b; font-weight: bold; margin-bottom: 2rem; font-size: 2rem; }
        .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .benefit-item { display: flex; gap: 1.5rem; align-items: flex-start; }
        .benefit-icon { width: 40px; height: 40px; background: #dbeafe; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0284c7; font-size: 1.2rem; }
        .benefit-text h4 { color: #1e293b; font-weight: 600; margin-bottom: 0.25rem; }
        .benefit-text p { color: #64748b; margin: 0; font-size: 0.9rem; }

        .pricing-banner { background: white; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; }
        .pricing-banner h2 { color: #1e293b; font-size: 1.8rem; font-weight: bold; margin-bottom: 1rem; }
        .price { font-size: 2.5rem; color: #667eea; font-weight: bold; margin-bottom: 0.5rem; }
        .price-description { color: #64748b; margin-bottom: 2rem; }
        .cta-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 1rem 3rem; font-size: 1.1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
        .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); color: white; }
        .back-link { color: white; text-decoration: none; font-weight: 600; margin-bottom: 2rem; display: inline-flex; align-items: center; gap: 0.5rem; }
        .back-link:hover { opacity: 0.8; }

        /* Industry Pack Cards */
        .packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
        .pack-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.2s; border: 2px solid transparent; }
        .pack-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: #6366f1; }
        .pack-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 0.75rem; }
        .pack-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
        .pack-name { font-weight: 700; color: #1e293b; font-size: 1rem; margin: 0; line-height: 1.3; }
        .pack-count { font-size: 0.78rem; color: #64748b; margin: 2px 0 0 0; }
        .pack-price-row { display: flex; align-items: baseline; gap: 4px; margin: 0.6rem 0; }
        .pack-price-num { font-size: 1.5rem; font-weight: 800; color: #6366f1; }
        .pack-price-label { font-size: 0.78rem; color: #94a3b8; }
        .pack-savings { display: inline-block; background: #dcfce7; color: #15803d; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
        .pack-desc { font-size: 0.8rem; color: #64748b; margin-bottom: 1rem; line-height: 1.5; }
        .pack-btn-row { display: flex; gap: 8px; }
        .pack-btn-browse { flex: 1; padding: 9px 8px; border: 1.5px solid #6366f1; color: #6366f1; background: transparent; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: background 0.15s; }
        .pack-btn-browse:hover { background: rgba(99,102,241,0.08); }
        .pack-btn-unlock { flex: 2; padding: 9px 8px; background: linear-gradient(135deg, #6366f1, #818cf8); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: opacity 0.15s; }
        .pack-btn-unlock:hover { opacity: 0.85; }
        .packs-header { text-align: center; color: white; margin-bottom: 1.5rem; }
        .packs-header p { opacity: 0.88; font-size: 1rem; margin: 0; }

        @media (max-width: 768px) {
            .header-section h1 { font-size: 2rem; }
            .header-section p { font-size: 1rem; }
            .benefits-section { padding: 2rem 1.5rem; }
            .benefits-section h2 { font-size: 1.5rem; }
            .features-grid { gap: 1.5rem; }
        }


        /* Gate dialog (the site header is shared: assets/assets/js/site-header.js) */
        .page-container { padding-top: 40px; }

        .pf-gate { position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.65); display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .pf-gate[hidden] { display: none; }
        .pf-gate-card { position: relative; background: #fff; border-radius: 16px; padding: 2rem 1.75rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,.35); }
        .pf-gate-close { position: absolute; top: .75rem; right: .9rem; background: none; border: 0; color: #94a3b8; font-size: 1.1rem; cursor: pointer; }
        .pf-gate-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: #e0e7ff; color: #4338ca; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        .pf-gate-card h2 { font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-bottom: .5rem; }
        .pf-gate-card p { color: #64748b; font-size: .92rem; line-height: 1.6; margin-bottom: 1.25rem; }
        .pf-gate-btn { display: flex; width: 100%; margin-top: .6rem; padding: .75rem 1rem; }