/* /Components/Explorer/CareerFilters.razor.rz.scp.css */
/* ==========================================================
   CAREER RESULTS FILTERS
   ========================================================== */

.career-filter-panel[b-w2oo590ypd] {
    margin: 1.15rem 0 1.5rem;
    padding: 1.15rem 1.25rem 1.25rem;
    border: 1px solid #dbe4f2;
    border-radius: 16px;
    background: linear-gradient( 135deg, #ffffff 0%, #f8fafc 100% );
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}


/* ==========================================================
   HEADER
   ========================================================== */

.career-filter-heading[b-w2oo590ypd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.career-filter-kicker[b-w2oo590ypd] {
    display: block;
    margin-bottom: .18rem;
    color: #2563eb;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.career-filter-heading h3[b-w2oo590ypd] {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.career-filter-heading p[b-w2oo590ypd] {
    margin: .2rem 0 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.45;
}


/* ==========================================================
   CONTROLS
   ========================================================== */

.career-filter-controls[b-w2oo590ypd] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
    gap: .9rem;
}

.career-filter-field[b-w2oo590ypd] {
    min-width: 0;
}

    .career-filter-field label[b-w2oo590ypd] {
        display: block;
        margin: 0 0 .35rem .1rem;
        color: #475569;
        font-size: .7rem;
        font-weight: 850;
    }


/* ==========================================================
   INPUT SHELL
   ========================================================== */

.career-filter-input[b-w2oo590ypd] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid #d5dfec;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .career-filter-input:focus-within[b-w2oo590ypd] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
        background: #ffffff;
    }


    /* LEFT ICON */

    .career-filter-input > i:first-child[b-w2oo590ypd] {
        position: absolute;
        left: .95rem;
        z-index: 2;
        color: #2563eb;
        font-size: .95rem;
        pointer-events: none;
    }


    /* ==========================================================
   SEARCH
   ========================================================== */

    .career-filter-input input[b-w2oo590ypd] {
        width: 100%;
        min-height: 46px;
        padding: .7rem .9rem .7rem 2.65rem;
        border: 0;
        outline: 0;
        border-radius: 12px;
        background: transparent;
        color: #0f172a;
        font-size: .82rem;
        font-weight: 650;
    }

        .career-filter-input input[b-w2oo590ypd]::placeholder {
            color: #94a3b8;
            font-weight: 500;
        }


/* ==========================================================
   EDUCATION SELECT
   ========================================================== */

.career-filter-select select[b-w2oo590ypd] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 46px;
    padding: .7rem 2.7rem .7rem 2.65rem;
    border: 0;
    outline: 0;
    border-radius: 12px;
    background: transparent;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.career-filter-chevron[b-w2oo590ypd] {
    position: absolute;
    right: .95rem;
    color: #64748b;
    font-size: .75rem;
    pointer-events: none;
}


/* ==========================================================
   CLEAR FILTERS
   ========================================================== */

.career-filter-clear[b-w2oo590ypd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .75rem;
    border: 1px solid #dbe4f2;
    border-radius: 9px;
    background: #ffffff;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

    .career-filter-clear:hover[b-w2oo590ypd] {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
    }


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767.98px) {

    .career-filter-controls[b-w2oo590ypd] {
        grid-template-columns: 1fr;
    }

    .career-filter-heading[b-w2oo590ypd] {
        flex-direction: column;
    }

    .career-filter-clear[b-w2oo590ypd] {
        align-self: flex-start;
    }
}
/* /Components/Explorer/CareerResultsTable.razor.rz.scp.css */
/* ==========================================================
   CAREER RESULTS TABLE
   Premium SaaS Table
   ========================================================== */

.career-results-card[b-h3dbm638y3] {
    border: 1px solid #e5eaf3;
    border-radius: 22px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15,23,42,.06);
}

.career-results-toolbar[b-h3dbm638y3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid #edf2f7;
    background: linear-gradient(180deg,#fbfcff,#ffffff);
}

.results-kicker[b-h3dbm638y3] {
    display: inline-block;
    color: #3568f5;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-bottom: .45rem;
}

.career-results-toolbar h3[b-h3dbm638y3] {
    margin: 0 0 .4rem;
    font-size: 1.7rem;
    font-weight: 800;
    color: #183153;
}

.career-results-toolbar p[b-h3dbm638y3] {
    margin: 0;
    color: #667085;
    font-size: .92rem;
}

.results-count-badge[b-h3dbm638y3] {
    min-width: 170px;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg,#4f7cff,#2347d8);
    color: white;
    text-align: center;
    box-shadow: 0 16px 36px rgba(79,124,255,.25);
    font-weight: 700;
}

    .results-count-badge small[b-h3dbm638y3] {
        display: block;
        font-size: .70rem;
        opacity: .85;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .results-count-badge strong[b-h3dbm638y3] {
        display: block;
        font-size: 2rem;
        line-height: 1;
        margin: .25rem 0;
    }

    .results-count-badge span[b-h3dbm638y3] {
        font-size: .82rem;
        opacity: .9;
    }

/* ==========================================================
   TABLE
   ========================================================== */

.table-responsive[b-h3dbm638y3] {
    overflow-x: auto;
}

.career-results-table[b-h3dbm638y3] {
    margin: 0;
}

    .career-results-table thead th[b-h3dbm638y3] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 18px 20px;
        background: #f8fbff;
        color: #667085;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        border-bottom: 1px solid #e5eaf3;
        white-space: nowrap;
    }

    .career-results-table tbody td[b-h3dbm638y3] {
        padding: 20px;
        vertical-align: middle;
        border-bottom: 1px solid #eef2f7;
    }

.career-row[b-h3dbm638y3] {
    transition: all .22s ease;
}

    .career-row:hover[b-h3dbm638y3] {
        background: #f8fbff;
    }

        .career-row:hover td:first-child[b-h3dbm638y3] {
            box-shadow: inset 4px 0 0 #3568f5;
        }

/* ==========================================================
   RANK
   ========================================================== */

.career-rank-wrapper[b-h3dbm638y3] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.rank-medal[b-h3dbm638y3] {
    font-size: 1.25rem;
}

.career-rank[b-h3dbm638y3] {
    font-weight: 800;
    color: #183153;
}

/* ==========================================================
   CAREER BUTTON
   ========================================================== */

.career-title-button[b-h3dbm638y3] {
    padding: 0;
    border: none;
    background: transparent;
    color: #183153;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    transition: .2s;
}

    .career-title-button:hover[b-h3dbm638y3] {
        color: #3568f5;
    }

/* ==========================================================
   VALUES
   ========================================================== */

.salary-value[b-h3dbm638y3] {
    font-weight: 800;
    color: #14804a;
}
.salary-display[b-h3dbm638y3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hourly-wage-value[b-h3dbm638y3] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

.employment-value[b-h3dbm638y3] {
    font-weight: 700;
    color: #334155;
}

/* ==========================================================
   PILLS
   ========================================================== */

.growth-pill[b-h3dbm638y3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 7px 14px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #14804a;
    font-size: .82rem;
    font-weight: 700;
}

.education-pill[b-h3dbm638y3] {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3559d7;
    font-size: .82rem;
    font-weight: 700;
}

.score-pill[b-h3dbm638y3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg,#4f7cff,#2347d8);
    color: white;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(79,124,255,.22);
}

/* ==========================================================
   EMPTY RESULTS
   ========================================================== */

.no-results-message[b-h3dbm638y3] {
    padding: 3rem;
    border: 1px dashed #d7e2f2;
    border-radius: 20px;
    background: #fbfcff;
    text-align: center;
}

    .no-results-message strong[b-h3dbm638y3] {
        display: block;
        margin-bottom: .6rem;
        color: #183153;
        font-size: 1.2rem;
    }

    .no-results-message p[b-h3dbm638y3] {
        margin: 0;
        color: #667085;
    }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:991px) {

    .career-results-toolbar[b-h3dbm638y3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .results-count-badge[b-h3dbm638y3] {
        width: 100%;
    }
}

@media (max-width:768px) {

    .career-results-table thead[b-h3dbm638y3] {
        display: none;
    }

    .career-results-table[b-h3dbm638y3],
    .career-results-table tbody[b-h3dbm638y3],
    .career-results-table tr[b-h3dbm638y3],
    .career-results-table td[b-h3dbm638y3] {
        display: block;
        width: 100%;
    }

        .career-results-table tr[b-h3dbm638y3] {
            margin: 1rem;
            border: 1px solid #e5eaf3;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(15,23,42,.05);
        }

        .career-results-table td[b-h3dbm638y3] {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 14px 18px;
            border-bottom: 1px solid #eef2f7;
        }

            .career-results-table td:last-child[b-h3dbm638y3] {
                border-bottom: none;
            }
}
/* /Components/Explorer/GeographySelector.razor.rz.scp.css */
/* ==========================================================
   CAREERGPS GEOGRAPHY SELECTOR
   Scoped styles for GeographySelector.razor
   ========================================================== */

.explorer-geography-selector[b-sn8me8zfgm] {
    width: 100%;
}

.market-type-grid[b-sn8me8zfgm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.market-option[b-sn8me8zfgm] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 8.5rem;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe4f2;
    border-radius: 1rem;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

    .market-option:hover[b-sn8me8zfgm] {
        transform: translateY(-3px);
        border-color: #93c5fd;
        box-shadow: 0 16px 34px rgba(37, 99, 235, .1);
    }

    .market-option.selected[b-sn8me8zfgm] {
        border-color: #2563eb;
        background: linear-gradient(180deg, #f2f7ff 0%, #fff 100%);
        box-shadow: 0 0 0 1px #2563eb, 0 16px 34px rgba(37, 99, 235, .12);
    }

    .market-option input[type="radio"][b-sn8me8zfgm] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .market-option:focus-within[b-sn8me8zfgm] {
        outline: 3px solid rgba(37, 99, 235, .22);
        outline-offset: 2px;
    }

.market-option-icon[b-sn8me8zfgm] {
    display: flex;
    width: 3.55rem;
    height: 3.55rem;
    flex: 0 0 3.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}

.market-option-content[b-sn8me8zfgm] {
    min-width: 0;
    padding-right: 1.35rem;
}

    .market-option-content h4[b-sn8me8zfgm] {
        margin: 0 0 .35rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -.012em;
    }

    .market-option-content p[b-sn8me8zfgm] {
        margin: 0;
        color: #64748b;
        font-size: .78rem;
        line-height: 1.45;
    }

.market-selected[b-sn8me8zfgm] {
    position: absolute;
    top: .9rem;
    right: .9rem;
    color: #2563eb;
    font-size: 1.05rem;
}

.selected-market-card[b-sn8me8zfgm] {
    padding: 1.15rem;
    border: 1px solid #dbe4f2;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

.selected-market-header[b-sn8me8zfgm] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

    .selected-market-header > i[b-sn8me8zfgm] {
        display: flex;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
        align-items: center;
        justify-content: center;
        border-radius: .75rem;
        background: #dbeafe;
        color: #2563eb;
        font-size: 1rem;
    }

    .selected-market-header small[b-sn8me8zfgm],
    .selected-market-header strong[b-sn8me8zfgm] {
        display: block;
    }

    .selected-market-header small[b-sn8me8zfgm] {
        margin-bottom: .08rem;
        color: #64748b;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .selected-market-header strong[b-sn8me8zfgm] {
        color: #0f172a;
        font-size: .95rem;
        font-weight: 800;
    }

.selected-market-card .form-select[b-sn8me8zfgm] {
    min-height: 3.15rem;
    border-color: #cbd5e1;
    border-radius: .85rem;
    background-color: #fff;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 650;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

    .selected-market-card .form-select:focus[b-sn8me8zfgm] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .14);
    }

.market-benefits[b-sn8me8zfgm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.market-benefit[b-sn8me8zfgm] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 750;
    text-align: center;
}

    .market-benefit i[b-sn8me8zfgm] {
        color: #2563eb;
        font-size: .9rem;
    }

@media (max-width: 767.98px) {
    .market-type-grid[b-sn8me8zfgm],
    .market-benefits[b-sn8me8zfgm] {
        grid-template-columns: 1fr;
    }

    .market-option[b-sn8me8zfgm] {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .market-option[b-sn8me8zfgm] {
        align-items: flex-start;
        padding: 1rem;
    }

    .market-option-icon[b-sn8me8zfgm] {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
    }
}
/* /Components/Explorer/ScoringModelSelector.razor.rz.scp.css */
.explorer-section[b-msbh66bxgf] {
    width: 100%;
}

.section-heading[b-msbh66bxgf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.step-number[b-msbh66bxgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 0.5rem 1.25rem rgba(37, 99, 235, 0.22);
}

.section-heading h2[b-msbh66bxgf] {
    margin: 0 0 0.25rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    color: #172033;
}

.section-heading p[b-msbh66bxgf] {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.model-grid[b-msbh66bxgf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.model-card[b-msbh66bxgf] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 140px;
    padding: 1rem 1.1rem;
    margin: 0;
    border: 1px solid #dbe3ef;
    border-radius: 1rem;
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    .model-card:hover[b-msbh66bxgf] {
        transform: translateY(-2px);
        border-color: #a9bff7;
        box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.09);
    }

    .model-card.selected[b-msbh66bxgf] {
        border-color: #4f6fdc;
        background: linear-gradient(145deg, #ffffff, #f4f7ff);
        box-shadow: 0 0 0 3px rgba(79, 111, 220, 0.11), 0 0.75rem 1.75rem rgba(37, 59, 128, 0.1);
    }

    .model-card input[type="radio"][b-msbh66bxgf] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.model-card-header[b-msbh66bxgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

    .model-card-header strong[b-msbh66bxgf] {
        color: #172033;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.3;
    }

.default-badge[b-msbh66bxgf] {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #e8efff;
    color: #3557bd;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.model-card p[b-msbh66bxgf] {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .model-grid[b-msbh66bxgf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .section-heading[b-msbh66bxgf] {
        gap: 0.75rem;
    }

    .model-grid[b-msbh66bxgf] {
        grid-template-columns: 1fr;
    }

    .model-card[b-msbh66bxgf] {
        min-height: auto;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   CareerGPS Pro - Main Layout
   ========================================================================== */


/* ==========================================================================
   1. LAYOUT
   ========================================================================== */

.career-gps-layout[b-4r45edis9w] {
    min-height: 100vh;
    background: radial-gradient( circle at top left, rgba(37, 99, 235, 0.035), transparent 32% ), #f7f9fc;
}


/* ==========================================================================
   2. HEADER
   ========================================================================== */

.career-gps-header[b-4r45edis9w] {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 10px 35px rgba(15, 23, 42, 0.045);
}


.career-gps-header-container[b-4r45edis9w] {
    width: calc(100% - 32px);
    max-width: 1800px;
    height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}


/* ==========================================================================
   3. BRAND
   ========================================================================== */

.career-gps-brand[b-4r45edis9w] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}


    .career-gps-brand:hover[b-4r45edis9w] {
        color: inherit;
        text-decoration: none;
    }


.career-gps-brand-icon[b-4r45edis9w] {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e5eaf2;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}


.career-gps-logo[b-4r45edis9w] {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
}


.career-gps-brand-text[b-4r45edis9w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.brand-primary[b-4r45edis9w] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #14213d;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}


.brand-pro[b-4r45edis9w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border-radius: 5px;
    background: linear-gradient( 135deg, #1769ff, #4c63ff );
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.03em;
}


.brand-secondary[b-4r45edis9w] {
    margin-top: 5px;
    color: #8b96aa;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.career-gps-navigation[b-4r45edis9w] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}


    /*
   IMPORTANT:
   NavLink is a child Blazor component.

   Because this file is MainLayout.razor.css, CSS isolation applies.
   ::deep is required to style the <a> elements rendered by NavLink.
*/


    .career-gps-navigation[b-4r45edis9w]  a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 42px;
        padding: 0 11px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: #526174;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }


        .career-gps-navigation[b-4r45edis9w]  a:link,
        .career-gps-navigation[b-4r45edis9w]  a:visited {
            color: #526174;
            text-decoration: none;
        }


        .career-gps-navigation[b-4r45edis9w]  a i {
            color: #8290a3;
            font-size: 0.9rem;
            transition: color 160ms ease, transform 160ms ease;
        }


        /* NAV HOVER */

        .career-gps-navigation[b-4r45edis9w]  a:hover {
            color: #1769ff;
            background: #f4f7ff;
            border-color: #e3eaff;
            text-decoration: none;
            transform: translateY(-1px);
        }


            .career-gps-navigation[b-4r45edis9w]  a:hover i {
                color: #1769ff;
                transform: translateY(-1px);
            }


        /* ACTIVE PAGE */

        .career-gps-navigation[b-4r45edis9w]  a.active {
            color: #155bd7;
            background: #edf4ff;
            border-color: #dce8ff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
            text-decoration: none;
        }


            .career-gps-navigation[b-4r45edis9w]  a.active i {
                color: #1769ff;
            }


            .career-gps-navigation[b-4r45edis9w]  a.active::after {
                content: "";
                position: absolute;
                left: 25%;
                right: 25%;
                bottom: -20px;
                height: 3px;
                border-radius: 999px;
                background: linear-gradient( 90deg, #1769ff, #536dfe );
            }


/* ==========================================================================
   5. USER PANEL
   ========================================================================== */

.career-gps-user-panel[b-4r45edis9w] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
}


/* ==========================================================================
   6. ACCOUNT CHIP
   ========================================================================== */

.career-gps-account-chip[b-4r45edis9w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px 7px 8px;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #f9fbfd;
}


.career-gps-account-link[b-4r45edis9w] {
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}


    .career-gps-account-link:hover[b-4r45edis9w] {
        color: inherit;
        background: #ffffff;
        border-color: #d8e2f0;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        transform: translateY(-1px);
        text-decoration: none;
    }


.career-gps-account-avatar[b-4r45edis9w] {
    width: 33px;
    height: 33px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaf2ff;
    color: #1769ff;
    font-size: 0.93rem;
}


.career-gps-user-info[b-4r45edis9w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}


.career-gps-user-email[b-4r45edis9w] {
    display: block;
    color: #344256;
    font-size: 0.73rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}


.career-gps-user-subscription[b-4r45edis9w] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}


    .career-gps-user-subscription.free[b-4r45edis9w] {
        color: #64748b;
    }


    .career-gps-user-subscription.pro[b-4r45edis9w] {
        color: #b77905;
    }


/* ==========================================================================
   7. USER ACTIONS
   ========================================================================== */

.career-gps-upgrade-button[b-4r45edis9w],
.career-gps-login-button[b-4r45edis9w],
.career-gps-register-button[b-4r45edis9w],
.career-gps-logout-button[b-4r45edis9w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}


/* ==========================================================================
   8. UPGRADE
   ========================================================================== */

.career-gps-upgrade-button[b-4r45edis9w] {
    padding: 0 14px;
    border: 1px solid transparent;
    background: linear-gradient( 135deg, #1769ff, #3158e8 );
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.23);
}


    .career-gps-upgrade-button:hover[b-4r45edis9w] {
        transform: translateY(-2px);
        color: #ffffff;
        box-shadow: 0 12px 27px rgba(37, 99, 235, 0.31);
        text-decoration: none;
    }


/* ==========================================================================
   9. LOGIN
   ========================================================================== */

.career-gps-login-button[b-4r45edis9w] {
    padding: 0 14px;
    color: #475569;
}


    .career-gps-login-button:hover[b-4r45edis9w] {
        color: #1769ff;
        background: #f1f6ff;
        text-decoration: none;
    }


/* ==========================================================================
   10. REGISTER
   ========================================================================== */

.career-gps-register-button[b-4r45edis9w] {
    padding: 0 16px;
    border: 1px solid transparent;
    background: #1769ff;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}


    .career-gps-register-button:hover[b-4r45edis9w] {
        transform: translateY(-2px);
        color: #ffffff;
        background: #125ce4;
        box-shadow: 0 12px 28px rgba(37, 99, 235, 0.30);
        text-decoration: none;
    }


/* ==========================================================================
   11. LOGOUT
   ========================================================================== */

.career-gps-logout-form[b-4r45edis9w] {
    margin: 0;
}


.career-gps-logout-button[b-4r45edis9w] {
    padding: 0 12px;
    border: 1px solid #e5eaf1;
    background: #ffffff;
    color: #66758a;
    cursor: pointer;
}


    .career-gps-logout-button:hover[b-4r45edis9w] {
        transform: translateY(-1px);
        border-color: #d6deea;
        background: #f7f9fc;
        color: #27364a;
    }


/* ==========================================================================
   12. MAIN CONTENT
   ========================================================================== */

.career-gps-main[b-4r45edis9w] {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 48px 40px 100px;
}


/* ==========================================================================
   13. MEDIUM DESKTOP
   ========================================================================== */

@media (max-width: 1450px) {

    .career-gps-header-container[b-4r45edis9w] {
        width: calc(100% - 24px);
        gap: 14px;
    }


    .career-gps-brand[b-4r45edis9w] {
        gap: 9px;
    }


    .career-gps-navigation[b-4r45edis9w] {
        gap: 2px;
    }


        .career-gps-navigation[b-4r45edis9w]  a {
            padding-right: 8px;
            padding-left: 8px;
            font-size: 0.78rem;
        }


    .career-gps-user-panel[b-4r45edis9w] {
        gap: 6px;
    }


    .career-gps-upgrade-button[b-4r45edis9w] {
        padding-right: 11px;
        padding-left: 11px;
    }


    .career-gps-logout-button[b-4r45edis9w] {
        padding-right: 10px;
        padding-left: 10px;
    }
}


/* ==========================================================================
   14. SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1220px) {

    .brand-secondary[b-4r45edis9w] {
        display: none;
    }


    .career-gps-navigation[b-4r45edis9w]  a {
        gap: 5px;
        padding-right: 7px;
        padding-left: 7px;
        font-size: 0.76rem;
    }
}


/* ==========================================================================
   15. TABLET / SMALL LAPTOP
   ========================================================================== */

@media (max-width: 1100px) {

    .career-gps-header-container[b-4r45edis9w] {
        height: auto;
        flex-wrap: wrap;
        row-gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }


    .career-gps-brand[b-4r45edis9w] {
        order: 1;
    }


    .career-gps-user-panel[b-4r45edis9w] {
        order: 2;
        margin-left: auto;
    }


    .career-gps-navigation[b-4r45edis9w] {
        order: 3;
        width: 100%;
        flex-basis: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-top: 7px;
        border-top: 1px solid #edf1f6;
        scrollbar-width: none;
    }


        .career-gps-navigation[b-4r45edis9w]::-webkit-scrollbar {
            display: none;
        }


        .career-gps-navigation[b-4r45edis9w]  a {
            flex: 0 0 auto;
        }


            .career-gps-navigation[b-4r45edis9w]  a.active::after {
                bottom: -8px;
            }
}


/* ==========================================================================
   16. MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .career-gps-header-container[b-4r45edis9w] {
        width: calc(100% - 24px);
    }


    .career-gps-brand-icon[b-4r45edis9w] {
        width: 42px;
        height: 42px;
    }


    .career-gps-logo[b-4r45edis9w] {
        width: 40px;
        height: 40px;
    }


    .brand-primary[b-4r45edis9w] {
        font-size: 0.92rem;
    }


    .brand-secondary[b-4r45edis9w] {
        display: none;
    }


    .career-gps-account-chip[b-4r45edis9w] {
        padding-right: 8px;
    }


    .career-gps-user-subscription[b-4r45edis9w] {
        font-size: 0.55rem;
    }


    .career-gps-navigation[b-4r45edis9w]  a {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.77rem;
    }


    .career-gps-upgrade-button span[b-4r45edis9w],
    .career-gps-logout-button span[b-4r45edis9w] {
        display: none;
    }


    .career-gps-upgrade-button[b-4r45edis9w],
    .career-gps-logout-button[b-4r45edis9w] {
        width: 40px;
        padding: 0;
    }


    .career-gps-main[b-4r45edis9w] {
        padding: 28px 20px 70px;
    }
}


/* ==========================================================================
   17. SMALL MOBILE
   ========================================================================== */

@media (max-width: 520px) {

    .career-gps-header-container[b-4r45edis9w] {
        width: calc(100% - 18px);
    }


    .career-gps-account-chip[b-4r45edis9w] {
        display: none;
    }


    .career-gps-navigation[b-4r45edis9w] {
        gap: 1px;
    }


        .career-gps-navigation[b-4r45edis9w]  a {
            font-size: 0.73rem;
        }


    .career-gps-main[b-4r45edis9w] {
        padding: 22px 14px 60px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e8v1zmliii],
.components-reconnect-repeated-attempt-visible[b-e8v1zmliii],
.components-reconnect-failed-visible[b-e8v1zmliii],
.components-pause-visible[b-e8v1zmliii],
.components-resume-failed-visible[b-e8v1zmliii],
.components-rejoining-animation[b-e8v1zmliii] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-retrying[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-failed[b-e8v1zmliii],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e8v1zmliii] {
    display: block;
}


#components-reconnect-modal[b-e8v1zmliii] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e8v1zmliii 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e8v1zmliii 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e8v1zmliii 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e8v1zmliii]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-e8v1zmliii 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e8v1zmliii {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e8v1zmliii {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e8v1zmliii {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e8v1zmliii] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e8v1zmliii] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e8v1zmliii] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e8v1zmliii] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e8v1zmliii] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e8v1zmliii] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e8v1zmliii] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e8v1zmliii 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e8v1zmliii] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e8v1zmliii {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/OpportunityMap.razor.rz.scp.css */
/* ==========================================================================
   CAREERGPS OPPORTUNITY INDEX
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.opportunity-map-section[b-1ppzhzk693] {
    padding: 5.5rem 0 6.5rem;
    background: radial-gradient( circle at 50% 0%, rgba(37, 99, 235, 0.07), transparent 34% ), linear-gradient( 180deg, #f7faff 0%, #edf4fb 100% );
}


/* ==========================================================================
   SECTION INTRO
   ========================================================================== */

.opportunity-map-header[b-1ppzhzk693] {
    position: relative;
    max-width: 820px;
    margin: 0 auto 3.5rem;
    text-align: center;
}


.map-eyebrow[b-1ppzhzk693] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem 0.9rem;
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.07);
    color: #1769ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.opportunity-map-header h2[b-1ppzhzk693] {
    margin: 1.25rem 0 0.9rem;
    color: #14213d;
    font-size: clamp(2.25rem, 4vw, 3.6rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.045em;
}


    .opportunity-map-header h2 span[b-1ppzhzk693] {
        color: #1769ff;
    }


.opportunity-map-header > p[b-1ppzhzk693] {
    max-width: 690px;
    margin: 0 auto;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.75;
}


.market-period[b-1ppzhzk693] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid #e2e9f2;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #8290a5;
    font-size: 0.75rem;
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.035);
}


    .market-period i[b-1ppzhzk693] {
        color: #1769ff;
    }


    .market-period strong[b-1ppzhzk693] {
        color: #26364d;
        font-weight: 800;
    }


/* ==========================================================================
   PRODUCT SHELL
   ========================================================================== */

.opportunity-map-shell[b-1ppzhzk693] {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, 0.75fr);
    gap: 1.5rem;
    align-items: stretch;
}


    .opportunity-map-shell > *[b-1ppzhzk693] {
        min-width: 0;
    }


/* ==========================================================================
   MAP PANEL
   ========================================================================== */

.map-panel[b-1ppzhzk693] {
    min-width: 0;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(220, 229, 240, 0.95);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.07);
}


.map-panel-heading[b-1ppzhzk693] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}


.panel-label[b-1ppzhzk693] {
    display: block;
    margin-bottom: 0.42rem;
    color: #1769ff;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.map-panel-heading h3[b-1ppzhzk693] {
    margin: 0;
    color: #14213d;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}


.map-instruction[b-1ppzhzk693] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.45rem;
    margin-top: 0.25rem;
    color: #8a98ac;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}


    .map-instruction i[b-1ppzhzk693] {
        color: #1769ff;
    }


/* ==========================================================================
   MAP CANVAS
   ========================================================================== */

.map-canvas[b-1ppzhzk693] {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid #e2eaf4;
    border-radius: 18px;
    background: radial-gradient( circle at center, #ffffff 0%, #f7fbff 100% );
}


/*
   IMPORTANT:
   These rules intentionally constrain the JavaScript-loaded SVG.
   Do not remove them.
*/

.svg-map-container[b-1ppzhzk693] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
}


    .svg-map-container svg[b-1ppzhzk693] {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100%;
    }


/* ==========================================================================
   LEGEND
   ========================================================================== */

.map-legend[b-1ppzhzk693] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.25rem;
}


.legend-label[b-1ppzhzk693] {
    color: #8290a4;
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
}


.legend-scale[b-1ppzhzk693] {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient( 90deg, #1e3a8a 0%, #2563eb 18%, #60a5fa 35%, #dbeafe 50%, #fca5a5 65%, #dc2626 82%, #991b1b 100% );
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.15);
}


/* ==========================================================================
   INTELLIGENCE PANEL
   ========================================================================== */

.market-detail-panel[b-1ppzhzk693] {
    position: sticky;
    top: 100px;
    height: fit-content;
    min-height: 100%;
    padding: 2rem;
    border: 1px solid rgba(220, 229, 240, 0.95);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.07);
}


.detail-panel-header[b-1ppzhzk693] {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #edf1f6;
}


.detail-eyebrow[b-1ppzhzk693] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #1769ff;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.market-detail-panel h3[b-1ppzhzk693] {
    margin: 0.9rem 0 0.45rem;
    color: #14213d;
    font-size: 1.7rem;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.035em;
}


.market-detail-panel p[b-1ppzhzk693] {
    margin: 0;
    color: #77869b;
    font-size: 0.83rem;
    line-height: 1.55;
}


/* ==========================================================================
   SCORE CARD
   ========================================================================== */

.market-score-card[b-1ppzhzk693] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient( circle at 100% 0%, rgba(96, 165, 250, 0.32), transparent 45% ), linear-gradient( 145deg, #1769ff, #214bc9 );
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.22);
}


.score-label[b-1ppzhzk693] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 700;
}


.score-value[b-1ppzhzk693] {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.045em;
}


.placeholder-score[b-1ppzhzk693] {
    color: rgba(255, 255, 255, 0.72);
}


.score-scale-track[b-1ppzhzk693] {
    height: 7px;
    margin-top: 1.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}


.score-scale-fill[b-1ppzhzk693] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #bfdbfe, #ffffff );
    transition: width 0.45s ease;
}


.score-scale-labels[b-1ppzhzk693] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.6rem;
    font-weight: 650;
}


/* ==========================================================================
   RANKING
   ========================================================================== */

.market-rank-card[b-1ppzhzk693] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e9eff6;
    border-radius: 16px;
    background: #f8fbff;
}


.rank-icon[b-1ppzhzk693] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e9f2ff;
    color: #1769ff;
    font-size: 1rem;
}


.rank-content[b-1ppzhzk693] {
    min-width: 0;
}


    .rank-content small[b-1ppzhzk693] {
        display: block;
        margin-bottom: 0.3rem;
        color: #7f8da1;
        font-size: 0.68rem;
        font-weight: 700;
    }


    .rank-content strong[b-1ppzhzk693] {
        display: block;
        margin-bottom: 0.3rem;
        color: #14213d;
        font-size: 1.55rem;
        font-weight: 850;
        line-height: 1;
    }


    .rank-content p[b-1ppzhzk693] {
        font-size: 0.72rem;
    }


/* ==========================================================================
   INTERACTION TIP
   ========================================================================== */

.preview-instruction[b-1ppzhzk693] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 14px;
    background: #f7f9fc;
}


    .preview-instruction > span[b-1ppzhzk693] {
        flex: 0 0 auto;
        color: #1769ff;
        font-size: 0.9rem;
    }


    .preview-instruction p[b-1ppzhzk693] {
        color: #77869b;
        font-size: 0.7rem;
        line-height: 1.5;
    }


/* ==========================================================================
   LOADING / ERROR
   ========================================================================== */

.map-status-card[b-1ppzhzk693],
.map-error-card[b-1ppzhzk693] {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 720px;
    margin: 3rem auto;
    padding: 1.5rem;
    border: 1px solid #e4eaf2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}


    .map-status-card strong[b-1ppzhzk693],
    .map-error-card strong[b-1ppzhzk693] {
        display: block;
        color: #14213d;
    }


    .map-status-card span[b-1ppzhzk693] {
        display: block;
        margin-top: 0.25rem;
        color: #7b899c;
        font-size: 0.85rem;
    }


    .map-error-card p[b-1ppzhzk693] {
        margin: 0.25rem 0 0;
        color: #7b899c;
    }


.map-error-icon[b-1ppzhzk693] {
    color: #dc2626;
    font-size: 1.35rem;
}


.map-status-spinner[b-1ppzhzk693] {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 4px solid #dbeafe;
    border-top-color: #1769ff;
    border-radius: 50%;
    animation: opportunity-spin-b-1ppzhzk693 0.8s linear infinite;
}


@keyframes opportunity-spin-b-1ppzhzk693 {

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   RESPONSIVE — SMALL DESKTOP / TABLET

   The map stacks BEFORE it becomes too narrow. This protects the SVG.
   ========================================================================== */

@media (max-width: 1199.98px) {

    .opportunity-map-shell[b-1ppzhzk693] {
        grid-template-columns: 1fr;
    }


    .market-detail-panel[b-1ppzhzk693] {
        position: static;
        min-height: auto;
    }


    .svg-map-container[b-1ppzhzk693] {
        min-height: 500px;
    }
}


/* ==========================================================================
   RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 767.98px) {

    .opportunity-map-section[b-1ppzhzk693] {
        padding: 4rem 0 4.5rem;
    }


    .opportunity-map-header[b-1ppzhzk693] {
        margin-bottom: 2.5rem;
        text-align: left;
    }


        .opportunity-map-header > p[b-1ppzhzk693] {
            margin-left: 0;
        }


    .market-period[b-1ppzhzk693] {
        margin-top: 1.1rem;
    }


    .map-panel[b-1ppzhzk693],
    .market-detail-panel[b-1ppzhzk693] {
        padding: 1.5rem;
        border-radius: 20px;
    }


    .map-panel-heading[b-1ppzhzk693] {
        flex-direction: column;
        margin-bottom: 1.25rem;
    }


    .map-instruction[b-1ppzhzk693] {
        margin-top: 0;
    }


    .map-canvas[b-1ppzhzk693] {
        padding: 1rem;
    }


    .svg-map-container[b-1ppzhzk693] {
        min-height: 410px;
    }
}


/* ==========================================================================
   RESPONSIVE — PHONE
   ========================================================================== */

@media (max-width: 575.98px) {

    .opportunity-map-section[b-1ppzhzk693] {
        padding: 3.25rem 0 3.75rem;
    }


    .opportunity-map-header h2[b-1ppzhzk693] {
        font-size: 2.15rem;
    }


    .opportunity-map-header > p[b-1ppzhzk693] {
        font-size: 0.9rem;
        line-height: 1.65;
    }


    .map-panel[b-1ppzhzk693],
    .market-detail-panel[b-1ppzhzk693] {
        padding: 1.15rem;
    }


    .map-panel-heading h3[b-1ppzhzk693] {
        font-size: 1.1rem;
    }


    .svg-map-container[b-1ppzhzk693] {
        min-height: 320px;
    }


    .map-legend[b-1ppzhzk693] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }


    .legend-label:last-child[b-1ppzhzk693] {
        text-align: right;
    }


    .market-detail-panel h3[b-1ppzhzk693] {
        font-size: 1.5rem;
    }


    .score-value[b-1ppzhzk693] {
        font-size: 2.6rem;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ==========================================================
   ABOUT PAGE
   ========================================================== */

.about-hero[b-ew4ftwf0zq] {
    padding: 7rem 0;
    background: linear-gradient(135deg,#0f172a 0%,#1e40af 55%,#2563eb 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

    .about-hero[b-ew4ftwf0zq]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 45%);
        pointer-events: none;
    }

.about-badge[b-ew4ftwf0zq] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-hero h1[b-ew4ftwf0zq] {
    line-height: 1.08;
}

    .about-hero h1 span[b-ew4ftwf0zq] {
        color: #93c5fd;
    }

.about-hero .lead[b-ew4ftwf0zq] {
    max-width: 720px;
    color: rgba(255,255,255,.88);
    font-size: 1.15rem;
}

.hero-actions[b-ew4ftwf0zq] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ==========================================================
   HERO STATS
   ========================================================== */

.hero-card[b-ew4ftwf0zq] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.25rem;
}

.hero-stat[b-ew4ftwf0zq] {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 22px;
    padding: 2rem;
    text-align: center;
}

    .hero-stat h2[b-ew4ftwf0zq] {
        margin: 0;
        font-size: 2.6rem;
        font-weight: 800;
        color: #fff;
    }

    .hero-stat span[b-ew4ftwf0zq] {
        color: rgba(255,255,255,.80);
        font-size: .95rem;
    }

/* ==========================================================
   GENERAL
   ========================================================== */

.section-badge[b-ew4ftwf0zq] {
    display: inline-block;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(37,99,235,.08);
    color: #2563eb;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-ew4ftwf0zq] {
    max-width: 760px;
    margin: 1.25rem auto 0;
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ==========================================================
   ABOUT CARDS
   ========================================================== */

.about-card[b-ew4ftwf0zq] {
    height: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 45px rgba(15,23,42,.05);
    transition: .3s;
}

    .about-card:hover[b-ew4ftwf0zq] {
        transform: translateY(-6px);
        box-shadow: 0 30px 60px rgba(15,23,42,.12);
    }

.featured-card[b-ew4ftwf0zq] {
    border: 2px solid #2563eb;
}

.about-icon[b-ew4ftwf0zq] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.about-card h3[b-ew4ftwf0zq] {
    font-size: 1.45rem;
    margin-bottom: 1rem;
}

.about-card p[b-ew4ftwf0zq] {
    color: #64748b;
}

.about-card ul[b-ew4ftwf0zq] {
    margin: 1.5rem 0 0;
    padding-left: 1.2rem;
}

.about-card li[b-ew4ftwf0zq] {
    margin-bottom: .7rem;
    color: #475569;
}

/* ==========================================================
   DATA SECTION
   ========================================================== */

.about-data-section[b-ew4ftwf0zq] {
    padding: 6rem 0;
    background: #f8fafc;
}

.dataset-card[b-ew4ftwf0zq] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    height: 100%;
    background: white;
    padding: 2rem;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    transition: .3s;
}

    .dataset-card:hover[b-ew4ftwf0zq] {
        transform: translateY(-5px);
        box-shadow: 0 24px 50px rgba(15,23,42,.08);
    }

.dataset-icon[b-ew4ftwf0zq] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(37,99,235,.08);
    color: #2563eb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.dataset-card h4[b-ew4ftwf0zq] {
    font-size: 1.2rem;
    margin-bottom: .7rem;
}

.dataset-card p[b-ew4ftwf0zq] {
    margin: 0;
    color: #64748b;
}

/* ==========================================================
   OPPORTUNITY SCORE
   ========================================================== */

.opportunity-score-section[b-ew4ftwf0zq] {
    background: white;
}

.score-flow-card[b-ew4ftwf0zq] {
    background: linear-gradient(145deg,#eff6ff,#ffffff);
    border-radius: 28px;
    padding: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 25px 60px rgba(15,23,42,.08);
}

.score-factor[b-ew4ftwf0zq] {
    width: 140px;
    text-align: center;
}

    .score-factor i[b-ew4ftwf0zq] {
        font-size: 2rem;
        color: #2563eb;
        display: block;
        margin-bottom: .75rem;
    }

    .score-factor span[b-ew4ftwf0zq] {
        font-weight: 600;
    }

.score-plus[b-ew4ftwf0zq] {
    font-size: 2rem;
    color: #94a3b8;
    font-weight: 700;
}

.score-arrow[b-ew4ftwf0zq] {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    color: #2563eb;
}

.score-result[b-ew4ftwf0zq] {
    width: 100%;
    text-align: center;
}

    .score-result i[b-ew4ftwf0zq] {
        font-size: 3rem;
        color: #2563eb;
    }

    .score-result h3[b-ew4ftwf0zq] {
        margin-top: 1rem;
        font-size: 2rem;
        font-weight: 800;
    }

.mini-card[b-ew4ftwf0zq] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 2rem;
    height: 100%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(15,23,42,.05);
}

    .mini-card h4[b-ew4ftwf0zq] {
        margin-bottom: 1rem;
    }

    .mini-card p[b-ew4ftwf0zq] {
        color: #64748b;
    }

/* ==========================================================
   USER CARDS
   ========================================================== */

.user-card[b-ew4ftwf0zq] {
    background: white;
    border-radius: 22px;
    padding: 2rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    height: 100%;
    transition: .3s;
}

    .user-card:hover[b-ew4ftwf0zq] {
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(15,23,42,.08);
    }

    .user-card i[b-ew4ftwf0zq] {
        font-size: 2.8rem;
        color: #2563eb;
        margin-bottom: 1rem;
    }

    .user-card h4[b-ew4ftwf0zq] {
        margin-bottom: 1rem;
    }

    .user-card p[b-ew4ftwf0zq] {
        color: #64748b;
    }

/* ==========================================================
   MISSION
   ========================================================== */

.mission-section[b-ew4ftwf0zq] {
    background: #f8fafc;
}

.mission-card[b-ew4ftwf0zq] {
    background: white;
    border-radius: 28px;
    padding: 3.5rem;
    box-shadow: 0 25px 60px rgba(15,23,42,.08);
}

.mission-quote[b-ew4ftwf0zq] {
    margin: 2rem 0;
    padding: 2rem;
    border-left: 5px solid #2563eb;
    background: #eff6ff;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 600;
}

.mission-card p[b-ew4ftwf0zq] {
    color: #64748b;
    line-height: 1.8;
}

.mission-goals[b-ew4ftwf0zq] {
    margin-top: 2rem;
}

.mission-goal[b-ew4ftwf0zq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

    .mission-goal i[b-ew4ftwf0zq] {
        color: #22c55e;
    }

/* ==========================================================
   CTA
   ========================================================== */

.about-cta-section[b-ew4ftwf0zq] {
    padding: 6rem 0;
}

.cta-card[b-ew4ftwf0zq] {
    border-radius: 32px;
    padding: 4rem;
    background: linear-gradient(135deg,#0f172a,#2563eb);
    box-shadow: 0 30px 70px rgba(37,99,235,.30);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn[b-ew4ftwf0zq] {
    border-radius: 14px;
    font-weight: 600;
    transition: .25s;
}

.btn-primary:hover[b-ew4ftwf0zq],
.btn-light:hover[b-ew4ftwf0zq] {
    transform: translateY(-2px);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:991px) {

    .about-hero[b-ew4ftwf0zq] {
        padding: 5rem 0;
        text-align: center;
    }

    .hero-actions[b-ew4ftwf0zq] {
        justify-content: center;
    }

    .hero-card[b-ew4ftwf0zq] {
        margin-top: 2rem;
    }

    .mission-card[b-ew4ftwf0zq] {
        padding: 2rem;
    }

    .cta-card[b-ew4ftwf0zq] {
        padding: 2.5rem;
        text-align: center;
    }
}

@media (max-width:767px) {

    .hero-card[b-ew4ftwf0zq] {
        grid-template-columns: 1fr;
    }

    .score-flow-card[b-ew4ftwf0zq] {
        padding: 2rem;
    }

    .score-factor[b-ew4ftwf0zq] {
        width: 100%;
    }

    .score-plus[b-ew4ftwf0zq] {
        display: none;
    }

    .about-hero h1[b-ew4ftwf0zq] {
        font-size: 2.5rem;
    }

    .display-5[b-ew4ftwf0zq] {
        font-size: 2rem;
    }
}
/* /Components/Pages/BestMetroAreas.razor.rz.scp.css */
.best-metros-page[b-tkcikqfqvv] {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    color: #172033;
}

.metros-shell[b-tkcikqfqvv] {
    width: min(1440px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 2.5rem;
}

.metros-loading[b-tkcikqfqvv] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    color: #64748b;
}

.metros-hero[b-tkcikqfqvv] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem 1.8rem;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(49, 46, 129, .94));
    box-shadow: 0 22px 55px rgba(30, 41, 59, .16);
    color: white;
}

    .metros-hero[b-tkcikqfqvv]::after {
        content: "";
        position: absolute;
        width: 18rem;
        height: 18rem;
        right: -5rem;
        top: -8rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
    }

.hero-copy[b-tkcikqfqvv] {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.back-link[b-tkcikqfqvv] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    font-weight: 700;
}

    .back-link:hover[b-tkcikqfqvv] {
        color: #fff;
    }

.hero-eyebrow[b-tkcikqfqvv],
.section-kicker[b-tkcikqfqvv] {
    display: block;
    margin-bottom: .25rem;
    color: #818cf8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-copy h1[b-tkcikqfqvv] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -.05em;
}

.hero-copy p[b-tkcikqfqvv] {
    max-width: 680px;
    margin: .65rem 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 1rem;
    line-height: 1.6;
}

.hero-stat[b-tkcikqfqvv] {
    position: relative;
    z-index: 1;
    min-width: 145px;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(8px);
    text-align: center;
}

    .hero-stat strong[b-tkcikqfqvv] {
        display: block;
        font-size: 2.25rem;
        line-height: 1;
    }

    .hero-stat span[b-tkcikqfqvv] {
        display: block;
        margin-top: .35rem;
        color: rgba(255, 255, 255, .72);
        font-size: .78rem;
        font-weight: 700;
    }

.top-metros-section[b-tkcikqfqvv],
.rankings-panel[b-tkcikqfqvv],
.pro-teaser[b-tkcikqfqvv] {
    margin-top: 1.25rem;
}

.section-heading[b-tkcikqfqvv],
.rankings-header[b-tkcikqfqvv] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

    .section-heading h2[b-tkcikqfqvv],
    .rankings-header h2[b-tkcikqfqvv],
    .pro-copy h2[b-tkcikqfqvv] {
        margin: 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: -.025em;
    }

.section-note[b-tkcikqfqvv],
.rankings-count[b-tkcikqfqvv] {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.top-metros-grid[b-tkcikqfqvv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.top-metro-card[b-tkcikqfqvv] {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

    .top-metro-card:hover[b-tkcikqfqvv] {
        transform: translateY(-3px);
        box-shadow: 0 18px 36px rgba(15, 23, 42, .11);
    }

    .top-metro-card.rank-1[b-tkcikqfqvv] {
        border-color: rgba(245, 158, 11, .45);
        background: linear-gradient(180deg, #fffbeb 0%, #fff 65%);
    }

    .top-metro-card.rank-2[b-tkcikqfqvv] {
        border-color: rgba(148, 163, 184, .48);
        background: linear-gradient(180deg, #f8fafc 0%, #fff 65%);
    }

    .top-metro-card.rank-3[b-tkcikqfqvv] {
        border-color: rgba(180, 83, 9, .3);
        background: linear-gradient(180deg, #fff7ed 0%, #fff 65%);
    }

.top-metro-header[b-tkcikqfqvv],
.metro-name-row[b-tkcikqfqvv],
.mobile-metro-heading[b-tkcikqfqvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.rank-medal[b-tkcikqfqvv] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.medal-icon[b-tkcikqfqvv] {
    font-size: 1.35rem;
}

.rank-label[b-tkcikqfqvv] {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.score-badge[b-tkcikqfqvv] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .36rem .55rem;
    border-radius: .7rem;
    background: #eef2ff;
    color: #3730a3;
}

    .score-badge strong[b-tkcikqfqvv] {
        font-size: .95rem;
    }

    .score-badge span[b-tkcikqfqvv] {
        font-size: .65rem;
        font-weight: 800;
        text-transform: uppercase;
    }

.metro-name-row[b-tkcikqfqvv] {
    align-items: flex-start;
    margin-top: .8rem;
}

    .metro-name-row h3[b-tkcikqfqvv] {
        margin: 0;
        color: #0f172a;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.3;
    }

.metro-state[b-tkcikqfqvv] {
    flex: 0 0 auto;
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
}

.compact-progress[b-tkcikqfqvv],
.mini-progress[b-tkcikqfqvv] {
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.compact-progress[b-tkcikqfqvv] {
    height: .42rem;
    margin-top: .8rem;
}

.compact-progress-fill[b-tkcikqfqvv],
.mini-progress span[b-tkcikqfqvv] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
}

.metro-metrics[b-tkcikqfqvv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .9rem;
}

.metric span[b-tkcikqfqvv] {
    display: block;
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.metric strong[b-tkcikqfqvv] {
    display: block;
    margin-top: .2rem;
    color: #1e293b;
    font-size: .84rem;
    white-space: nowrap;
}

.rankings-panel[b-tkcikqfqvv] {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.rankings-table-wrap[b-tkcikqfqvv] {
    overflow-x: auto;
    max-height: 520px;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
}

.rankings-table[b-tkcikqfqvv] {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .rankings-table thead[b-tkcikqfqvv] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
    }

    .rankings-table th[b-tkcikqfqvv] {
        padding: .72rem .75rem;
        border-bottom: 1px solid #e2e8f0;
        color: #64748b;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .05em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rankings-table td[b-tkcikqfqvv] {
        padding: .7rem .75rem;
        border-bottom: 1px solid #eef2f7;
        color: #334155;
        vertical-align: middle;
    }

    .rankings-table tbody tr:hover[b-tkcikqfqvv] {
        background: #f8fafc;
    }

.rank-column[b-tkcikqfqvv] {
    width: 70px;
    text-align: center !important;
}

.table-rank[b-tkcikqfqvv] {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 800;
}

.table-metro-name[b-tkcikqfqvv] {
    display: block;
    max-width: 340px;
    color: #0f172a;
}

.table-state-name[b-tkcikqfqvv] {
    color: #64748b;
    white-space: nowrap;
}

.table-score[b-tkcikqfqvv] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .table-score strong[b-tkcikqfqvv] {
        min-width: 2.3rem;
        color: #312e81;
    }

.mini-progress[b-tkcikqfqvv] {
    width: 72px;
    height: .32rem;
}

.growth-positive[b-tkcikqfqvv] {
    color: #15803d !important;
    font-weight: 800;
}

.growth-negative[b-tkcikqfqvv] {
    color: #b91c1c !important;
    font-weight: 800;
}

.growth-neutral[b-tkcikqfqvv] {
    color: #64748b !important;
    font-weight: 800;
}

.mobile-rankings[b-tkcikqfqvv] {
    display: none;
}

.pro-teaser[b-tkcikqfqvv] {
    display: grid;
    grid-template-columns: auto 1.3fr 1fr auto;
    align-items: center;
    gap: 1.15rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(99, 102, 241, .25);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(238, 242, 255, .98), rgba(250, 245, 255, .98));
    box-shadow: 0 12px 30px rgba(79, 70, 229, .08);
}

.pro-badge[b-tkcikqfqvv] {
    padding: .5rem .68rem;
    border-radius: .75rem;
    background: #312e81;
    color: white;
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

.pro-copy p[b-tkcikqfqvv] {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.5;
}

.pro-features[b-tkcikqfqvv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

    .pro-features span[b-tkcikqfqvv] {
        color: #475569;
        font-size: .74rem;
        font-weight: 700;
    }

        .pro-features span[b-tkcikqfqvv]::before {
            content: "✓";
            margin-right: .32rem;
            color: #4f46e5;
        }

.pro-button[b-tkcikqfqvv] {
    border: 0;
    background: #4f46e5;
    color: white;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

    .pro-button:disabled[b-tkcikqfqvv] {
        background: #4f46e5;
        color: white;
        opacity: .72;
    }

.bottom-actions[b-tkcikqfqvv] {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .top-metros-grid[b-tkcikqfqvv] {
        grid-template-columns: 1fr;
    }

    .pro-teaser[b-tkcikqfqvv] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pro-features[b-tkcikqfqvv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pro-button[b-tkcikqfqvv] {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .metros-shell[b-tkcikqfqvv] {
        width: min(100% - 1rem, 1440px);
        padding-top: .5rem;
    }

    .metros-hero[b-tkcikqfqvv] {
        align-items: flex-start;
        padding: 1.15rem;
        border-radius: 1rem;
    }

    .hero-stat[b-tkcikqfqvv] {
        min-width: 105px;
        padding: .8rem;
    }

        .hero-stat strong[b-tkcikqfqvv] {
            font-size: 1.8rem;
        }

    .section-heading[b-tkcikqfqvv],
    .rankings-header[b-tkcikqfqvv] {
        align-items: flex-start;
    }

    .section-note[b-tkcikqfqvv] {
        display: none;
    }

    .desktop-rankings[b-tkcikqfqvv] {
        display: none;
    }

    .mobile-rankings[b-tkcikqfqvv] {
        display: grid;
        gap: .55rem;
    }

    .rankings-panel[b-tkcikqfqvv] {
        padding: .8rem;
    }

    .mobile-metro-row[b-tkcikqfqvv] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .7rem;
        padding: .75rem;
        border: 1px solid #e2e8f0;
        border-radius: .85rem;
        background: #fff;
    }

    .mobile-rank[b-tkcikqfqvv] {
        display: flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #eef2ff;
        color: #4338ca;
        font-size: .78rem;
        font-weight: 800;
    }

    .mobile-metro-heading[b-tkcikqfqvv] {
        align-items: flex-start;
    }

        .mobile-metro-heading strong[b-tkcikqfqvv] {
            display: block;
            color: #0f172a;
            font-size: .86rem;
            line-height: 1.3;
        }

        .mobile-metro-heading div > span[b-tkcikqfqvv] {
            display: block;
            margin-top: .15rem;
            color: #94a3b8;
            font-size: .69rem;
            font-weight: 700;
        }

    .mobile-score[b-tkcikqfqvv] {
        flex: 0 0 auto;
        padding: .2rem .42rem;
        border-radius: .5rem;
        background: #eef2ff;
        color: #3730a3;
        font-size: .74rem;
        font-weight: 800;
    }

    .mobile-metro-metrics[b-tkcikqfqvv] {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem .8rem;
        margin-top: .48rem;
        color: #64748b;
        font-size: .7rem;
        font-weight: 700;
    }
}

@media (max-width: 575.98px) {
    .metros-hero[b-tkcikqfqvv] {
        flex-direction: column;
    }

    .hero-stat[b-tkcikqfqvv] {
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: .45rem;
    }

        .hero-stat span[b-tkcikqfqvv] {
            margin-top: 0;
        }

    .metro-metrics[b-tkcikqfqvv],
    .pro-features[b-tkcikqfqvv] {
        grid-template-columns: 1fr;
    }

    .top-metro-card[b-tkcikqfqvv] {
        padding: .9rem;
    }
    .hero-subtitle[b-tkcikqfqvv] {
        display: block;
        margin-top: .45rem;
        font-size: 1.15rem;
        font-weight: 500;
        opacity: .85;
    }
}
/* ==========================================================
   ANONYMOUS METRO PREVIEW
========================================================== */

.anonymous-metro-lock[b-tkcikqfqvv] {
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 14px;
    background: #f5f7fc;
    border: 1px solid #e4e9f3;
    text-align: center;
}

.anonymous-lock-message[b-tkcikqfqvv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #34445f;
    font-size: .9rem;
}

    .anonymous-lock-message i[b-tkcikqfqvv] {
        color: #4d5cf5;
    }

.anonymous-lock-features[b-tkcikqfqvv] {
    margin-top: 7px;
    color: #7a879d;
    font-size: .76rem;
    line-height: 1.4;
}
/* /Components/Pages/BestStates.razor.rz.scp.css */
:root[b-q4pvqh7vd8] {
    --states-navy: #17365f;
    --states-blue: #2563eb;
    --states-blue-light: #60a5fa;
    --states-background: #f3f6fb;
    --states-card: #ffffff;
    --states-text: #152238;
    --states-muted: #68758a;
    --states-border: #e2e8f0;
    --states-success: #14804a;
    --states-danger: #c53b3b;
}

.best-states-page[b-q4pvqh7vd8] {
    min-height: 100vh;
    background: radial-gradient( circle at top right, rgba(37, 99, 235, 0.09), transparent 30% ), var(--states-background);
    color: var(--states-text);
}

.states-shell[b-q4pvqh7vd8] {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 20px 0 32px;
}

.states-loading[b-q4pvqh7vd8] {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--states-muted);
}

/* Hero */

.states-hero[b-q4pvqh7vd8] {
    min-height: 150px;
    padding: 22px 28px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: white;
    background: linear-gradient( 120deg, #17365f 0%, #24579a 56%, #4f83db 100% );
    box-shadow: 0 16px 40px rgba(23, 54, 95, 0.17);
}

.hero-copy[b-q4pvqh7vd8] {
    max-width: 740px;
}

.back-link[b-q4pvqh7vd8] {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    padding: 0;
    margin-bottom: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

    .back-link:hover[b-q4pvqh7vd8] {
        color: white;
    }

.hero-eyebrow[b-q4pvqh7vd8] {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.states-hero h1[b-q4pvqh7vd8] {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.states-hero p[b-q4pvqh7vd8] {
    max-width: 670px;
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.45;
}

.hero-stat[b-q4pvqh7vd8] {
    width: 150px;
    min-width: 150px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 17px;
    text-align: center;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(8px);
}

    .hero-stat strong[b-q4pvqh7vd8] {
        display: block;
        font-size: 2rem;
        line-height: 1;
    }

    .hero-stat span[b-q4pvqh7vd8] {
        display: block;
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.71rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

/* Section headings */

.top-states-section[b-q4pvqh7vd8] {
    margin-top: 17px;
}

.section-heading[b-q4pvqh7vd8],
.rankings-header[b-q4pvqh7vd8] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
}

.section-kicker[b-q4pvqh7vd8] {
    display: block;
    color: var(--states-blue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-heading h2[b-q4pvqh7vd8],
.rankings-header h2[b-q4pvqh7vd8] {
    margin: 1px 0 0;
    font-size: 1.18rem;
    font-weight: 800;
}

.section-note[b-q4pvqh7vd8],
.rankings-count[b-q4pvqh7vd8] {
    color: var(--states-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

/* Top states */

.top-states-grid[b-q4pvqh7vd8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.top-state-card[b-q4pvqh7vd8] {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--states-border);
    border-top: 3px solid var(--states-blue);
    border-radius: 15px;
    background: var(--states-card);
    box-shadow: 0 6px 20px rgba(15, 34, 58, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

    .top-state-card:hover[b-q4pvqh7vd8] {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(15, 34, 58, 0.1);
    }

    .top-state-card.rank-1[b-q4pvqh7vd8] {
        border-top-color: #e6a700;
    }

    .top-state-card.rank-2[b-q4pvqh7vd8] {
        border-top-color: #8b98aa;
    }

    .top-state-card.rank-3[b-q4pvqh7vd8] {
        border-top-color: #b9672f;
    }

.top-state-header[b-q4pvqh7vd8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rank-medal[b-q4pvqh7vd8] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.medal-icon[b-q4pvqh7vd8] {
    font-size: 1.2rem;
    line-height: 1;
}

.rank-label[b-q4pvqh7vd8] {
    color: var(--states-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.score-badge[b-q4pvqh7vd8] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--states-blue);
}

    .score-badge strong[b-q4pvqh7vd8] {
        font-size: 1.02rem;
    }

    .score-badge span[b-q4pvqh7vd8] {
        color: var(--states-muted);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
    }

.state-name-row h3[b-q4pvqh7vd8] {
    margin: 8px 0 7px;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-progress[b-q4pvqh7vd8] {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf4;
}

.compact-progress-fill[b-q4pvqh7vd8] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, var(--states-blue), #38bdf8 );
}

.state-metrics[b-q4pvqh7vd8] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.7fr;
    gap: 8px;
    margin-top: 11px;
}

.metric[b-q4pvqh7vd8] {
    min-width: 0;
}

    .metric span[b-q4pvqh7vd8] {
        display: block;
        color: var(--states-muted);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .metric strong[b-q4pvqh7vd8] {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Rankings table */

.rankings-panel[b-q4pvqh7vd8] {
    margin-top: 17px;
    padding: 14px 16px 10px;
    border: 1px solid var(--states-border);
    border-radius: 17px;
    background: white;
    box-shadow: 0 7px 22px rgba(15, 34, 58, 0.055);
}

.rankings-table-wrap[b-q4pvqh7vd8] {
    max-height: 410px;
    overflow: auto;
    border: 1px solid var(--states-border);
    border-radius: 11px;
}

.rankings-table[b-q4pvqh7vd8] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.76rem;
}

    .rankings-table th[b-q4pvqh7vd8] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 10px;
        border-bottom: 1px solid var(--states-border);
        color: #536174;
        background: #f8fafc;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .rankings-table td[b-q4pvqh7vd8] {
        padding: 6px 10px;
        border-bottom: 1px solid #edf1f6;
        vertical-align: middle;
        white-space: nowrap;
    }

    .rankings-table tbody tr:last-child td[b-q4pvqh7vd8] {
        border-bottom: 0;
    }

    .rankings-table tbody tr:hover[b-q4pvqh7vd8] {
        background: #f8fbff;
    }

.rank-column[b-q4pvqh7vd8] {
    width: 58px;
    text-align: center;
}

.table-rank[b-q4pvqh7vd8] {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: var(--states-blue);
    font-size: 0.66rem;
    font-weight: 800;
}

.table-state-name[b-q4pvqh7vd8] {
    font-size: 0.76rem;
}

.table-score[b-q4pvqh7vd8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .table-score strong[b-q4pvqh7vd8] {
        min-width: 33px;
    }

.mini-progress[b-q4pvqh7vd8] {
    width: 75px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf4;
}

    .mini-progress span[b-q4pvqh7vd8] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient( 90deg, var(--states-blue), #38bdf8 );
    }

.growth-positive[b-q4pvqh7vd8] {
    color: var(--states-success);
    font-weight: 800;
}

.growth-negative[b-q4pvqh7vd8] {
    color: var(--states-danger);
    font-weight: 800;
}

.growth-neutral[b-q4pvqh7vd8] {
    color: var(--states-muted);
    font-weight: 800;
}

.mobile-rankings[b-q4pvqh7vd8] {
    display: none;
}

/* Tablet */

@media (max-width: 900px) {
    .states-shell[b-q4pvqh7vd8] {
        width: min(100% - 24px, 760px);
        padding-top: 12px;
    }

    .states-hero[b-q4pvqh7vd8] {
        min-height: 135px;
        padding: 20px;
    }

    .hero-stat[b-q4pvqh7vd8] {
        width: 125px;
        min-width: 125px;
    }

    .top-states-grid[b-q4pvqh7vd8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .state-metrics[b-q4pvqh7vd8] {
        grid-template-columns: 1fr 1fr;
    }

    .metric:last-child[b-q4pvqh7vd8] {
        display: none;
    }
}

/* Mobile */

@media (max-width: 700px) {
    .states-shell[b-q4pvqh7vd8] {
        width: 100%;
        padding: 0 12px 22px;
    }

    .states-hero[b-q4pvqh7vd8] {
        min-height: auto;
        margin: 0 -12px;
        padding: 18px 16px;
        border-radius: 0 0 20px 20px;
    }

    .hero-stat[b-q4pvqh7vd8] {
        display: none;
    }

    .states-hero h1[b-q4pvqh7vd8] {
        font-size: 1.65rem;
    }

    .states-hero p[b-q4pvqh7vd8] {
        font-size: 0.82rem;
    }

    .back-link[b-q4pvqh7vd8] {
        margin-bottom: 9px;
    }

    .section-note[b-q4pvqh7vd8] {
        display: none;
    }

    .top-states-grid[b-q4pvqh7vd8] {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

        .top-states-grid[b-q4pvqh7vd8]::-webkit-scrollbar {
            display: none;
        }

    .top-state-card[b-q4pvqh7vd8] {
        min-width: 84%;
        scroll-snap-align: start;
    }

    .state-metrics[b-q4pvqh7vd8] {
        grid-template-columns: repeat(3, 1fr);
    }

    .metric:last-child[b-q4pvqh7vd8] {
        display: block;
    }

    .rankings-panel[b-q4pvqh7vd8] {
        padding: 13px 11px;
    }

    .desktop-rankings[b-q4pvqh7vd8] {
        display: none;
    }

    .mobile-rankings[b-q4pvqh7vd8] {
        display: block;
    }

    .mobile-state-row[b-q4pvqh7vd8] {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 2px;
        border-bottom: 1px solid #edf1f6;
    }

        .mobile-state-row:last-child[b-q4pvqh7vd8] {
            border-bottom: 0;
        }

    .mobile-rank[b-q4pvqh7vd8] {
        display: flex;
        width: 29px;
        height: 29px;
        flex: 0 0 29px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        background: var(--states-blue);
        font-size: 0.67rem;
        font-weight: 800;
    }

    .mobile-state-content[b-q4pvqh7vd8] {
        min-width: 0;
        flex: 1;
    }

    .mobile-state-heading[b-q4pvqh7vd8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

        .mobile-state-heading strong[b-q4pvqh7vd8] {
            overflow: hidden;
            font-size: 0.82rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-state-heading > span[b-q4pvqh7vd8] {
            color: var(--states-blue);
            font-size: 0.76rem;
            font-weight: 800;
        }

    .mobile-state-metrics[b-q4pvqh7vd8] {
        display: flex;
        gap: 10px;
        margin-top: 3px;
        color: var(--states-muted);
        font-size: 0.67rem;
    }
}

@media (max-width: 420px) {
    .state-metrics[b-q4pvqh7vd8] {
        grid-template-columns: 1fr 1fr;
    }

    .metric:last-child[b-q4pvqh7vd8] {
        display: none;
    }

    .mobile-state-metrics span:nth-child(2)[b-q4pvqh7vd8] {
        display: none;
    }
}
/* ==========================================================
   ANONYMOUS STATE PREVIEW
========================================================== */

.anonymous-state-lock[b-q4pvqh7vd8] {
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 14px;
    background: #f5f7fc;
    border: 1px solid #e4e9f3;
    text-align: center;
}

.anonymous-lock-message[b-q4pvqh7vd8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #34445f;
    font-size: .9rem;
}

    .anonymous-lock-message i[b-q4pvqh7vd8] {
        color: #4d5cf5;
    }

.anonymous-lock-features[b-q4pvqh7vd8] {
    margin-top: 7px;
    color: #7a879d;
    font-size: .76rem;
    line-height: 1.4;
}
/* /Components/Pages/CareerDetail.razor.rz.scp.css */
.career-detail-page[b-7ccr9jypk3] {
    width: 100%;
}

.back-link[b-7ccr9jypk3] {
    display: inline-block;
    margin-bottom: 28px;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

    .back-link:hover[b-7ccr9jypk3] {
        text-decoration: underline;
    }

.career-hero[b-7ccr9jypk3] {
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    padding: 42px;
    background-color: #ffffff;
    margin-bottom: 24px;
}

.career-hero-content[b-7ccr9jypk3] {
    max-width: 900px;
}

.career-eyebrow[b-7ccr9jypk3],
.market-results-heading > div > span[b-7ccr9jypk3] {
    display: block;
    margin-bottom: 14px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.career-hero h1[b-7ccr9jypk3] {
    margin: 0;
    color: #111827;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.career-hero p[b-7ccr9jypk3] {
    max-width: 760px;
    margin: 18px 0 20px 0;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.65;
}

.occupation-code[b-7ccr9jypk3] {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 11px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

.summary-grid[b-7ccr9jypk3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-7ccr9jypk3] {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px;
    background-color: #ffffff;
}

.summary-label[b-7ccr9jypk3] {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.summary-card strong[b-7ccr9jypk3] {
    margin: 18px 0 6px 0;
    color: #111827;
    font-size: 23px;
    line-height: 1.2;
}

.summary-detail[b-7ccr9jypk3] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

.market-results-section[b-7ccr9jypk3] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    background-color: #ffffff;
}

.market-results-heading[b-7ccr9jypk3] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

    .market-results-heading h2[b-7ccr9jypk3] {
        margin: 0;
        color: #111827;
        font-size: 28px;
    }

    .market-results-heading p[b-7ccr9jypk3] {
        max-width: 720px;
        margin: 10px 0 0 0;
        color: #6b7280;
        line-height: 1.6;
    }

.market-count[b-7ccr9jypk3] {
    height: fit-content;
    white-space: nowrap;
    border-radius: 999px;
    padding: 7px 12px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
}

.market-table-container[b-7ccr9jypk3] {
    width: 100%;
    overflow-x: auto;
}

.market-table[b-7ccr9jypk3] {
    width: 100%;
    border-collapse: collapse;
}

    .market-table th[b-7ccr9jypk3] {
        padding: 13px 14px;
        border-bottom: 2px solid #e5e7eb;
        color: #4b5563;
        text-align: left;
        font-size: 13px;
        white-space: nowrap;
    }

    .market-table td[b-7ccr9jypk3] {
        padding: 16px 14px;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
        vertical-align: middle;
    }

    .market-table tbody tr:hover[b-7ccr9jypk3] {
        background-color: #f9fafb;
    }

.rank-badge[b-7ccr9jypk3] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 800;
}

.market-name[b-7ccr9jypk3] {
    min-width: 260px;
    color: #111827;
    font-weight: 600;
}

.score-cell[b-7ccr9jypk3] {
    color: #2563eb;
    font-weight: 800;
}

.status-message[b-7ccr9jypk3],
.error-message[b-7ccr9jypk3] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    background-color: #ffffff;
}

.error-message[b-7ccr9jypk3] {
    border-color: #fecaca;
    color: #b91c1c;
}

@media (max-width: 1100px) {
    .summary-grid[b-7ccr9jypk3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .career-hero[b-7ccr9jypk3] {
        padding: 28px 22px;
    }

        .career-hero h1[b-7ccr9jypk3] {
            font-size: 36px;
        }

    .summary-grid[b-7ccr9jypk3] {
        grid-template-columns: 1fr;
    }

    .market-results-section[b-7ccr9jypk3] {
        padding: 20px;
    }

    .market-results-heading[b-7ccr9jypk3] {
        flex-direction: column;
    }
}
.market-pay[b-7ccr9jypk3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .market-pay strong[b-7ccr9jypk3] {
        font-weight: 700;
        white-space: nowrap;
    }

.market-hourly-pay[b-7ccr9jypk3] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}
/* /Components/Pages/Compare.razor.rz.scp.css */
/* ===========================================================
   CareerGPS Compare Careers
   compare.css
   Premium SaaS Theme
=========================================================== */

:root[b-0dmseb4kda] {
    --compare-primary: #2563eb;
    --compare-primary-dark: #1d4ed8;
    --compare-secondary: #6366f1;
    --compare-success: #16a34a;
    --compare-warning: #f59e0b;
    --compare-danger: #dc2626;
    --compare-bg: #f5f8fd;
    --compare-surface: #ffffff;
    --compare-border: #e5e7eb;
    --compare-text: #0f172a;
    --compare-muted: #64748b;
    --compare-shadow: 0 20px 45px rgba(15,23,42,.08);
    --compare-radius: 24px;
}

/* ===========================================================
   PAGE
=========================================================== */

.compare-page[b-0dmseb4kda] {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, #eef5ff 0%, #f8fbff 45%, #ffffff 100%);
    min-height: 100vh;
    padding-bottom: 5rem;
}

.compare-shell[b-0dmseb4kda] {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
}

/* ===========================================================
   BACKGROUND
=========================================================== */

.compare-background[b-0dmseb4kda] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.compare-orb[b-0dmseb4kda] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
}

.compare-orb-one[b-0dmseb4kda] {
    width: 420px;
    height: 420px;
    background: #4f8cff;
    top: -120px;
    left: -80px;
}

.compare-orb-two[b-0dmseb4kda] {
    width: 520px;
    height: 520px;
    background: #8b5cf6;
    right: -180px;
    top: 180px;
}

.compare-grid-pattern[b-0dmseb4kda] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);
    background-size: 42px 42px;
}

/* ===========================================================
   BACK BUTTON
=========================================================== */

.compare-back-button[b-0dmseb4kda] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    border: none;
    background: white;
    border-radius: 999px;
    padding: .9rem 1.35rem;
    font-weight: 600;
    color: var(--compare-text);
    box-shadow: var(--compare-shadow);
    transition: .25s;
    margin-bottom: 2rem;
}

.compare-button-light[b-0dmseb4kda] {
    background: #ffffff !important;
    color: #2563eb !important;
    border: 2px solid #ffffff;
}

    .compare-button-light span[b-0dmseb4kda],
    .compare-button-light i[b-0dmseb4kda] {
        color: #2563eb !important;
    }

    .compare-button-light:hover[b-0dmseb4kda] {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #eff6ff;
    }

        .compare-button-light:hover span[b-0dmseb4kda],
        .compare-button-light:hover i[b-0dmseb4kda] {
            color: #1d4ed8 !important;
        }

/* ===========================================================
   HERO
=========================================================== */

.compare-hero[b-0dmseb4kda] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: center;
}

.compare-hero-copy h1[b-0dmseb4kda] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    margin-top: .8rem;
    margin-bottom: 1rem;
    color: var(--compare-text);
}

.compare-hero-copy p[b-0dmseb4kda] {
    font-size: 1.08rem;
    color: var(--compare-muted);
    max-width: 720px;
}

.compare-eyebrow[b-0dmseb4kda] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .74rem;
    font-weight: 700;
}

.compare-eyebrow-light[b-0dmseb4kda] {
    color: var(--compare-primary);
}

.compare-eyebrow-dot[b-0dmseb4kda] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--compare-primary);
}

/* ===========================================================
   HERO SUMMARY
=========================================================== */

.compare-hero-summary[b-0dmseb4kda] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.compare-summary-item[b-0dmseb4kda] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    min-width: 210px;
    box-shadow: var(--compare-shadow);
}

    .compare-summary-item i[b-0dmseb4kda] {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: linear-gradient(135deg,#2563eb,#6366f1);
        color: white;
        font-size: 1.2rem;
    }

    .compare-summary-item span[b-0dmseb4kda] {
        display: block;
        color: var(--compare-muted);
        font-size: .82rem;
    }

    .compare-summary-item strong[b-0dmseb4kda] {
        font-size: 1.1rem;
        color: var(--compare-text);
    }

/* ===========================================================
   HERO PANEL
=========================================================== */

.compare-hero-panel[b-0dmseb4kda] {
    background: white;
    border-radius: 28px;
    padding: 2rem;
    box-shadow: var(--compare-shadow);
    position: relative;
}

.compare-hero-panel-icon[b-0dmseb4kda] {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #2563eb, #7c3aed);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

.compare-panel-label[b-0dmseb4kda] {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .72rem;
    color: var(--compare-primary);
    font-weight: 700;
}

.compare-hero-panel h2[b-0dmseb4kda] {
    margin: .4rem 0 1rem;
    font-size: 1.6rem;
    font-weight: 800;
}

.compare-hero-panel p[b-0dmseb4kda] {
    color: var(--compare-muted);
    line-height: 1.7;
}

/* ===========================================================
   BUTTONS
=========================================================== */

.compare-button[b-0dmseb4kda] {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    padding: .95rem 1.45rem;
}

    .compare-button:hover[b-0dmseb4kda] {
        transform: translateY(-2px);
    }

.compare-button-primary[b-0dmseb4kda] {
    color: white;
    background: linear-gradient( 135deg, #2563eb, #4f46e5);
}

.compare-button-outline[b-0dmseb4kda] {
    background: white;
    color: var(--compare-primary);
    border: 1px solid #dbe7ff;
}

.compare-button-danger[b-0dmseb4kda] {
    background: #fee2e2;
    color: #b91c1c;
}

.compare-button-light[b-0dmseb4kda] {
    background: white;
    color: var(--compare-primary);
}

/* ===========================================================
   TOOLBAR
=========================================================== */

.compare-toolbar[b-0dmseb4kda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 2rem;
}

.compare-toolbar-label[b-0dmseb4kda] {
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--compare-primary);
    font-size: .72rem;
    font-weight: 700;
}

.compare-toolbar h2[b-0dmseb4kda] {
    margin-top: .4rem;
    font-weight: 800;
}

.compare-toolbar-actions[b-0dmseb4kda] {
    display: flex;
    gap: 1rem;
}

/* ===========================================================
   CAREER GRID
=========================================================== */

.compare-career-grid[b-0dmseb4kda] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.compare-career-card[b-0dmseb4kda] {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--compare-shadow);
    transition: .25s;
}

    .compare-career-card:hover[b-0dmseb4kda] {
        transform: translateY(-5px);
    }

.compare-career-card-top[b-0dmseb4kda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.compare-career-icon[b-0dmseb4kda] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: white;
    background: linear-gradient( 135deg, #2563eb, #6366f1);
    font-size: 1.45rem;
}

.compare-remove-button[b-0dmseb4kda] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    transition: .2s;
}

    .compare-remove-button:hover[b-0dmseb4kda] {
        background: #fee2e2;
        color: #dc2626;
    }

.compare-career-code[b-0dmseb4kda] {
    display: inline-block;
    color: var(--compare-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.compare-career-card h2[b-0dmseb4kda] {
    font-size: 1.35rem;
    font-weight: 800;
    margin: .75rem 0 1.5rem;
    line-height: 1.3;
}

.compare-career-highlight[b-0dmseb4kda] {
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    padding: 1rem;
}

    .compare-career-highlight span[b-0dmseb4kda] {
        display: block;
        color: var(--compare-muted);
        font-size: .82rem;
    }

    .compare-career-highlight strong[b-0dmseb4kda] {
        display: block;
        margin-top: .35rem;
        font-size: 1.45rem;
        color: var(--compare-primary);
    }

.compare-details-link[b-0dmseb4kda] {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--compare-primary);
    font-weight: 700;
}

/* ===========================================================
   EMPTY SLOT
=========================================================== */

.compare-empty-slot[b-0dmseb4kda] {
    border: 2px dashed #cbd5e1;
    background: rgba(255,255,255,.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 310px;
    cursor: pointer;
}

    .compare-empty-slot:hover[b-0dmseb4kda] {
        border-color: var(--compare-primary);
    }

.compare-empty-slot-icon[b-0dmseb4kda] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--compare-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}

.compare-empty-slot strong[b-0dmseb4kda] {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.compare-empty-slot span[b-0dmseb4kda] {
    color: var(--compare-muted);
    max-width: 220px;
}
/* ===========================================================
   SECTION HEADERS
=========================================================== */

.compare-section[b-0dmseb4kda] {
    margin-top: 4rem;
}

.compare-section-heading[b-0dmseb4kda] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.75rem;
}

    .compare-section-heading h2[b-0dmseb4kda] {
        margin-top: .45rem;
        font-size: 2rem;
        font-weight: 800;
        color: var(--compare-text);
    }

    .compare-section-heading p[b-0dmseb4kda] {
        max-width: 420px;
        color: var(--compare-muted);
        line-height: 1.7;
    }

.compare-section-eyebrow[b-0dmseb4kda] {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--compare-primary);
}

.compare-section-eyebrow-light[b-0dmseb4kda] {
    color: #dbeafe;
}

/* ===========================================================
   TABLE CARD
=========================================================== */

.compare-table-card[b-0dmseb4kda] {
    background: white;
    border-radius: 28px;
    box-shadow: var(--compare-shadow);
    overflow: hidden;
    border: 1px solid rgba(226,232,240,.9);
}

.compare-table-scroll[b-0dmseb4kda] {
    overflow-x: auto;
}

.compare-table[b-0dmseb4kda] {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

    /* ===========================================================
   TABLE HEADER
=========================================================== */

    .compare-table thead[b-0dmseb4kda] {
        background: linear-gradient( 135deg, #2563eb, #4f46e5);
    }

        .compare-table thead th[b-0dmseb4kda] {
            color: white;
            padding: 1.5rem;
            text-align: left;
            vertical-align: bottom;
            border: none;
        }

.compare-metric-column[b-0dmseb4kda] {
    width: 260px;
}

.compare-table-career-code[b-0dmseb4kda] {
    display: block;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: .45rem;
}

.compare-table thead strong[b-0dmseb4kda] {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

/* ===========================================================
   TABLE BODY
=========================================================== */

.compare-table tbody tr[b-0dmseb4kda] {
    transition: .2s;
}

    .compare-table tbody tr:nth-child(even)[b-0dmseb4kda] {
        background: #fafcff;
    }

    .compare-table tbody tr:hover[b-0dmseb4kda] {
        background: #f2f7ff;
    }

.compare-table tbody th[b-0dmseb4kda],
.compare-table tbody td[b-0dmseb4kda] {
    padding: 1.35rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
}

.compare-table tbody tr:last-child th[b-0dmseb4kda],
.compare-table tbody tr:last-child td[b-0dmseb4kda] {
    border-bottom: none;
}

/* ===========================================================
   METRIC LABELS
=========================================================== */

.compare-metric-label[b-0dmseb4kda] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.compare-metric-icon[b-0dmseb4kda] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: var(--compare-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.compare-metric-label strong[b-0dmseb4kda] {
    display: block;
    color: var(--compare-text);
    font-size: .97rem;
    font-weight: 700;
}

.compare-metric-label small[b-0dmseb4kda] {
    display: block;
    margin-top: .25rem;
    color: var(--compare-muted);
    font-size: .8rem;
    line-height: 1.4;
}

/* ===========================================================
   TABLE VALUES
=========================================================== */

.compare-value[b-0dmseb4kda] {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--compare-text);
}

.compare-text-value[b-0dmseb4kda] {
    display: block;
    font-weight: 600;
    line-height: 1.6;
    color: var(--compare-text);
}

.compare-value small[b-0dmseb4kda] {
    display: block;
    margin-top: .35rem;
    color: var(--compare-muted);
    font-size: .82rem;
}

/* ===========================================================
   BEST CELL
=========================================================== */

.compare-best-cell[b-0dmseb4kda] {
    background: linear-gradient( 135deg, rgba(37,99,235,.08), rgba(79,70,229,.05));
    position: relative;
}

    .compare-best-cell[b-0dmseb4kda]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, #2563eb, #4f46e5);
    }

.compare-best-badge[b-0dmseb4kda] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .8rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 700;
}

    .compare-best-badge i[b-0dmseb4kda] {
        font-size: .72rem;
    }

/* ===========================================================
   PREPARATION TABLE
=========================================================== */

.compare-preparation-table td[b-0dmseb4kda] {
    line-height: 1.7;
}

.compare-preparation-table .compare-text-value[b-0dmseb4kda] {
    color: #334155;
}

/* ===========================================================
   INSIGHT SECTION
=========================================================== */

.compare-insight-section[b-0dmseb4kda] {
    margin-top: 4rem;
    padding: 3rem;
    border-radius: 32px;
    background: linear-gradient( 135deg, #0f172a, #1e293b);
    color: white;
    overflow: hidden;
    position: relative;
}

    .compare-insight-section[b-0dmseb4kda]::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient( rgba(255,255,255,.10), transparent 70%);
        right: -120px;
        top: -120px;
    }

.compare-insight-copy[b-0dmseb4kda] {
    position: relative;
    z-index: 2;
}

    .compare-insight-copy h2[b-0dmseb4kda] {
        margin-top: .65rem;
        font-size: 2.1rem;
        font-weight: 800;
        color: white;
    }

    .compare-insight-copy p[b-0dmseb4kda] {
        margin-top: 1rem;
        color: #cbd5e1;
        line-height: 1.8;
        max-width: 760px;
    }

/* ===========================================================
   INSIGHT GRID
=========================================================== */

.compare-insight-grid[b-0dmseb4kda] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 2;
}

.compare-insight-card[b-0dmseb4kda] {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: .25s;
}

    .compare-insight-card:hover[b-0dmseb4kda] {
        transform: translateY(-5px);
        background: rgba(255,255,255,.12);
    }

.compare-insight-icon[b-0dmseb4kda] {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    color: #fbbf24;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.compare-insight-card span[b-0dmseb4kda] {
    display: block;
    color: #cbd5e1;
    font-size: .8rem;
    margin-bottom: .35rem;
}

.compare-insight-card strong[b-0dmseb4kda] {
    display: block;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ===========================================================
   FINAL CTA
=========================================================== */

.compare-final-cta[b-0dmseb4kda] {
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2.75rem 3rem;
    border-radius: 28px;
    background: linear-gradient( 135deg, #2563eb, #4f46e5);
    color: white;
    box-shadow: var(--compare-shadow);
}

    .compare-final-cta h2[b-0dmseb4kda] {
        margin-top: .55rem;
        margin-bottom: 1rem;
        font-size: 2rem;
        font-weight: 800;
    }

    .compare-final-cta p[b-0dmseb4kda] {
        color: #dbeafe;
        max-width: 640px;
        line-height: 1.8;
    }
/* ===========================================================
   EMPTY STATE
=========================================================== */

.compare-empty-state[b-0dmseb4kda] {
    background: white;
    border-radius: 32px;
    padding: 5rem 3rem;
    text-align: center;
    box-shadow: var(--compare-shadow);
    max-width: 860px;
    margin: 0 auto;
}

.compare-empty-icon[b-0dmseb4kda] {
    width: 110px;
    height: 110px;
    margin: 0 auto 2rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #2563eb, #6366f1);
    color: white;
    font-size: 2.8rem;
}

.compare-empty-eyebrow[b-0dmseb4kda] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .75rem;
    color: var(--compare-primary);
    font-weight: 700;
}

.compare-empty-state h2[b-0dmseb4kda] {
    margin: 1rem 0;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--compare-text);
}

.compare-empty-state p[b-0dmseb4kda] {
    max-width: 620px;
    margin: 0 auto 2rem;
    color: var(--compare-muted);
    line-height: 1.8;
}

/* ===========================================================
   LINKS
=========================================================== */

.compare-details-link[b-0dmseb4kda] {
    transition: .25s;
}

    .compare-details-link:hover[b-0dmseb4kda] {
        color: var(--compare-primary-dark);
    }

    .compare-details-link i[b-0dmseb4kda] {
        transition: .25s;
    }

    .compare-details-link:hover i[b-0dmseb4kda] {
        transform: translateX(4px);
    }

/* ===========================================================
   TABLE SCROLLBAR
=========================================================== */

.compare-table-scroll[b-0dmseb4kda]::-webkit-scrollbar {
    height: 10px;
}

.compare-table-scroll[b-0dmseb4kda]::-webkit-scrollbar-track {
    background: #edf2f7;
}

.compare-table-scroll[b-0dmseb4kda]::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

    .compare-table-scroll[b-0dmseb4kda]::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

/* ===========================================================
   CARD ANIMATIONS
=========================================================== */

.compare-career-card[b-0dmseb4kda],
.compare-summary-item[b-0dmseb4kda],
.compare-hero-panel[b-0dmseb4kda],
.compare-table-card[b-0dmseb4kda],
.compare-final-cta[b-0dmseb4kda],
.compare-insight-card[b-0dmseb4kda] {
    transition: transform .28s ease, box-shadow .28s ease;
}

    .compare-career-card:hover[b-0dmseb4kda],
    .compare-summary-item:hover[b-0dmseb4kda],
    .compare-hero-panel:hover[b-0dmseb4kda],
    .compare-table-card:hover[b-0dmseb4kda] {
        transform: translateY(-4px);
        box-shadow: 0 28px 55px rgba(15,23,42,.12);
    }

/* ===========================================================
   BUTTON EFFECTS
=========================================================== */

.compare-button[b-0dmseb4kda],
.compare-back-button[b-0dmseb4kda],
.compare-remove-button[b-0dmseb4kda] {
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

    .compare-button:hover[b-0dmseb4kda],
    .compare-back-button:hover[b-0dmseb4kda] {
        box-shadow: 0 18px 35px rgba(37,99,235,.18);
    }

    .compare-button:active[b-0dmseb4kda],
    .compare-back-button:active[b-0dmseb4kda] {
        transform: translateY(0);
    }

    /* ===========================================================
   FOCUS STATES
=========================================================== */

    .compare-button:focus-visible[b-0dmseb4kda],
    .compare-back-button:focus-visible[b-0dmseb4kda],
    .compare-remove-button:focus-visible[b-0dmseb4kda],
    .compare-details-link:focus-visible[b-0dmseb4kda] {
        outline: 3px solid rgba(37,99,235,.25);
        outline-offset: 3px;
    }

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width:1200px) {

    .compare-hero[b-0dmseb4kda] {
        grid-template-columns: 1fr;
    }

    .compare-insight-grid[b-0dmseb4kda] {
        grid-template-columns: 1fr;
    }
}

@media (max-width:992px) {

    .compare-toolbar[b-0dmseb4kda] {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-toolbar-actions[b-0dmseb4kda] {
        width: 100%;
        flex-wrap: wrap;
    }

    .compare-career-grid[b-0dmseb4kda] {
        grid-template-columns: 1fr;
    }

    .compare-summary-item[b-0dmseb4kda] {
        width: 100%;
    }

    .compare-section-heading[b-0dmseb4kda] {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-final-cta[b-0dmseb4kda] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width:768px) {

    .compare-shell[b-0dmseb4kda] {
        padding-top: 1rem;
    }

    .compare-hero-copy h1[b-0dmseb4kda] {
        font-size: 2.2rem;
    }

    .compare-hero-panel[b-0dmseb4kda] {
        padding: 1.75rem;
    }

    .compare-empty-state[b-0dmseb4kda] {
        padding: 3rem 1.5rem;
    }

        .compare-empty-state h2[b-0dmseb4kda] {
            font-size: 2rem;
        }

    .compare-final-cta[b-0dmseb4kda] {
        padding: 2rem;
    }

        .compare-final-cta h2[b-0dmseb4kda] {
            font-size: 1.65rem;
        }

    .compare-insight-section[b-0dmseb4kda] {
        padding: 2rem;
    }

    .compare-section-heading h2[b-0dmseb4kda] {
        font-size: 1.6rem;
    }

    .compare-table[b-0dmseb4kda] {
        min-width: 700px;
    }
}

@media (max-width:576px) {

    .compare-back-button[b-0dmseb4kda] {
        width: 100%;
        justify-content: center;
    }

    .compare-button[b-0dmseb4kda] {
        width: 100%;
        justify-content: center;
    }

    .compare-toolbar-actions[b-0dmseb4kda] {
        flex-direction: column;
        width: 100%;
    }

    .compare-summary-item[b-0dmseb4kda] {
        min-width: unset;
    }

    .compare-career-card[b-0dmseb4kda] {
        padding: 1.5rem;
    }

    .compare-career-highlight strong[b-0dmseb4kda] {
        font-size: 1.25rem;
    }

    .compare-insight-card[b-0dmseb4kda] {
        padding: 1.2rem;
    }

    .compare-insight-icon[b-0dmseb4kda] {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
}

/* ===========================================================
   FADE-IN ANIMATION
=========================================================== */

@keyframes compareFadeUp-b-0dmseb4kda {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compare-hero[b-0dmseb4kda],
.compare-toolbar[b-0dmseb4kda],
.compare-career-grid[b-0dmseb4kda],
.compare-section[b-0dmseb4kda],
.compare-insight-section[b-0dmseb4kda],
.compare-final-cta[b-0dmseb4kda],
.compare-empty-state[b-0dmseb4kda] {
    animation: compareFadeUp-b-0dmseb4kda .55s ease both;
}

/* ===========================================================
   PRINT
=========================================================== */

@media print {

    .compare-background[b-0dmseb4kda],
    .compare-back-button[b-0dmseb4kda],
    .compare-toolbar-actions[b-0dmseb4kda],
    .compare-details-link[b-0dmseb4kda],
    .compare-remove-button[b-0dmseb4kda],
    .compare-final-cta[b-0dmseb4kda] {
        display: none !important;
    }

    .compare-page[b-0dmseb4kda] {
        background: white;
    }

    .compare-career-card[b-0dmseb4kda],
    .compare-table-card[b-0dmseb4kda],
    .compare-insight-section[b-0dmseb4kda] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */

/* ===========================================================
   CONTACT PAGE
   CareerGPS
=========================================================== */
.contact-hero[b-wehko63m0b] {
    background: linear-gradient(135deg,#0d6efd 0%,#2563eb 55%,#4f46e5 100%);
    color: #fff;
    padding: 7rem 0;
    overflow: hidden;
    position: relative;
}

.contact-hero[b-wehko63m0b]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 45%);
    pointer-events: none;
}

.contact-badge[b-wehko63m0b] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.contact-hero h1 span[b-wehko63m0b] {
    color: #bfe0ff;
}

.contact-hero p[b-wehko63m0b] {
    color: rgba(255,255,255,.9);
    max-width: 650px;
}

.hero-actions[b-wehko63m0b] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .hero-actions .btn[b-wehko63m0b] {
        border-radius: 12px;
        padding: .95rem 1.75rem;
        font-weight: 600;
    }

.contact-hero-card[b-wehko63m0b] {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 2rem;
}

.hero-contact-stat + .hero-contact-stat[b-wehko63m0b] {
    margin-top: 2rem;
}

.hero-contact-stat i[b-wehko63m0b] {
    font-size: 2rem;
    color: #fff;
}

.hero-contact-stat h4[b-wehko63m0b] {
    margin-top: 1rem;
    margin-bottom: .5rem;
    color: #fff;
}

.hero-contact-stat p[b-wehko63m0b] {
    margin: 0;
    color: rgba(255,255,255,.85);
}

/* ===========================================================
   SECTION HEADERS
=========================================================== */

.section-badge[b-wehko63m0b] {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-wehko63m0b] {
    color: #6c757d;
    max-width: 760px;
    margin: 1rem auto 0;
}

/* ===========================================================
   CONTACT OPTIONS
=========================================================== */

.contact-options[b-wehko63m0b] {
    background: #f8fafc;
}

.contact-option-card[b-wehko63m0b] {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
    transition: .3s;
    border: 1px solid #eef2f7;
}

    .contact-option-card:hover[b-wehko63m0b] {
        transform: translateY(-8px);
        box-shadow: 0 22px 50px rgba(13,110,253,.16);
    }

.featured-contact-card[b-wehko63m0b] {
    border: 2px solid #0d6efd;
}

.contact-option-icon[b-wehko63m0b] {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.contact-option-card h4[b-wehko63m0b] {
    margin-bottom: .85rem;
    font-weight: 700;
}

.contact-option-card p[b-wehko63m0b] {
    color: #6c757d;
    margin: 0;
    line-height: 1.7;
}

/* ===========================================================
   CONTACT FORM
=========================================================== */

.contact-form-section[b-wehko63m0b] {
    padding: 5rem 0;
}

.contact-form-card[b-wehko63m0b],
.contact-info-card[b-wehko63m0b] {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 55px rgba(0,0,0,.06);
}

    .contact-form-card .form-control[b-wehko63m0b],
    .contact-form-card .form-select[b-wehko63m0b] {
        border-radius: 12px;
        border: 1px solid #d9e2ef;
        min-height: 58px;
    }

    .contact-form-card textarea.form-control[b-wehko63m0b] {
        min-height: 220px;
    }

    .contact-form-card .form-control:focus[b-wehko63m0b],
    .contact-form-card .form-select:focus[b-wehko63m0b] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    }

    .contact-form-card .btn-primary[b-wehko63m0b] {
        border-radius: 12px;
        padding: .9rem 2rem;
        font-weight: 600;
    }

    /* ===========================================================
   INFO SIDEBAR
=========================================================== */

    .contact-info-card p[b-wehko63m0b] {
        color: #6c757d;
    }

.contact-feature[b-wehko63m0b] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2rem;
}

.contact-feature-icon[b-wehko63m0b] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.contact-feature h5[b-wehko63m0b] {
    margin-bottom: .35rem;
    font-weight: 700;
}

.contact-feature p[b-wehko63m0b] {
    margin: 0;
    color: #6c757d;
}

/* ===========================================================
   FAQ SHORTCUT
=========================================================== */

.faq-shortcut-section[b-wehko63m0b] {
    background: #f8fafc;
}

.faq-shortcut-card[b-wehko63m0b] {
    background: #fff;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 15px 45px rgba(0,0,0,.05);
}

    .faq-shortcut-card p[b-wehko63m0b] {
        color: #6c757d;
    }

    .faq-shortcut-card .btn[b-wehko63m0b] {
        border-radius: 12px;
    }

/* ===========================================================
   CTA
=========================================================== */

.contact-cta-section[b-wehko63m0b] {
    padding: 5rem 0 6rem;
}

.contact-cta-card[b-wehko63m0b] {
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    border-radius: 28px;
    padding: 4rem;
    overflow: hidden;
    position: relative;
}

    .contact-cta-card[b-wehko63m0b]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 40%);
        pointer-events: none;
    }

    .contact-cta-card > *[b-wehko63m0b] {
        position: relative;
        z-index: 2;
    }

    .contact-cta-card .btn[b-wehko63m0b] {
        border-radius: 12px;
        font-weight: 600;
        padding: .95rem 1.5rem;
    }

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width: 991px) {

    .contact-hero[b-wehko63m0b] {
        text-align: center;
        padding: 5rem 0;
    }

    .hero-actions[b-wehko63m0b] {
        justify-content: center;
    }

    .contact-hero-card[b-wehko63m0b] {
        margin-top: 2rem;
    }

    .faq-shortcut-card[b-wehko63m0b],
    .contact-form-card[b-wehko63m0b],
    .contact-info-card[b-wehko63m0b],
    .contact-cta-card[b-wehko63m0b] {
        padding: 2rem;
    }
}

@media (max-width: 768px) {

    .contact-hero h1[b-wehko63m0b] {
        font-size: 2.6rem;
    }

    .contact-option-card[b-wehko63m0b],
    .contact-form-card[b-wehko63m0b],
    .contact-info-card[b-wehko63m0b],
    .faq-shortcut-card[b-wehko63m0b],
    .contact-cta-card[b-wehko63m0b] {
        border-radius: 18px;
    }

    .contact-feature[b-wehko63m0b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-actions[b-wehko63m0b] {
        flex-direction: column;
    }

        .hero-actions .btn[b-wehko63m0b] {
            width: 100%;
        }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard-page[b-urpmcx8abd] {
    background: #f5f7fb;
    min-height: 100vh;
    padding: 2rem 0 4rem;
}

.dashboard-shell[b-urpmcx8abd] {
    max-width: 1450px;
}

/* ==========================================================
   WELCOME CARD
========================================================== */

.dashboard-welcome-card[b-urpmcx8abd] {
    background: linear-gradient(135deg,#1e40af,#2563eb);
    border-radius: 28px;
    color: white;
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 25px 60px rgba(37,99,235,.25);
}

.dashboard-eyebrow[b-urpmcx8abd] {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .15rem;
    font-weight: 700;
    opacity: .75;
    margin-bottom: .75rem;
}

.dashboard-welcome-copy h1[b-urpmcx8abd] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.dashboard-welcome-copy p[b-urpmcx8abd] {
    font-size: 1rem;
    max-width: 580px;
    opacity: .92;
    margin-bottom: 0;
}

/* ==========================================================
   PLAN CARD
========================================================== */

.dashboard-plan-card[b-urpmcx8abd] {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.dashboard-plan-top[b-urpmcx8abd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.dashboard-plan-label[b-urpmcx8abd] {
    display: block;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .12rem;
    opacity: .7;
}

.dashboard-plan-card h2[b-urpmcx8abd] {
    margin: .3rem 0 0;
    font-size: 2rem;
    font-weight: 800;
}

.dashboard-plan-card p[b-urpmcx8abd] {
    color: rgba(255,255,255,.9);
    margin-bottom: 1.5rem;
}

.dashboard-plan-icon[b-urpmcx8abd] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-plan-icon i[b-urpmcx8abd] {
        font-size: 1.8rem;
        color: white;
    }

.dashboard-plan-status[b-urpmcx8abd] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
}

.dashboard-plan-status-pro[b-urpmcx8abd] {
    color: #d1fae5;
}

.dashboard-upgrade-button[b-urpmcx8abd] {
    width: 100%;
    background: white;
    color: #2563eb;
    border-radius: 14px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    padding: .85rem;
    text-decoration: none;
}

    .dashboard-upgrade-button:hover[b-urpmcx8abd] {
        background: #eff6ff;
        color: #1d4ed8;
    }

/* ==========================================================
   SECTION HEADERS
========================================================== */

.dashboard-section[b-urpmcx8abd] {
    margin-top: 2.5rem;
}

.dashboard-last-section[b-urpmcx8abd] {
    margin-bottom: 3rem;
}

.dashboard-section-heading[b-urpmcx8abd] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 1.5rem;
}

.dashboard-section-eyebrow[b-urpmcx8abd] {
    display: inline-block;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15rem;
    color: #2563eb;
}

.dashboard-section-heading h2[b-urpmcx8abd] {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.dashboard-heading-link[b-urpmcx8abd] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

    .dashboard-heading-link:hover[b-urpmcx8abd] {
        text-decoration: none;
    }

/* ==========================================================
   TOOL CARDS
========================================================== */

.dashboard-tool-card[b-urpmcx8abd] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    border-radius: 22px;
    border: 1px solid #e5e7eb;
    padding: 1.35rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: .25s;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

    .dashboard-tool-card:hover[b-urpmcx8abd] {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(37,99,235,.12);
        border-color: #bfdbfe;
        color: inherit;
        text-decoration: none;
    }

.dashboard-tool-card-primary[b-urpmcx8abd] {
    border: 2px solid #2563eb;
}

.dashboard-tool-card-muted[b-urpmcx8abd] {
    opacity: .85;
}

.dashboard-tool-header[b-urpmcx8abd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dashboard-tool-icon[b-urpmcx8abd] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg,#dbeafe,#eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-tool-icon i[b-urpmcx8abd] {
        font-size: 1.4rem;
        color: #2563eb;
    }

.dashboard-tool-arrow[b-urpmcx8abd] {
    font-size: 1.4rem;
    color: #94a3b8;
}

.dashboard-tool-content h3[b-urpmcx8abd] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .4rem;
}

.dashboard-tool-content p[b-urpmcx8abd] {
    color: #64748b;
    line-height: 1.45;
    margin-bottom: .8rem;
}

.dashboard-tool-status[b-urpmcx8abd] {
    font-size: .9rem;
    color: #64748b;
    font-weight: 600;
}

.dashboard-tool-status-active[b-urpmcx8abd] {
    color: #16a34a;
}

.dashboard-coming-soon-pill[b-urpmcx8abd] {
    padding: .35rem .8rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: .75rem;
    font-weight: 700;
}
/* ==========================================================
   UPGRADE PANEL
========================================================== */

.dashboard-upgrade-panel[b-urpmcx8abd] {
    background: linear-gradient(135deg,#0f172a,#1e293b);
    color: white;
    border-radius: 28px;
    padding: 3rem;
    box-shadow: 0 25px 60px rgba(15,23,42,.22);
}

    .dashboard-upgrade-panel h2[b-urpmcx8abd] {
        font-size: 2.2rem;
        font-weight: 800;
        margin: .75rem 0 1rem;
    }

    .dashboard-upgrade-panel p[b-urpmcx8abd] {
        color: rgba(255,255,255,.85);
        font-size: 1.05rem;
        line-height: 1.8;
        margin-bottom: 2rem;
    }

.dashboard-upgrade-features[b-urpmcx8abd] {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 2rem;
}

    .dashboard-upgrade-features span[b-urpmcx8abd] {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
        color: rgba(255,255,255,.92);
    }

    .dashboard-upgrade-features i[b-urpmcx8abd] {
        color: #4ade80;
    }

.dashboard-upgrade-button-lg[b-urpmcx8abd] {
    background: white;
    color: #2563eb;
    border-radius: 16px;
    padding: 1rem 2.5rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-width: 275px;
    text-decoration: none;
    transition: .25s;
    font-size: 1.05rem;
}

    .dashboard-upgrade-button-lg:hover[b-urpmcx8abd] {
        background: #eff6ff;
        color: #1d4ed8;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* ==========================================================
   PLACEHOLDER CARDS
========================================================== */

.dashboard-placeholder-card[b-urpmcx8abd] {
    background: white;
    border: 2px dashed #dbe4f0;
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}

.dashboard-placeholder-icon[b-urpmcx8abd] {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    border-radius: 24px;
    background: linear-gradient(135deg,#eef4ff,#dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-placeholder-icon i[b-urpmcx8abd] {
        font-size: 2.4rem;
        color: #2563eb;
    }

.dashboard-placeholder-card h3[b-urpmcx8abd] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .85rem;
}

.dashboard-placeholder-card p[b-urpmcx8abd] {
    max-width: 640px;
    margin: 0 auto 2rem;
    color: #64748b;
    line-height: 1.8;
}

/* ==========================================================
   BUTTONS
========================================================== */

.dashboard-placeholder-card .btn[b-urpmcx8abd],
.dashboard-upgrade-panel .btn[b-urpmcx8abd] {
    border-radius: 14px;
    padding: .85rem 1.75rem;
    font-weight: 700;
}

.btn-outline-primary[b-urpmcx8abd] {
    border-width: 2px;
}

/* ==========================================================
   ANIMATIONS
========================================================== */

.dashboard-tool-card[b-urpmcx8abd],
.dashboard-placeholder-card[b-urpmcx8abd],
.dashboard-upgrade-panel[b-urpmcx8abd],
.dashboard-welcome-card[b-urpmcx8abd] {
    transition: all .25s ease;
}

    .dashboard-placeholder-card:hover[b-urpmcx8abd] {
        border-color: #93c5fd;
        box-shadow: 0 18px 40px rgba(37,99,235,.08);
    }

    .dashboard-upgrade-panel:hover[b-urpmcx8abd] {
        transform: translateY(-3px);
    }

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .dashboard-shell[b-urpmcx8abd] {
        max-width: 100%;
    }
}

@media (max-width: 992px) {

    .dashboard-page[b-urpmcx8abd] {
        padding-top: 1rem;
    }

    .dashboard-welcome-card[b-urpmcx8abd] {
        padding: 2.25rem;
    }

    .dashboard-plan-card[b-urpmcx8abd] {
        margin-top: 1rem;
    }

    .dashboard-section-heading[b-urpmcx8abd] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .dashboard-upgrade-panel[b-urpmcx8abd] {
        padding: 2.25rem;
    }

    .dashboard-upgrade-button-lg[b-urpmcx8abd] {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .dashboard-welcome-copy h1[b-urpmcx8abd] {
        font-size: 2.2rem;
    }

    .dashboard-section-heading h2[b-urpmcx8abd] {
        font-size: 1.6rem;
    }

    .dashboard-tool-card[b-urpmcx8abd],
    .dashboard-placeholder-card[b-urpmcx8abd] {
        padding: 1.75rem;
    }

    .dashboard-upgrade-panel h2[b-urpmcx8abd] {
        font-size: 1.8rem;
    }

    .dashboard-upgrade-features[b-urpmcx8abd] {
        flex-direction: column;
        gap: .85rem;
    }
}

@media (max-width: 576px) {

    .dashboard-page[b-urpmcx8abd] {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .dashboard-welcome-card[b-urpmcx8abd] {
        border-radius: 22px;
        padding: 1.75rem;
    }

    .dashboard-plan-card[b-urpmcx8abd] {
        padding: 1.5rem;
    }

    .dashboard-tool-icon[b-urpmcx8abd] {
        width: 60px;
        height: 60px;
    }

        .dashboard-tool-icon i[b-urpmcx8abd] {
            font-size: 1.6rem;
        }

    .dashboard-placeholder-icon[b-urpmcx8abd] {
        width: 72px;
        height: 72px;
    }

        .dashboard-placeholder-icon i[b-urpmcx8abd] {
            font-size: 2rem;
        }
}

/* ==========================================================
   UTILITIES
========================================================== */

.dashboard-tool-card *[b-urpmcx8abd],
.dashboard-placeholder-card *[b-urpmcx8abd],
.dashboard-upgrade-panel *[b-urpmcx8abd] {
    word-wrap: break-word;
}

.dashboard-tool-card:focus[b-urpmcx8abd],
.dashboard-heading-link:focus[b-urpmcx8abd],
.dashboard-upgrade-button:focus[b-urpmcx8abd],
.dashboard-upgrade-button-lg:focus[b-urpmcx8abd] {
    outline: 3px solid rgba(37,99,235,.25);
    outline-offset: 3px;
}

.dashboard-tool-card:hover .dashboard-tool-arrow[b-urpmcx8abd] {
    transform: translateX(3px) translateY(-3px);
}

.dashboard-tool-arrow[b-urpmcx8abd] {
    transition: transform .2s ease;
}
.dashboard-tool-card:hover[b-urpmcx8abd] {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px rgba(37,99,235,.14);
    border-color: #93c5fd;
}
.dashboard-tool-icon[b-urpmcx8abd] {
    transition: .25s;
}

.dashboard-tool-card:hover .dashboard-tool-icon[b-urpmcx8abd] {
    transform: scale(1.08);
}
.dashboard-subtitle[b-urpmcx8abd] {
    font-size: 1.05rem;
    color: rgba(255,255,255,.90);
    margin-top: .4rem;
    margin-bottom: 0;
    max-width: 600px;
}

.dashboard-widget[b-urpmcx8abd] {
    background: white;
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

.dashboard-widget-header[b-urpmcx8abd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

    .dashboard-widget-header h3[b-urpmcx8abd] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: .35rem;
    }

    .dashboard-widget-header p[b-urpmcx8abd] {
        color: #64748b;
        margin: 0;
    }

.dashboard-empty-state[b-urpmcx8abd] {
    text-align: center;
    padding: 2rem 1rem;
}

.dashboard-empty-icon[b-urpmcx8abd] {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-empty-icon i[b-urpmcx8abd] {
        font-size: 1.8rem;
        color: #2563eb;
    }

/* /Components/Pages/Explore.razor.rz.scp.css */
/* ==========================================================
   CAREERGPS EXPLORE
   Clean premium SaaS stylesheet
   ========================================================== */

.explorer-page[b-0o57cjyb2d] {
    min-height: 100vh;
    padding-bottom: 4rem;
    background: radial-gradient(circle at 100% 0%, rgba(219, 234, 254, .9), transparent 28rem), radial-gradient(circle at 0% 100%, rgba(238, 242, 255, .9), transparent 32rem), #f8fafc;
    color: #0f172a;
}

/* ==========================================================
   HERO
   ========================================================== */

.explorer-hero[b-0o57cjyb2d] {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 5.25rem;
    background: radial-gradient(circle at 88% 18%, rgba(96, 165, 250, .34), transparent 18rem), linear-gradient(135deg, #0f172a 0%, #172554 46%, #1d4ed8 100%);
    color: #fff;
}

.explorer-hero-grid[b-0o57cjyb2d] {
    position: absolute;
    inset: 0;
    opacity: .07;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 42px 42px;
}

.explorer-hero-glow[b-0o57cjyb2d] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.explorer-hero-glow-one[b-0o57cjyb2d] {
    top: -9rem;
    right: -7rem;
    width: 23rem;
    height: 23rem;
    background: rgba(96, 165, 250, .55);
}

.explorer-hero-glow-two[b-0o57cjyb2d] {
    bottom: -10rem;
    left: -7rem;
    width: 20rem;
    height: 20rem;
    background: rgba(37, 99, 235, .42);
}

.explorer-hero-content[b-0o57cjyb2d],
.explorer-hero-visual[b-0o57cjyb2d] {
    position: relative;
    z-index: 2;
}

.explorer-eyebrow[b-0o57cjyb2d] {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.15rem;
    padding: .4rem .85rem .4rem .45rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.explorer-eyebrow-icon[b-0o57cjyb2d] {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    font-size: .9rem;
}

.explorer-hero-title[b-0o57cjyb2d] {
    max-width: 720px;
    margin: 0 0 1rem;
    font-size: clamp(2.45rem, 4.7vw, 4.45rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.055em;
}

.explorer-hero-highlight[b-0o57cjyb2d] {
    display: block;
    color: #93c5fd;
}

.explorer-hero-description[b-0o57cjyb2d] {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: 1rem;
    line-height: 1.65;
}

.explorer-hero-features[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    max-width: 760px;
    margin: 1.45rem 0 1.65rem;
}

.explorer-hero-feature[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .7rem;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .055);
}

.explorer-feature-icon[b-0o57cjyb2d] {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: .72rem;
    background: rgba(96, 165, 250, .16);
    color: #bfdbfe;
    font-size: .95rem;
}

.explorer-hero-feature strong[b-0o57cjyb2d],
.explorer-hero-feature span:not(.explorer-feature-icon)[b-0o57cjyb2d] {
    display: block;
}

.explorer-hero-feature strong[b-0o57cjyb2d] {
    margin-bottom: .1rem;
    color: #fff;
    font-size: .82rem;
}

.explorer-hero-feature span:not(.explorer-feature-icon)[b-0o57cjyb2d] {
    color: rgba(255, 255, 255, .64);
    font-size: .72rem;
    line-height: 1.35;
}

.explorer-hero-button[b-0o57cjyb2d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 2.9rem;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .explorer-hero-button:hover[b-0o57cjyb2d] {
        transform: translateY(-2px);
        color: #1d4ed8;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
    }

/* Hero visual */

.explorer-hero-visual[b-0o57cjyb2d] {
    min-height: 300px;
}

.explorer-visual-card[b-0o57cjyb2d] {
    position: absolute;
    inset: 0;
    margin: auto;
    height: fit-content;
    padding: 1.45rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1.4rem;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 70px rgba(2, 6, 23, .32);
}

.explorer-visual-header[b-0o57cjyb2d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

    .explorer-visual-header strong[b-0o57cjyb2d] {
        display: block;
        margin-top: .2rem;
        color: #fff;
        font-size: .95rem;
    }

.explorer-visual-label[b-0o57cjyb2d] {
    display: block;
    color: #93c5fd;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.explorer-live-indicator[b-0o57cjyb2d] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .36rem .62rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #bbf7d0;
    font-size: .68rem;
    font-weight: 700;
}

    .explorer-live-indicator span[b-0o57cjyb2d] {
        width: .42rem;
        height: .42rem;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
    }

.explorer-score-preview[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
}

.explorer-score-ring[b-0o57cjyb2d] {
    display: flex;
    width: 5.35rem;
    height: 5.35rem;
    flex: 0 0 5.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: .4rem;
    background: conic-gradient(#60a5fa 0deg 290deg, rgba(255, 255, 255, .12) 290deg);
}

.explorer-score-ring-inner[b-0o57cjyb2d] {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #172554;
    color: #93c5fd;
    font-size: 1.35rem;
}

.explorer-score-copy span[b-0o57cjyb2d],
.explorer-score-copy strong[b-0o57cjyb2d] {
    display: block;
}

.explorer-score-copy span[b-0o57cjyb2d] {
    color: #93c5fd;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.explorer-score-copy strong[b-0o57cjyb2d] {
    margin: .25rem 0 .35rem;
    color: #fff;
    font-size: 1.08rem;
}

.explorer-score-copy p[b-0o57cjyb2d] {
    margin: 0;
    color: rgba(255, 255, 255, .64);
    font-size: .78rem;
    line-height: 1.5;
}

.explorer-preview-metrics[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.explorer-preview-metric[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .68rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .82rem;
    background: rgba(255, 255, 255, .055);
}

.explorer-preview-metric-icon[b-0o57cjyb2d] {
    display: inline-flex;
    width: 1.95rem;
    height: 1.95rem;
    flex: 0 0 1.95rem;
    align-items: center;
    justify-content: center;
    border-radius: .62rem;
    background: rgba(96, 165, 250, .16);
    color: #93c5fd;
}

.explorer-preview-metric small[b-0o57cjyb2d],
.explorer-preview-metric strong[b-0o57cjyb2d] {
    display: block;
}

.explorer-preview-metric small[b-0o57cjyb2d] {
    color: rgba(255, 255, 255, .48);
    font-size: .61rem;
}

.explorer-preview-metric strong[b-0o57cjyb2d] {
    color: #fff;
    font-size: .73rem;
}

/* ==========================================================
   WORKFLOW
   ========================================================== */

.explorer-workflow-shell[b-0o57cjyb2d] {
    position: relative;
    z-index: 5;
    width: min(1320px, calc(100% - 2rem));
    margin: -2rem auto 0;
}

.explorer-workflow-intro[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1rem 1.3rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .09);
}

.explorer-section-kicker[b-0o57cjyb2d] {
    display: inline-block;
    color: #2563eb;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.explorer-workflow-intro h2[b-0o57cjyb2d] {
    margin: .25rem 0 .3rem;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 850;
    letter-spacing: -.025em;
}

.explorer-workflow-intro p[b-0o57cjyb2d] {
    max-width: 670px;
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.5;
}

.explorer-workflow-progress[b-0o57cjyb2d] {
    display: flex;
    min-width: 350px;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.explorer-progress-item[b-0o57cjyb2d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: #64748b;
    font-size: .66rem;
}

    .explorer-progress-item span[b-0o57cjyb2d] {
        display: flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #e2e8f0;
        color: #475569;
        font-weight: 850;
    }

    .explorer-progress-item.active span[b-0o57cjyb2d] {
        background: #2563eb;
        color: #fff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .23);
    }

    .explorer-progress-item strong[b-0o57cjyb2d] {
        font-weight: 750;
    }

.explorer-progress-line[b-0o57cjyb2d] {
    width: 2.6rem;
    height: 2px;
    margin-bottom: 1rem;
    background: #dbeafe;
}

.status-message[b-0o57cjyb2d],
.error-message[b-0o57cjyb2d] {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.error-message[b-0o57cjyb2d] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

/* ==========================================================
   SHARED SECTIONS
   ========================================================== */

.explorer-section[b-0o57cjyb2d],
.results-section[b-0o57cjyb2d] {
    margin-bottom: 1rem;
}

.explorer-glass-card[b-0o57cjyb2d] {
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
}

.explorer-section-header[b-0o57cjyb2d] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1rem;
}

.explorer-step-icon[b-0o57cjyb2d] {
    display: flex;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    align-items: center;
    justify-content: center;
    border-radius: .82rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1.02rem;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

    .explorer-step-icon.geography-step[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #0891b2, #2563eb);
    }

    .explorer-step-icon.results-step[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #7c3aed, #2563eb);
    }

.explorer-step-label[b-0o57cjyb2d] {
    display: inline-block;
    margin-bottom: .16rem;
    color: #2563eb;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.explorer-section-header h2[b-0o57cjyb2d] {
    margin: 0 0 .25rem;
    color: #0f172a;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 850;
    letter-spacing: -.025em;
}

.explorer-section-header p[b-0o57cjyb2d] {
    max-width: 850px;
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.5;
}

/* ==========================================================
   STEP ONE — STRATEGY GRID
   ========================================================== */

.strategy-grid[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.strategy-tile[b-0o57cjyb2d] {
    appearance: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 165px;
    padding: 1rem;
    border: 1px solid #dbe4f2;
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

    .strategy-tile:hover[b-0o57cjyb2d] {
        transform: translateY(-3px);
        border-color: #93c5fd;
        box-shadow: 0 16px 32px rgba(37, 99, 235, .09);
    }

    .strategy-tile:focus-visible[b-0o57cjyb2d] {
        outline: 3px solid rgba(37, 99, 235, .22);
        outline-offset: 2px;
    }

    .strategy-tile.selected[b-0o57cjyb2d] {
        border-color: #2563eb;
        background: linear-gradient(180deg, #f5f9ff 0%, #fff 100%);
        box-shadow: 0 0 0 1px #2563eb, 0 16px 34px rgba(37, 99, 235, .12);
    }

.strategy-tile-top[b-0o57cjyb2d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.strategy-icon[b-0o57cjyb2d] {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 9px 20px rgba(37, 99, 235, .18);
}

.strategy-badge[b-0o57cjyb2d] {
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.strategy-copy[b-0o57cjyb2d] {
    flex: 1;
}

    .strategy-copy h3[b-0o57cjyb2d] {
        margin: 0 0 .35rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -.012em;
    }

    .strategy-copy p[b-0o57cjyb2d] {
        margin: 0;
        color: #64748b;
        font-size: .78rem;
        line-height: 1.45;
    }

.strategy-footer[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid #eef2f7;
}

.strategy-selected[b-0o57cjyb2d],
.strategy-link[b-0o57cjyb2d] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 800;
}

.strategy-selected[b-0o57cjyb2d] {
    color: #1d4ed8;
}

.strategy-link[b-0o57cjyb2d] {
    color: #475569;
}

.strategy-tile:hover .strategy-link[b-0o57cjyb2d] {
    color: #2563eb;
}

/* ==========================================================
   STEP TWO — GEOGRAPHY
   ========================================================== */

.explorer-geography-shell[b-0o57cjyb2d] {
    overflow: hidden;
    border: 1px solid #dbe4f2;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.explorer-selection-summary[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.selection-summary-icon[b-0o57cjyb2d] {
    display: flex;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    align-items: center;
    justify-content: center;
    border-radius: .82rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1rem;
}

.selection-title[b-0o57cjyb2d] {
    margin-bottom: .15rem;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 800;
}

.selection-description[b-0o57cjyb2d] {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.4;
}

.explorer-geography-container[b-0o57cjyb2d] {
    padding: 1rem;
}

/* ==========================================================
   STEP THREE — GENERATE RANKINGS
   ========================================================== */

.results-step-card[b-0o57cjyb2d] {
    display: flex;
    flex-direction: column;
}

.career-search-cta[b-0o57cjyb2d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dbe4f2;
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

/* Selected strategy + market */

.career-search-selection[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}

.career-search-selection-item[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: .75rem .9rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    background: #ffffff;
}

    .career-search-selection-item span[b-0o57cjyb2d] {
        color: #64748b;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .career-search-selection-item strong[b-0o57cjyb2d] {
        color: #0f172a;
        font-size: .82rem;
        font-weight: 800;
        text-align: right;
        line-height: 1.3;
    }

/* Main action */

.explorer-search-button[b-0o57cjyb2d] {
    display: inline-flex;
    width: 100%;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border: 0;
    border-radius: .85rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .22);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

    .explorer-search-button:hover:not(:disabled)[b-0o57cjyb2d] {
        transform: translateY(-2px);
        color: #ffffff;
        box-shadow: 0 17px 34px rgba(37, 99, 235, .3);
    }

    .explorer-search-button:disabled[b-0o57cjyb2d] {
        cursor: not-allowed;
        opacity: .48;
        box-shadow: none;
    }

/* ==========================================================
   RESULTS
   ========================================================== */

.results-section[b-0o57cjyb2d] {
    margin-top: .25rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.results-dashboard-header[b-0o57cjyb2d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem;
    border-bottom: 1px solid #e2e8f0;
}

.results-title h2[b-0o57cjyb2d] {
    margin: .35rem 0 .55rem;
    color: #0f172a;
    font-size: 1.8rem;
    font-weight: 850;
}

.results-title p[b-0o57cjyb2d] {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.6;
}

.results-count-card[b-0o57cjyb2d] {
    min-width: 155px;
    padding: 1.15rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    text-align: center;
    box-shadow: 0 16px 32px rgba(37, 99, 235, .2);
}

.results-count-label[b-0o57cjyb2d] {
    display: block;
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.results-count-card strong[b-0o57cjyb2d] {
    display: block;
    margin: .25rem 0;
    font-size: 2rem;
    font-weight: 850;
}

.results-count-card small[b-0o57cjyb2d] {
    opacity: .88;
}

.executive-summary-ribbon[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fbff;
}

.summary-card[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #fff;
}

.summary-icon[b-0o57cjyb2d] {
    display: flex;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    align-items: center;
    justify-content: center;
    border-radius: .78rem;
    color: #fff;
    font-size: 1rem;
}

    .summary-icon.salary[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .summary-icon.jobs[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
    }

    .summary-icon.growth[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #7c3aed, #9333ea);
    }

    .summary-icon.score[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #f59e0b, #ea580c);
    }

.summary-card small[b-0o57cjyb2d],
.summary-card strong[b-0o57cjyb2d] {
    display: block;
}

.summary-card small[b-0o57cjyb2d] {
    color: #64748b;
    font-size: .62rem;
    text-transform: uppercase;
}

.summary-card strong[b-0o57cjyb2d] {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.top-careers-showcase[b-0o57cjyb2d] {
    padding: 1.5rem;
}

.top-careers-header[b-0o57cjyb2d] {
    margin-bottom: 1.5rem;
    text-align: center;
}

    .top-careers-header h2[b-0o57cjyb2d] {
        margin: .35rem 0 .45rem;
        color: #0f172a;
        font-size: 1.85rem;
        font-weight: 850;
    }

    .top-careers-header p[b-0o57cjyb2d] {
        margin: 0;
        color: #64748b;
    }

.top-career-card[b-0o57cjyb2d] {
    height: 100%;
    padding: 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .top-career-card:hover[b-0o57cjyb2d] {
        transform: translateY(-4px);
        box-shadow: 0 20px 42px rgba(15, 23, 42, .09);
    }

.top-career-medal[b-0o57cjyb2d] {
    margin-bottom: .65rem;
    font-size: 2.25rem;
}

.top-career-card h3[b-0o57cjyb2d] {
    min-height: 2.6rem;
    margin-bottom: 1rem;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 800;
}

.top-career-score[b-0o57cjyb2d] {
    display: flex;
    width: 4.6rem;
    height: 4.6rem;
    margin: 0 auto 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 850;
}

.top-career-stats[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

    .top-career-stats > div[b-0o57cjyb2d] {
        padding: .6rem .35rem;
        border-radius: .75rem;
        background: #f8fafc;
    }

    .top-career-stats strong[b-0o57cjyb2d],
    .top-career-stats span[b-0o57cjyb2d] {
        display: block;
    }

    .top-career-stats strong[b-0o57cjyb2d] {
        color: #0f172a;
        font-size: .83rem;
    }

    .top-career-stats span[b-0o57cjyb2d] {
        margin-top: .15rem;
        color: #64748b;
        font-size: .66rem;
    }

.careergps-pro-banner[b-0o57cjyb2d] {
    position: relative;
    overflow: hidden;
    margin: 1.5rem;
    padding: 2rem;
    border-radius: 1.25rem;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, .15), transparent 30%), linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #fff;
}

    .careergps-pro-banner[b-0o57cjyb2d]::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .16;
        background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .careergps-pro-banner > *[b-0o57cjyb2d] {
        position: relative;
        z-index: 2;
    }

.pro-kicker[b-0o57cjyb2d] {
    display: inline-block;
    margin-bottom: .55rem;
    color: #93c5fd;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.careergps-pro-banner h3[b-0o57cjyb2d] {
    margin-bottom: .7rem;
    font-size: 1.7rem;
    font-weight: 850;
}

.careergps-pro-banner p[b-0o57cjyb2d] {
    max-width: 760px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .84);
    line-height: 1.65;
}

.pro-features[b-0o57cjyb2d] {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.2rem;
}

    .pro-features span[b-0o57cjyb2d] {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem .75rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        font-size: .78rem;
        backdrop-filter: blur(8px);
    }

    .pro-features i[b-0o57cjyb2d] {
        color: #93c5fd;
    }

/* ==========================================================
   PREMIUM RESULTS HEADER
   ========================================================== */

.premium-results-header[b-0o57cjyb2d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 0;
    padding: 1.6rem;
    border-bottom: 1px solid #edf2fb;
}

.results-header-left[b-0o57cjyb2d] {
    flex: 1;
    min-width: 0;
}

    .results-header-left h2[b-0o57cjyb2d] {
        margin: 0 0 .75rem;
        color: #12284c;
        font-size: clamp(1.65rem, 2.8vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -.025em;
    }

    .results-header-left p[b-0o57cjyb2d] {
        max-width: 720px;
        margin: 0;
        color: #667085;
        font-size: 1rem;
        line-height: 1.6;
    }

.results-kicker[b-0o57cjyb2d] {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #3559d7;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.results-header-right[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 180px));
    gap: 1rem;
}

.results-stat-card[b-0o57cjyb2d] {
    padding: 1.2rem;
    border: 1px solid #e6ebf4;
    border-radius: 1.1rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 14px 36px rgba(24, 39, 75, .06);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .results-stat-card:hover[b-0o57cjyb2d] {
        transform: translateY(-3px);
        box-shadow: 0 20px 46px rgba(24, 39, 75, .11);
    }

    .results-stat-card small[b-0o57cjyb2d] {
        display: block;
        margin-bottom: .55rem;
        color: #7d8797;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .results-stat-card strong[b-0o57cjyb2d] {
        display: block;
        overflow-wrap: anywhere;
        color: #183153;
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.25;
    }

/* ==========================================================
   PREMIUM TOP CAREER CARDS
   ========================================================== */

.premium-top-card[b-0o57cjyb2d] {
    position: relative;
    height: 100%;
    padding: 2rem;
    border: 1px solid #e8edf6;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 18px 45px rgba(20, 34, 66, .08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .premium-top-card:hover[b-0o57cjyb2d] {
        transform: translateY(-6px);
        box-shadow: 0 28px 60px rgba(20, 34, 66, .14);
    }

.premium-rank-badge[b-0o57cjyb2d] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 2rem;
}

.premium-score-circle[b-0o57cjyb2d] {
    display: flex;
    width: 6.25rem;
    height: 6.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.65rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f7cff, #2347d8);
    color: #fff;
    box-shadow: 0 18px 40px rgba(79, 124, 255, .35);
}

    .premium-score-circle span[b-0o57cjyb2d] {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .premium-score-circle small[b-0o57cjyb2d] {
        margin-top: .25rem;
        font-size: .7rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .9;
    }

.premium-career-title[b-0o57cjyb2d] {
    min-height: auto;
    margin: 0 0 .55rem;
    color: #183153;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.premium-career-subtitle[b-0o57cjyb2d] {
    margin-bottom: 1.65rem;
    color: #6b7280;
    text-align: center;
}

.premium-stat-grid[b-0o57cjyb2d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.65rem;
}

.premium-stat[b-0o57cjyb2d] {
    padding: 1rem;
    border: 1px solid #edf1f7;
    border-radius: 1rem;
    background: #f8faff;
    text-align: center;
}

    .premium-stat i[b-0o57cjyb2d] {
        display: block;
        margin-bottom: .45rem;
        color: #3767f5;
        font-size: 1.2rem;
    }

    .premium-stat small[b-0o57cjyb2d] {
        display: block;
        margin-bottom: .3rem;
        color: #7b8797;
        font-size: .72rem;
    }

    .premium-stat strong[b-0o57cjyb2d] {
        display: block;
        color: #183153;
        font-size: .98rem;
        font-weight: 750;
    }

.premium-view-btn[b-0o57cjyb2d] {
    padding: .85rem 1rem;
    border: 0;
    border-radius: .9rem;
    background: linear-gradient(135deg, #4f7cff, #2d57ea);
    color: #fff;
    font-weight: 750;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

    .premium-view-btn:hover[b-0o57cjyb2d] {
        transform: translateY(-2px);
        color: #fff;
        box-shadow: 0 16px 36px rgba(79, 124, 255, .3);
    }
/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {
    .strategy-grid[b-0o57cjyb2d] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .executive-summary-ribbon[b-0o57cjyb2d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .explorer-hero[b-0o57cjyb2d] {
        padding-top: 3rem;
    }

    .explorer-hero-features[b-0o57cjyb2d] {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .explorer-hero-visual[b-0o57cjyb2d] {
        min-height: 290px;
    }

    .explorer-workflow-intro[b-0o57cjyb2d] {
        flex-direction: column;
        align-items: flex-start;
    }

    .explorer-workflow-progress[b-0o57cjyb2d] {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .strategy-grid[b-0o57cjyb2d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .results-dashboard-header[b-0o57cjyb2d] {
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .explorer-hero[b-0o57cjyb2d] {
        padding: 2.5rem 0 4.5rem;
    }

    .explorer-hero-title[b-0o57cjyb2d] {
        font-size: clamp(2.25rem, 11vw, 3.3rem);
    }

    .explorer-hero-visual[b-0o57cjyb2d] {
        min-height: 270px;
    }

    .explorer-workflow-shell[b-0o57cjyb2d] {
        width: min(100% - 1rem, 1320px);
    }

    .strategy-grid[b-0o57cjyb2d],
    .executive-summary-ribbon[b-0o57cjyb2d] {
        grid-template-columns: 1fr;
    }

    .strategy-tile[b-0o57cjyb2d] {
        min-height: 170px;
    }

    .results-dashboard-header[b-0o57cjyb2d],
    .top-careers-showcase[b-0o57cjyb2d] {
        padding: 1.2rem;
    }

    .careergps-pro-banner[b-0o57cjyb2d] {
        margin: 1rem;
        padding: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    .explorer-visual-card[b-0o57cjyb2d] {
        padding: 1rem;
    }

    .explorer-score-ring[b-0o57cjyb2d] {
        width: 4.4rem;
        height: 4.4rem;
        flex-basis: 4.4rem;
    }

    .explorer-preview-metrics[b-0o57cjyb2d] {
        grid-template-columns: 1fr;
    }

    .explorer-workflow-progress[b-0o57cjyb2d] {
        gap: .35rem;
    }

    .explorer-progress-line[b-0o57cjyb2d] {
        width: 1.5rem;
    }

    .explorer-glass-card[b-0o57cjyb2d] {
        padding: 1rem;
    }

    .explorer-section-header[b-0o57cjyb2d] {
        gap: .7rem;
    }

    .top-career-stats[b-0o57cjyb2d] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .explorer-glass-card[b-0o57cjyb2d],
    .results-section[b-0o57cjyb2d] {
        animation: explorerFadeUp-b-0o57cjyb2d .4s ease both;
    }
}

@media (max-width: 1199.98px) {
    .premium-results-header[b-0o57cjyb2d] {
        align-items: flex-start;
    }

    .results-header-right[b-0o57cjyb2d] {
        grid-template-columns: repeat(3, minmax(125px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .premium-results-header[b-0o57cjyb2d] {
        flex-direction: column;
        align-items: stretch;
    }

    .results-header-right[b-0o57cjyb2d] {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .premium-results-header[b-0o57cjyb2d] {
        padding: 1.2rem;
    }

    .results-header-right[b-0o57cjyb2d],
    .premium-stat-grid[b-0o57cjyb2d] {
        grid-template-columns: 1fr;
    }

    .premium-top-card[b-0o57cjyb2d] {
        padding: 1.4rem;
    }
}

@keyframes explorerFadeUp-b-0o57cjyb2d {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.explorer-generate-column[b-0o57cjyb2d] {
    display: flex;
    align-self: stretch;
}

    .explorer-generate-column .results-step-card[b-0o57cjyb2d] {
        width: 100%;
        height: 100%;
    }

    /* ==========================================================
   STEP THREE — PREMIUM ACTION PANEL
   ========================================================== */

    .explorer-generate-column .results-step-card[b-0o57cjyb2d] {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        border-color: rgba(37, 99, 235, .25);
        background: radial-gradient(circle at 100% 0%, rgba(96, 165, 250, .24), transparent 15rem), linear-gradient(145deg, #0f172a 0%, #172554 55%, #1e3a8a 100%);
        color: #fff;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
    }

    .explorer-generate-column .explorer-step-label[b-0o57cjyb2d] {
        color: #93c5fd;
    }

    .explorer-generate-column .explorer-section-header h2[b-0o57cjyb2d] {
        color: #fff;
    }

    .explorer-generate-column .explorer-section-header p[b-0o57cjyb2d] {
        color: rgba(255, 255, 255, .66);
    }

    .explorer-generate-column .career-search-cta[b-0o57cjyb2d] {
        margin-top: auto;
        border-color: rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .07);
        backdrop-filter: blur(10px);
    }

    .explorer-generate-column .career-search-selection-item[b-0o57cjyb2d] {
        border-color: rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .08);
    }

        .explorer-generate-column .career-search-selection-item span[b-0o57cjyb2d] {
            color: #93c5fd;
        }

        .explorer-generate-column .career-search-selection-item strong[b-0o57cjyb2d] {
            color: #fff;
        }

    .explorer-generate-column .explorer-search-button[b-0o57cjyb2d] {
        background: linear-gradient(135deg, #ffffff, #dbeafe);
        color: #1d4ed8;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    }

        .explorer-generate-column .explorer-search-button:hover:not(:disabled)[b-0o57cjyb2d] {
            color: #1d4ed8;
            box-shadow: 0 17px 34px rgba(0, 0, 0, .24);
        }

        .explorer-generate-column .explorer-search-button:disabled[b-0o57cjyb2d] {
            background: rgba(255, 255, 255, .42);
            color: rgba(30, 64, 175, .7);
        }

.explorer-generate-column[b-0o57cjyb2d] {
    display: flex;
    align-self: flex-start;
}

    .explorer-generate-column .results-step-card[b-0o57cjyb2d] {
        height: auto;
        min-height: 0;
    }

    .explorer-generate-column .career-search-cta[b-0o57cjyb2d] {
        margin-top: 1.25rem;
    }

/* ==========================================================
   STEP TWO — CLEANER MARKET PANEL
   ========================================================== */

.market-builder[b-0o57cjyb2d] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.market-builder-intro[b-0o57cjyb2d] {
    margin-bottom: .8rem;
    padding: .8rem .9rem;
    border: 0;
    border-radius: .75rem;
    background: #f8fafc;
}

.market-mode-card[b-0o57cjyb2d] {
    box-shadow: none;
}

.market-select-card[b-0o57cjyb2d] {
    box-shadow: none;
}

.market-metric[b-0o57cjyb2d] {
    background: #f8fafc;
    box-shadow: none;
}

/* ==========================================================
   FINAL PRO RESULTS GATE
   ========================================================== */

.explorer-pro-unlock[b-0o57cjyb2d] {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) 250px !important;
    align-items: center !important;
    gap: 1.6rem !important;
    margin: 2rem 1rem .75rem !important;
    padding: 2rem 1.8rem !important;
    overflow: hidden !important;
    border: 3px solid #2563eb !important;
    border-radius: 22px !important;
    background: radial-gradient( circle at 88% 50%, rgba(79, 70, 229, .15), transparent 300px ), linear-gradient( 135deg, #ffffff 0%, #f8faff 55%, #eef2ff 100% ) !important;
    color: #0f172a !important;
    box-shadow: 0 24px 55px rgba(37, 99, 235, .22), 0 0 0 6px rgba(37, 99, 235, .06) !important;
}


    /* TOP PREMIUM ACCENT */

    .explorer-pro-unlock[b-0o57cjyb2d]::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 7px !important;
        background: linear-gradient( 90deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100% ) !important;
    }


/* LOCK ICON */

.explorer-pro-unlock-icon[b-0o57cjyb2d] {
    display: grid !important;
    place-items: center !important;
    width: 72px !important;
    height: 72px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient( 135deg, #2563eb, #4f46e5 ) !important;
    color: #ffffff !important;
    font-size: 1.6rem !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .32) !important;
}


/* CONTENT */

.explorer-pro-unlock-content[b-0o57cjyb2d] {
    min-width: 0 !important;
}

.explorer-pro-unlock-kicker[b-0o57cjyb2d] {
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: .45rem !important;
    padding: .28rem .6rem !important;
    border-radius: 999px !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}


/* MAIN HEADLINE */

.explorer-pro-unlock-content h3[b-0o57cjyb2d] {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 1.65rem !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
    letter-spacing: -.04em !important;
}


/* DESCRIPTION */

.explorer-pro-unlock-content p[b-0o57cjyb2d] {
    max-width: 680px !important;
    margin: .65rem 0 0 !important;
    color: #475569 !important;
    font-size: .86rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}


/* FEATURE LIST */

.explorer-pro-unlock-features[b-0o57cjyb2d] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .6rem 1.15rem !important;
    margin-top: 1rem !important;
}

    .explorer-pro-unlock-features span[b-0o57cjyb2d] {
        display: inline-flex !important;
        align-items: center !important;
        gap: .4rem !important;
        color: #1e293b !important;
        font-size: .75rem !important;
        font-weight: 850 !important;
    }

    .explorer-pro-unlock-features i[b-0o57cjyb2d] {
        color: #2563eb !important;
        font-size: .82rem !important;
    }


/* CTA AREA */

.explorer-pro-unlock-action[b-0o57cjyb2d] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .6rem !important;
    padding: 1rem !important;
    border: 1px solid #dbeafe !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
}


/* CTA BUTTON */

.explorer-pro-unlock-button[b-0o57cjyb2d] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .6rem !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: .9rem 1.2rem !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient( 135deg, #2563eb 0%, #4f46e5 100% ) !important;
    color: #ffffff !important;
    font-size: .84rem !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .32) !important;
    transition: transform 160ms ease, box-shadow 160ms ease !important;
}

    .explorer-pro-unlock-button:hover[b-0o57cjyb2d] {
        transform: translateY(-2px) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: 0 18px 38px rgba(37, 99, 235, .42) !important;
    }


/* SMALL UPGRADE TEXT */

.explorer-pro-unlock-action small[b-0o57cjyb2d] {
    text-align: center !important;
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {

    .explorer-pro-unlock[b-0o57cjyb2d] {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    .explorer-pro-unlock-action[b-0o57cjyb2d] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 575.98px) {

    .explorer-pro-unlock[b-0o57cjyb2d] {
        grid-template-columns: 1fr !important;
        margin-inline: .5rem !important;
        padding: 1.4rem !important;
    }

    .explorer-pro-unlock-icon[b-0o57cjyb2d] {
        width: 60px !important;
        height: 60px !important;
    }

    .explorer-pro-unlock-content h3[b-0o57cjyb2d] {
        font-size: 1.35rem !important;
    }

    .explorer-pro-unlock-features[b-0o57cjyb2d] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .explorer-pro-unlock-action[b-0o57cjyb2d] {
        grid-column: auto !important;
    }
}

/* ==========================================================
   STEP THREE — CENTER AGAINST STEP TWO
   ========================================================== */

.explorer-generate-column[b-0o57cjyb2d] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

.results-step-card[b-0o57cjyb2d] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
/* /Components/Pages/FAQ.razor.rz.scp.css */
/*==========================================================
    FAQ PAGE
==========================================================*/

.faq-hero[b-ib2weko2uf] {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
    background: linear-gradient(135deg,#0d6efd 0%,#2563eb 45%,#4f46e5 100%);
    color: #fff;
}

    .faq-hero[b-ib2weko2uf]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 42%);
        pointer-events: none;
    }

    .faq-hero > *[b-ib2weko2uf] {
        position: relative;
        z-index: 2;
    }

.faq-badge[b-ib2weko2uf] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.faq-hero h1 span[b-ib2weko2uf] {
    color: #b9dbff;
}

.faq-hero p[b-ib2weko2uf] {
    color: rgba(255,255,255,.9);
}

.hero-actions[b-ib2weko2uf] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

    .hero-actions .btn[b-ib2weko2uf] {
        border-radius: 12px;
        padding: .95rem 1.75rem;
        font-weight: 600;
    }

.faq-hero-card[b-ib2weko2uf] {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(18px);
}

.faq-stat + .faq-stat[b-ib2weko2uf] {
    margin-top: 2rem;
}

.faq-stat i[b-ib2weko2uf] {
    font-size: 2rem;
    margin-bottom: .75rem;
}

.faq-stat h4[b-ib2weko2uf] {
    color: #fff;
    margin-bottom: .6rem;
}

.faq-stat p[b-ib2weko2uf] {
    color: rgba(255,255,255,.85);
    margin-bottom: 0;
}

/*==========================================================
    COMMON
==========================================================*/

.section-badge[b-ib2weko2uf] {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-ib2weko2uf] {
    max-width: 760px;
    margin: 1rem auto 0;
    color: #6c757d;
}

/*==========================================================
    CATEGORY CARDS
==========================================================*/

.faq-categories[b-ib2weko2uf] {
    background: #f8fafc;
}

.faq-category-card[b-ib2weko2uf] {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    border: 1px solid #edf2f7;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .3s;
}

    .faq-category-card:hover[b-ib2weko2uf] {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(13,110,253,.15);
    }

.featured-card[b-ib2weko2uf] {
    border: 2px solid #0d6efd;
}

.faq-category-icon[b-ib2weko2uf] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin: 0 auto 1.4rem;
}

.faq-category-card h4[b-ib2weko2uf] {
    font-weight: 700;
    margin-bottom: 1rem;
}

.faq-category-card p[b-ib2weko2uf] {
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.7;
}

/*==========================================================
    FAQ ACCORDION
==========================================================*/

.faq-section[b-ib2weko2uf] {
    padding: 5rem 0;
}

.faq-accordion[b-ib2weko2uf] {
    max-width: 1000px;
    margin: auto;
}

    .faq-accordion .accordion-item[b-ib2weko2uf] {
        border: none;
        border-radius: 18px;
        overflow: hidden;
        margin-bottom: 1rem;
        box-shadow: 0 12px 35px rgba(0,0,0,.05);
    }

    .faq-accordion .accordion-button[b-ib2weko2uf] {
        background: #fff;
        font-weight: 600;
        font-size: 1.05rem;
        padding: 1.35rem 1.5rem;
        box-shadow: none;
    }

        .faq-accordion .accordion-button:not(.collapsed)[b-ib2weko2uf] {
            background: #eef5ff;
            color: #0d6efd;
        }

        .faq-accordion .accordion-button:focus[b-ib2weko2uf] {
            box-shadow: none;
        }

    .faq-accordion .accordion-body[b-ib2weko2uf] {
        padding: 1.5rem;
        color: #6c757d;
        line-height: 1.8;
        background: #fff;
    }

/*==========================================================
    CTA
==========================================================*/

.faq-cta-section[b-ib2weko2uf] {
    padding: 5rem 0 6rem;
}

.faq-cta-card[b-ib2weko2uf] {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 4rem;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
}

    .faq-cta-card[b-ib2weko2uf]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 40%);
        pointer-events: none;
    }

    .faq-cta-card > *[b-ib2weko2uf] {
        position: relative;
        z-index: 2;
    }

    .faq-cta-card .btn[b-ib2weko2uf] {
        border-radius: 12px;
        padding: .95rem 1.6rem;
        font-weight: 600;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:991px) {

    .faq-hero[b-ib2weko2uf] {
        text-align: center;
        padding: 5rem 0;
    }

    .faq-hero-card[b-ib2weko2uf] {
        margin-top: 2rem;
    }

    .hero-actions[b-ib2weko2uf] {
        justify-content: center;
    }

    .faq-cta-card[b-ib2weko2uf] {
        padding: 2rem;
    }
}

@media (max-width:768px) {

    .faq-hero h1[b-ib2weko2uf] {
        font-size: 2.6rem;
    }

    .hero-actions[b-ib2weko2uf] {
        flex-direction: column;
    }

        .hero-actions .btn[b-ib2weko2uf] {
            width: 100%;
        }

    .faq-category-card[b-ib2weko2uf],
    .faq-accordion .accordion-item[b-ib2weko2uf],
    .faq-cta-card[b-ib2weko2uf] {
        border-radius: 18px;
    }

        .faq-cta-card .btn[b-ib2weko2uf] {
            width: 100%;
        }
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/* CSS for ForgotPassword component */
/* ==========================================================
   CAREERGPS LOGIN
   ========================================================== */

.auth-page[b-vz7zc0ripd] {
    min-height: calc(100vh - 1px);
    padding: 2rem;
    background: radial-gradient(circle at 10% 10%, rgba(79, 124, 255, .12), transparent 30%), radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .10), transparent 32%), #f5f8fd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell[b-vz7zc0ripd] {
    width: min(1180px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    overflow: hidden;
    border: 1px solid rgba(214, 224, 239, .9);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

/* ==========================================================
   BRAND PANEL
   ========================================================== */

.auth-brand-panel[b-vz7zc0ripd] {
    position: relative;
    overflow: hidden;
    padding: 3.25rem;
    background: linear-gradient(145deg, rgba(15, 39, 95, .98), rgba(34, 75, 190, .97)), #17366f;
    color: #ffffff;
}

.auth-brand-content[b-vz7zc0ripd] {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.auth-logo[b-vz7zc0ripd] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 850;
    text-decoration: none;
    letter-spacing: -.02em;
}

    .auth-logo:hover[b-vz7zc0ripd] {
        color: inherit;
    }

.auth-logo-icon[b-vz7zc0ripd] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.auth-brand-copy[b-vz7zc0ripd] {
    max-width: 560px;
    margin-top: 6rem;
}

.auth-eyebrow[b-vz7zc0ripd],
.auth-heading-kicker[b-vz7zc0ripd] {
    display: inline-block;
    margin-bottom: .8rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-eyebrow[b-vz7zc0ripd] {
    color: #bcd0ff;
}

.auth-brand-copy h1[b-vz7zc0ripd] {
    max-width: 510px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 4vw, 4.15rem);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: -.045em;
}

.auth-brand-copy p[b-vz7zc0ripd] {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    line-height: 1.75;
}

.auth-benefits[b-vz7zc0ripd] {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
}

.auth-benefit[b-vz7zc0ripd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 17px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.auth-benefit-icon[b-vz7zc0ripd] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 1.05rem;
}

.auth-benefit div[b-vz7zc0ripd] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.auth-benefit strong[b-vz7zc0ripd] {
    font-size: .92rem;
    font-weight: 750;
}

.auth-benefit span[b-vz7zc0ripd] {
    color: rgba(255, 255, 255, .68);
    font-size: .8rem;
}

.auth-brand-footer[b-vz7zc0ripd] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, .62);
    font-size: .79rem;
}

.auth-decoration[b-vz7zc0ripd] {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.auth-decoration-one[b-vz7zc0ripd] {
    right: -160px;
    bottom: -190px;
    width: 440px;
    height: 440px;
    border: 70px solid rgba(255, 255, 255, .045);
}

.auth-decoration-two[b-vz7zc0ripd] {
    top: 80px;
    right: -75px;
    width: 210px;
    height: 210px;
    background: rgba(118, 153, 255, .12);
    filter: blur(2px);
}

/* ==========================================================
   FORM PANEL
   ========================================================== */

.auth-form-panel[b-vz7zc0ripd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    background: #ffffff;
}

.auth-form-container[b-vz7zc0ripd] {
    width: min(430px, 100%);
}

.auth-mobile-logo[b-vz7zc0ripd] {
    display: none;
    margin-bottom: 2.5rem;
    color: #17366f;
}

.auth-heading[b-vz7zc0ripd] {
    margin-bottom: 2rem;
}

.auth-heading-kicker[b-vz7zc0ripd] {
    color: #3568f5;
}

.auth-heading h2[b-vz7zc0ripd] {
    margin: 0 0 .65rem;
    color: #172b4d;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.auth-heading p[b-vz7zc0ripd] {
    margin: 0;
    color: #667085;
    font-size: .95rem;
    line-height: 1.65;
}

.auth-alert[b-vz7zc0ripd] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding: .95rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff7f7;
    color: #b42318;
    font-size: .86rem;
    line-height: 1.5;
}

.auth-alert-icon[b-vz7zc0ripd] {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.auth-field[b-vz7zc0ripd] {
    margin-bottom: 1.25rem;
}

    .auth-field label[b-vz7zc0ripd],
    .auth-label-row label[b-vz7zc0ripd] {
        margin-bottom: .5rem;
        color: #344054;
        font-size: .82rem;
        font-weight: 750;
    }

.auth-label-row[b-vz7zc0ripd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-input-wrapper[b-vz7zc0ripd] {
    position: relative;
}

.auth-input-icon[b-vz7zc0ripd] {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input[b-vz7zc0ripd] {
    width: 100%;
    min-height: 52px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #172b4d;
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-password-input[b-vz7zc0ripd] {
    padding-right: 3rem;
}

.auth-input[b-vz7zc0ripd]::placeholder {
    color: #a6afbd;
}

.auth-input:hover[b-vz7zc0ripd] {
    border-color: #b9c5d7;
}

.auth-input:focus[b-vz7zc0ripd] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .12);
}

.auth-password-toggle[b-vz7zc0ripd] {
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    transform: translateY(-50%);
}

    .auth-password-toggle:hover[b-vz7zc0ripd] {
        background: #f2f5fa;
        color: #3568f5;
    }

.auth-text-link[b-vz7zc0ripd] {
    color: #3568f5;
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
}

    .auth-text-link:hover[b-vz7zc0ripd] {
        color: #2347d8;
        text-decoration: underline;
    }

.auth-options[b-vz7zc0ripd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2rem 0 1.5rem;
}

.auth-checkbox[b-vz7zc0ripd] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #475467;
    font-size: .82rem;
    cursor: pointer;
}

    .auth-checkbox input[b-vz7zc0ripd] {
        width: 17px;
        height: 17px;
        accent-color: #3568f5;
    }

.auth-submit-button[b-vz7zc0ripd],
.auth-secondary-button[b-vz7zc0ripd] {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.auth-submit-button[b-vz7zc0ripd] {
    border: 0;
    background: linear-gradient(135deg, #4f7cff, #2347d8);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(54, 96, 230, .25);
}

    .auth-submit-button:hover:not(:disabled)[b-vz7zc0ripd] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(54, 96, 230, .32);
    }

    .auth-submit-button:disabled[b-vz7zc0ripd] {
        cursor: wait;
        opacity: .72;
    }

.auth-secondary-button[b-vz7zc0ripd] {
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #344054;
}

    .auth-secondary-button:hover[b-vz7zc0ripd] {
        border-color: #aebcd0;
        background: #f8faff;
        color: #2347d8;
        transform: translateY(-1px);
    }

.auth-divider[b-vz7zc0ripd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.7rem 0;
    color: #98a2b3;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}

    .auth-divider[b-vz7zc0ripd]::before,
    .auth-divider[b-vz7zc0ripd]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e7ecf3;
    }

.auth-legal[b-vz7zc0ripd] {
    margin: 1.5rem 0 0;
    color: #98a2b3;
    font-size: .71rem;
    line-height: 1.6;
    text-align: center;
}

    .auth-legal a[b-vz7zc0ripd] {
        color: #667085;
        font-weight: 650;
        text-decoration: none;
    }

        .auth-legal a:hover[b-vz7zc0ripd] {
            color: #3568f5;
            text-decoration: underline;
        }

/* Blazor validation */

.validation-message[b-vz7zc0ripd] {
    display: block;
    margin-top: .4rem;
    color: #d92d20;
    font-size: .74rem;
}

.invalid[b-vz7zc0ripd] {
    border-color: #f04438;
}

    .invalid:focus[b-vz7zc0ripd] {
        border-color: #f04438;
        box-shadow: 0 0 0 4px rgba(240, 68, 56, .10);
    }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    .auth-page[b-vz7zc0ripd] {
        padding: 1.25rem;
    }

    .auth-shell[b-vz7zc0ripd] {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel[b-vz7zc0ripd] {
        display: none;
    }

    .auth-form-panel[b-vz7zc0ripd] {
        min-height: calc(100vh - 2.5rem);
        padding: 3rem 2rem;
    }

    .auth-mobile-logo[b-vz7zc0ripd] {
        display: block;
    }
}

@media (max-width: 575px) {

    .auth-page[b-vz7zc0ripd] {
        padding: 0;
        background: #ffffff;
    }

    .auth-shell[b-vz7zc0ripd] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel[b-vz7zc0ripd] {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        align-items: flex-start;
    }

    .auth-form-container[b-vz7zc0ripd] {
        padding-top: 1rem;
    }

    .auth-heading h2[b-vz7zc0ripd] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/ForgotPasswordSent.razor.rz.scp.css */
/* CSS for ForgotPasswordSent component */
/* CSS for ForgotPassword component */
/* ==========================================================
   CAREERGPS LOGIN
   ========================================================== */

.auth-page[b-262v7ndqc8] {
    min-height: calc(100vh - 1px);
    padding: 2rem;
    background: radial-gradient(circle at 10% 10%, rgba(79, 124, 255, .12), transparent 30%), radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .10), transparent 32%), #f5f8fd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell[b-262v7ndqc8] {
    width: min(1180px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    overflow: hidden;
    border: 1px solid rgba(214, 224, 239, .9);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

/* ==========================================================
   BRAND PANEL
   ========================================================== */

.auth-brand-panel[b-262v7ndqc8] {
    position: relative;
    overflow: hidden;
    padding: 3.25rem;
    background: linear-gradient(145deg, rgba(15, 39, 95, .98), rgba(34, 75, 190, .97)), #17366f;
    color: #ffffff;
}

.auth-brand-content[b-262v7ndqc8] {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.auth-logo[b-262v7ndqc8] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 850;
    text-decoration: none;
    letter-spacing: -.02em;
}

    .auth-logo:hover[b-262v7ndqc8] {
        color: inherit;
    }

.auth-logo-icon[b-262v7ndqc8] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.auth-brand-copy[b-262v7ndqc8] {
    max-width: 560px;
    margin-top: 6rem;
}

.auth-eyebrow[b-262v7ndqc8],
.auth-heading-kicker[b-262v7ndqc8] {
    display: inline-block;
    margin-bottom: .8rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-eyebrow[b-262v7ndqc8] {
    color: #bcd0ff;
}

.auth-brand-copy h1[b-262v7ndqc8] {
    max-width: 510px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 4vw, 4.15rem);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: -.045em;
}

.auth-brand-copy p[b-262v7ndqc8] {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    line-height: 1.75;
}

.auth-benefits[b-262v7ndqc8] {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
}

.auth-benefit[b-262v7ndqc8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 17px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.auth-benefit-icon[b-262v7ndqc8] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 1.05rem;
}

.auth-benefit div[b-262v7ndqc8] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.auth-benefit strong[b-262v7ndqc8] {
    font-size: .92rem;
    font-weight: 750;
}

.auth-benefit span[b-262v7ndqc8] {
    color: rgba(255, 255, 255, .68);
    font-size: .8rem;
}

.auth-brand-footer[b-262v7ndqc8] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, .62);
    font-size: .79rem;
}

.auth-decoration[b-262v7ndqc8] {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.auth-decoration-one[b-262v7ndqc8] {
    right: -160px;
    bottom: -190px;
    width: 440px;
    height: 440px;
    border: 70px solid rgba(255, 255, 255, .045);
}

.auth-decoration-two[b-262v7ndqc8] {
    top: 80px;
    right: -75px;
    width: 210px;
    height: 210px;
    background: rgba(118, 153, 255, .12);
    filter: blur(2px);
}

/* ==========================================================
   FORM PANEL
   ========================================================== */

.auth-form-panel[b-262v7ndqc8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    background: #ffffff;
}

.auth-form-container[b-262v7ndqc8] {
    width: min(430px, 100%);
}

.auth-mobile-logo[b-262v7ndqc8] {
    display: none;
    margin-bottom: 2.5rem;
    color: #17366f;
}

.auth-heading[b-262v7ndqc8] {
    margin-bottom: 2rem;
}

.auth-heading-kicker[b-262v7ndqc8] {
    color: #3568f5;
}

.auth-heading h2[b-262v7ndqc8] {
    margin: 0 0 .65rem;
    color: #172b4d;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.auth-heading p[b-262v7ndqc8] {
    margin: 0;
    color: #667085;
    font-size: .95rem;
    line-height: 1.65;
}

.auth-alert[b-262v7ndqc8] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding: .95rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff7f7;
    color: #b42318;
    font-size: .86rem;
    line-height: 1.5;
}

.auth-alert-icon[b-262v7ndqc8] {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.auth-field[b-262v7ndqc8] {
    margin-bottom: 1.25rem;
}

    .auth-field label[b-262v7ndqc8],
    .auth-label-row label[b-262v7ndqc8] {
        margin-bottom: .5rem;
        color: #344054;
        font-size: .82rem;
        font-weight: 750;
    }

.auth-label-row[b-262v7ndqc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-input-wrapper[b-262v7ndqc8] {
    position: relative;
}

.auth-input-icon[b-262v7ndqc8] {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input[b-262v7ndqc8] {
    width: 100%;
    min-height: 52px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #172b4d;
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-password-input[b-262v7ndqc8] {
    padding-right: 3rem;
}

.auth-input[b-262v7ndqc8]::placeholder {
    color: #a6afbd;
}

.auth-input:hover[b-262v7ndqc8] {
    border-color: #b9c5d7;
}

.auth-input:focus[b-262v7ndqc8] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .12);
}

.auth-password-toggle[b-262v7ndqc8] {
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    transform: translateY(-50%);
}

    .auth-password-toggle:hover[b-262v7ndqc8] {
        background: #f2f5fa;
        color: #3568f5;
    }

.auth-text-link[b-262v7ndqc8] {
    color: #3568f5;
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
}

    .auth-text-link:hover[b-262v7ndqc8] {
        color: #2347d8;
        text-decoration: underline;
    }

.auth-options[b-262v7ndqc8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2rem 0 1.5rem;
}

.auth-checkbox[b-262v7ndqc8] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #475467;
    font-size: .82rem;
    cursor: pointer;
}

    .auth-checkbox input[b-262v7ndqc8] {
        width: 17px;
        height: 17px;
        accent-color: #3568f5;
    }

.auth-submit-button[b-262v7ndqc8],
.auth-secondary-button[b-262v7ndqc8] {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.auth-submit-button[b-262v7ndqc8] {
    border: 0;
    background: linear-gradient(135deg, #4f7cff, #2347d8);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(54, 96, 230, .25);
}

    .auth-submit-button:hover:not(:disabled)[b-262v7ndqc8] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(54, 96, 230, .32);
    }

    .auth-submit-button:disabled[b-262v7ndqc8] {
        cursor: wait;
        opacity: .72;
    }

.auth-secondary-button[b-262v7ndqc8] {
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #344054;
}

    .auth-secondary-button:hover[b-262v7ndqc8] {
        border-color: #aebcd0;
        background: #f8faff;
        color: #2347d8;
        transform: translateY(-1px);
    }

.auth-divider[b-262v7ndqc8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.7rem 0;
    color: #98a2b3;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}

    .auth-divider[b-262v7ndqc8]::before,
    .auth-divider[b-262v7ndqc8]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e7ecf3;
    }

.auth-legal[b-262v7ndqc8] {
    margin: 1.5rem 0 0;
    color: #98a2b3;
    font-size: .71rem;
    line-height: 1.6;
    text-align: center;
}

    .auth-legal a[b-262v7ndqc8] {
        color: #667085;
        font-weight: 650;
        text-decoration: none;
    }

        .auth-legal a:hover[b-262v7ndqc8] {
            color: #3568f5;
            text-decoration: underline;
        }

/* Blazor validation */

.validation-message[b-262v7ndqc8] {
    display: block;
    margin-top: .4rem;
    color: #d92d20;
    font-size: .74rem;
}

.invalid[b-262v7ndqc8] {
    border-color: #f04438;
}

    .invalid:focus[b-262v7ndqc8] {
        border-color: #f04438;
        box-shadow: 0 0 0 4px rgba(240, 68, 56, .10);
    }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    .auth-page[b-262v7ndqc8] {
        padding: 1.25rem;
    }

    .auth-shell[b-262v7ndqc8] {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel[b-262v7ndqc8] {
        display: none;
    }

    .auth-form-panel[b-262v7ndqc8] {
        min-height: calc(100vh - 2.5rem);
        padding: 3rem 2rem;
    }

    .auth-mobile-logo[b-262v7ndqc8] {
        display: block;
    }
}

@media (max-width: 575px) {

    .auth-page[b-262v7ndqc8] {
        padding: 0;
        background: #ffffff;
    }

    .auth-shell[b-262v7ndqc8] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel[b-262v7ndqc8] {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        align-items: flex-start;
    }

    .auth-form-container[b-262v7ndqc8] {
        padding-top: 1rem;
    }

    .auth-heading h2[b-262v7ndqc8] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   CareerGPS Home Page
   PART 1 — Foundation, Hero and Product Preview
   ========================================================================== */


/* ==========================================================================
   1. PAGE DESIGN TOKENS
   ========================================================================== */

.home-page[b-iimqb542se] {
    --cg-primary: #5b52f6;
    --cg-primary-dark: #4338ca;
    --cg-primary-light: #7c6fff;
    --cg-accent: #00a8ff;
    --cg-text: #0f172a;
    --cg-text-soft: #334155;
    --cg-muted: #64748b;
    --cg-muted-light: #94a3b8;
    --cg-border: #e2e8f0;
    --cg-border-soft: #edf1f7;
    --cg-surface: #ffffff;
    --cg-surface-soft: #f8fafc;
    --cg-success: #16a34a;
    --cg-success-bg: #dcfce7;
    --cg-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
    --cg-shadow-md: 0 20px 50px rgba(15, 23, 42, 0.10);
    --cg-shadow-lg: 0 35px 90px rgba(15, 23, 42, 0.15);
    width: 100%;
    overflow: hidden;
    color: var(--cg-text);
}


    /* ==========================================================================
   2. SHARED HOME-PAGE ELEMENTS
   ========================================================================== */

    .home-page *[b-iimqb542se],
    .home-page *[b-iimqb542se]::before,
    .home-page *[b-iimqb542se]::after {
        box-sizing: border-box;
    }

    .home-page a[b-iimqb542se] {
        text-decoration: none;
    }

    .home-page img[b-iimqb542se],
    .home-page svg[b-iimqb542se] {
        max-width: 100%;
    }

    .home-page button[b-iimqb542se],
    .home-page a[b-iimqb542se] {
        -webkit-tap-highlight-color: transparent;
    }


/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */

.hero-section[b-iimqb542se] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(460px, 0.98fr);
    align-items: center;
    gap: clamp(48px, 6vw, 84px);
    width: min(100% - 64px, 1320px);
    min-height: 750px;
    margin: 0 auto;
    padding: 84px 0 118px;
    isolation: isolate;
}


/* ==========================================================================
   4. HERO BACKGROUND
   ========================================================================== */

.hero-background[b-iimqb542se] {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

    .hero-background[b-iimqb542se]::before {
        position: absolute;
        content: "";
        inset: -180px -100vw -80px;
        background: radial-gradient( circle at 24% 22%, rgba(91, 82, 246, 0.10), transparent 34% ), radial-gradient( circle at 79% 65%, rgba(0, 168, 255, 0.08), transparent 32% ), linear-gradient( 180deg, #ffffff 0%, #fbfcff 58%, #f8faff 100% );
    }

.bg-circle[b-iimqb542se] {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    opacity: 0.34;
}

.bg-circle-1[b-iimqb542se] {
    top: -220px;
    left: -220px;
    width: 520px;
    height: 520px;
    background: #5b52f6;
}

.bg-circle-2[b-iimqb542se] {
    right: -190px;
    bottom: -190px;
    width: 460px;
    height: 460px;
    background: #8b7dff;
}

.bg-circle-3[b-iimqb542se] {
    top: 155px;
    right: 28%;
    width: 270px;
    height: 270px;
    background: #00a8ff;
    opacity: 0.20;
}

.bg-grid[b-iimqb542se] {
    position: absolute;
    inset: -80px -100vw 0;
    background-image: linear-gradient( rgba(91, 82, 246, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(91, 82, 246, 0.035) 1px, transparent 1px );
    background-size: 44px 44px;
    mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.75), transparent 78% );
    -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.75), transparent 78% );
}


/* ==========================================================================
   5. HERO CONTENT
   ========================================================================== */

.hero-content[b-iimqb542se] {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 760px;
}

.hero-badge[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    padding: 9px 15px;
    border: 1px solid rgba(91, 82, 246, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    color: var(--cg-primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.hero-badge-dot[b-iimqb542se] {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cg-success);
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.12);
}

.hero-content h1[b-iimqb542se] {
    max-width: 760px;
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(3.35rem, 5.55vw, 5.2rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.062em;
}

    .hero-content h1 span[b-iimqb542se] {
        display: block;
        margin-top: 10px;
        background: linear-gradient( 120deg, #2563eb 0%, #5b52f6 46%, #8b5cf6 72%, #00a8ff 100% );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

.hero-description[b-iimqb542se] {
    max-width: 680px;
    margin: 31px 0 0;
    color: var(--cg-muted);
    font-size: 1.16rem;
    line-height: 1.78;
}


/* ==========================================================================
   6. HERO ACTIONS
   ========================================================================== */

.hero-actions[b-iimqb542se] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.primary-hero-button[b-iimqb542se],
.secondary-hero-button[b-iimqb542se],
.final-cta-button[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 15px;
    font-size: 0.96rem;
    font-weight: 750;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.primary-hero-button[b-iimqb542se] {
    border: 1px solid transparent;
    background: linear-gradient( 135deg, #2563eb 0%, #5b52f6 58%, #7065ff 100% );
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(79, 70, 229, 0.28);
}

    .primary-hero-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        color: #ffffff;
        box-shadow: 0 22px 44px rgba(79, 70, 229, 0.36);
    }

    .primary-hero-button span[b-iimqb542se] {
        font-size: 1.15rem;
        transition: transform 180ms ease;
    }

    .primary-hero-button:hover span[b-iimqb542se] {
        transform: translateX(3px);
    }

.secondary-hero-button[b-iimqb542se] {
    border: 1px solid #dbe3ee;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--cg-text-soft);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

    .secondary-hero-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        border-color: rgba(91, 82, 246, 0.35);
        background: #ffffff;
        color: var(--cg-primary-dark);
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    }


/* ==========================================================================
   7. HERO TRUST ROW
   ========================================================================== */

.hero-trust-row[b-iimqb542se] {
    display: flex;
    align-items: center;
    gap: 21px;
    margin-top: 43px;
}

.trust-item[b-iimqb542se] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .trust-item strong[b-iimqb542se] {
        color: var(--cg-text);
        font-size: 0.88rem;
        font-weight: 750;
        line-height: 1.25;
    }

    .trust-item span[b-iimqb542se] {
        color: var(--cg-muted-light);
        font-size: 0.75rem;
        line-height: 1.3;
    }

.trust-divider[b-iimqb542se] {
    flex: 0 0 auto;
    width: 1px;
    height: 38px;
    background: var(--cg-border);
}


/* ==========================================================================
   8. HERO VISUAL
   ========================================================================== */

.hero-visual[b-iimqb542se] {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.visual-glow[b-iimqb542se] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(45px);
    pointer-events: none;
}

.visual-glow-one[b-iimqb542se] {
    top: -110px;
    right: -95px;
    width: 420px;
    height: 420px;
    background: rgba(91, 82, 246, 0.15);
}

.visual-glow-two[b-iimqb542se] {
    bottom: -115px;
    left: -85px;
    width: 330px;
    height: 330px;
    background: rgba(0, 168, 255, 0.12);
}


/* ==========================================================================
   9. PRODUCT PREVIEW CARD
   ========================================================================== */

.product-preview[b-iimqb542se] {
    position: relative;
    z-index: 5;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.75);
    border-radius: 27px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 35px 90px rgba(15, 23, 42, 0.15), 0 4px 14px rgba(15, 23, 42, 0.05);
    transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.5deg);
    transform-origin: center;
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

    .product-preview:hover[b-iimqb542se] {
        transform: perspective(1400px) rotateY(-1.5deg) rotateX(0.5deg) translateY(-9px);
        border-color: rgba(91, 82, 246, 0.22);
        box-shadow: 0 46px 110px rgba(15, 23, 42, 0.19), 0 8px 22px rgba(15, 23, 42, 0.06);
    }


/* ==========================================================================
   10. PREVIEW HEADER
   ========================================================================== */

.preview-header[b-iimqb542se] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 27px 28px 23px;
    border-bottom: 1px solid var(--cg-border);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 0.72) 100% );
}

    .preview-header > div[b-iimqb542se] {
        min-width: 0;
    }

.preview-eyebrow[b-iimqb542se] {
    display: block;
    margin-bottom: 7px;
    color: var(--cg-primary);
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.13em;
}

.preview-header h2[b-iimqb542se] {
    margin: 0;
    color: var(--cg-text);
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.preview-status[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(22, 163, 74, 0.13);
    border-radius: 999px;
    background: var(--cg-success-bg);
    color: #15803d;
    font-size: 0.63rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.08em;
}

    .preview-status[b-iimqb542se]::before {
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 6px;
        border-radius: 50%;
        background: var(--cg-success);
        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
    }


/* ==========================================================================
   11. DASHBOARD PREVIEW BODY
   ========================================================================== */

.dashboard-list[b-iimqb542se] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 26px 28px 29px;
    background: radial-gradient( circle at top right, rgba(91, 82, 246, 0.06), transparent 37% ), #ffffff;
}


/* ==========================================================================
   12. OPPORTUNITY SCORE
   ========================================================================== */

.dashboard-score-card[b-iimqb542se] {
    margin-bottom: 25px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cg-border-soft);
}

.score-header[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

    .score-header span[b-iimqb542se] {
        color: var(--cg-text-soft);
        font-size: 0.86rem;
        font-weight: 750;
    }

    .score-header strong[b-iimqb542se] {
        color: var(--cg-primary);
        font-size: 2.7rem;
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.055em;
    }

.score-progress[b-iimqb542se] {
    position: relative;
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2ff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.score-progress-fill[b-iimqb542se] {
    position: relative;
    width: 92%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient( 90deg, #2563eb 0%, #5b52f6 52%, #8b7dff 100% );
    box-shadow: 0 5px 14px rgba(91, 82, 246, 0.28);
}

    .score-progress-fill[b-iimqb542se]::after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        width: 34%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.36) );
    }


/* ==========================================================================
   13. DASHBOARD METRIC CARDS
   ========================================================================== */

.dashboard-metrics[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 27px;
}

    .dashboard-metrics .metric-card[b-iimqb542se] {
        min-width: 0;
        padding: 17px 18px;
        border: 1px solid var(--cg-border-soft);
        border-radius: 17px;
        background: var(--cg-surface-soft);
        transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

        .dashboard-metrics .metric-card:hover[b-iimqb542se] {
            transform: translateY(-4px);
            border-color: rgba(91, 82, 246, 0.18);
            background: #ffffff;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
        }

.metric-label[b-iimqb542se] {
    display: block;
    margin-bottom: 7px;
    color: var(--cg-muted-light);
    font-size: 0.63rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-metrics .metric-card strong[b-iimqb542se] {
    display: block;
    overflow: hidden;
    color: var(--cg-text);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dashboard-metrics .metric-card strong.positive[b-iimqb542se] {
        color: var(--cg-success);
    }


/* ==========================================================================
   14. DASHBOARD BAR CHART
   ========================================================================== */

.dashboard-chart[b-iimqb542se] {
    padding-top: 2px;
}

.chart-title[b-iimqb542se] {
    margin-bottom: 17px;
    color: var(--cg-text-soft);
    font-size: 0.79rem;
    font-weight: 750;
}

.bars[b-iimqb542se] {
    display: flex;
    align-items: flex-end;
    gap: 11px;
    height: 132px;
    padding: 8px 4px 0;
    border-bottom: 1px solid var(--cg-border);
}

.bar[b-iimqb542se] {
    position: relative;
    flex: 1;
    min-width: 12px;
    border-radius: 9px 9px 2px 2px;
    background: linear-gradient( 180deg, #8b7dff 0%, #5b52f6 52%, #4338ca 100% );
    box-shadow: 0 6px 12px rgba(91, 82, 246, 0.15);
    transform-origin: bottom;
    transition: transform 260ms ease, filter 260ms ease, box-shadow 260ms ease;
}

.dashboard-chart:hover .bar[b-iimqb542se] {
    filter: saturate(1.08);
    transform: scaleY(1.035);
    box-shadow: 0 9px 18px rgba(91, 82, 246, 0.21);
}

.bar:nth-child(2)[b-iimqb542se],
.bar:nth-child(4)[b-iimqb542se],
.bar:nth-child(6)[b-iimqb542se] {
    background: linear-gradient( 180deg, #4cc9ff 0%, #2563eb 100% );
}

.h95[b-iimqb542se] {
    height: 95%;
}

.h90[b-iimqb542se] {
    height: 90%;
}

.h82[b-iimqb542se] {
    height: 82%;
}

.h74[b-iimqb542se] {
    height: 74%;
}

.h70[b-iimqb542se] {
    height: 70%;
}

.h55[b-iimqb542se] {
    height: 55%;
}


/* ==========================================================================
   15. PREVIEW FOOTER
   ========================================================================== */

.preview-footer[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 28px;
    border-top: 1px solid var(--cg-border);
    background: var(--cg-surface-soft);
    color: var(--cg-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

    .preview-footer > span[b-iimqb542se] {
        min-width: 0;
    }

.preview-link[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--cg-primary);
    font-weight: 800;
    white-space: nowrap;
    transition: color 160ms ease, transform 160ms ease;
}

    .preview-link:hover[b-iimqb542se] {
        transform: translateX(3px);
        color: var(--cg-primary-dark);
    }


/* ==========================================================================
   16. HERO RESPONSIVE — LARGE TABLETS
   ========================================================================== */

@media (max-width: 1180px) {

    .hero-section[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 62px;
        width: min(100% - 56px, 980px);
        min-height: 0;
        padding: 76px 0 105px;
    }

    .hero-content[b-iimqb542se] {
        max-width: 850px;
    }

        .hero-content h1[b-iimqb542se] {
            max-width: 800px;
        }

    .hero-description[b-iimqb542se] {
        max-width: 760px;
    }

    .hero-visual[b-iimqb542se] {
        width: 100%;
        max-width: 760px;
    }

    .product-preview[b-iimqb542se] {
        transform: none;
    }

        .product-preview:hover[b-iimqb542se] {
            transform: translateY(-7px);
        }
}


/* ==========================================================================
   17. HERO RESPONSIVE — TABLETS
   ========================================================================== */

@media (max-width: 768px) {

    .hero-section[b-iimqb542se] {
        width: min(100% - 36px, 700px);
        gap: 48px;
        padding: 58px 0 82px;
    }

    .hero-content h1[b-iimqb542se] {
        font-size: clamp(2.85rem, 11vw, 4rem);
        line-height: 1;
    }

    .hero-description[b-iimqb542se] {
        margin-top: 25px;
        font-size: 1.02rem;
        line-height: 1.7;
    }

    .hero-actions[b-iimqb542se] {
        align-items: stretch;
        flex-direction: column;
        margin-top: 29px;
    }

    .primary-hero-button[b-iimqb542se],
    .secondary-hero-button[b-iimqb542se] {
        width: 100%;
    }

    .hero-trust-row[b-iimqb542se] {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 17px;
        margin-top: 34px;
    }

    .trust-divider[b-iimqb542se] {
        height: 34px;
    }

    .preview-header[b-iimqb542se],
    .dashboard-list[b-iimqb542se],
    .preview-footer[b-iimqb542se] {
        padding-left: 22px;
        padding-right: 22px;
    }

    .preview-footer[b-iimqb542se] {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
}


/* ==========================================================================
   18. HERO RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 520px) {

    .hero-section[b-iimqb542se] {
        width: min(100% - 28px, 480px);
        padding: 44px 0 68px;
    }

    .hero-badge[b-iimqb542se] {
        max-width: 100%;
        margin-bottom: 21px;
        padding: 8px 12px;
        font-size: 0.61rem;
        letter-spacing: 0.065em;
    }

    .hero-content h1[b-iimqb542se] {
        font-size: clamp(2.5rem, 12.5vw, 3.25rem);
        letter-spacing: -0.052em;
    }

    .hero-description[b-iimqb542se] {
        font-size: 0.96rem;
    }

    .hero-trust-row[b-iimqb542se] {
        flex-direction: column;
    }

    .trust-divider[b-iimqb542se] {
        display: none;
    }

    .product-preview[b-iimqb542se] {
        border-radius: 21px;
    }

    .preview-header[b-iimqb542se] {
        padding-top: 22px;
        padding-bottom: 19px;
    }

        .preview-header h2[b-iimqb542se] {
            font-size: 1.18rem;
        }

    .preview-status[b-iimqb542se] {
        display: none;
    }

    .dashboard-list[b-iimqb542se] {
        padding-top: 21px;
        padding-bottom: 23px;
    }

    .score-header strong[b-iimqb542se] {
        font-size: 2.35rem;
    }

    .dashboard-metrics[b-iimqb542se] {
        grid-template-columns: 1fr;
    }

        .dashboard-metrics .metric-card strong[b-iimqb542se] {
            white-space: normal;
        }

    .bars[b-iimqb542se] {
        gap: 7px;
        height: 112px;
    }

    .preview-footer[b-iimqb542se] {
        font-size: 0.66rem;
    }
}
/* ==========================================================================
   CareerGPS Home Page
   PART 2 — Shared Sections, Statistics, Features and How It Works
   ========================================================================== */


/* ==========================================================================
   19. SHARED SECTION LAYOUT
   ========================================================================== */

.home-section[b-iimqb542se],
.features-section[b-iimqb542se],
.how-section[b-iimqb542se],
.stats-section[b-iimqb542se] {
    position: relative;
    width: 100%;
    padding: 112px 0;
}

.section-container[b-iimqb542se],
.features-container[b-iimqb542se],
.how-container[b-iimqb542se],
.stats-container[b-iimqb542se] {
    width: min(100% - 64px, 1320px);
    margin: 0 auto;
}

.section-heading[b-iimqb542se] {
    max-width: 760px;
    margin: 0 auto 62px;
    text-align: center;
}

    .section-heading.text-start[b-iimqb542se] {
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }

.section-badge[b-iimqb542se],
.features-badge[b-iimqb542se],
.how-badge[b-iimqb542se],
.stats-badge[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border: 1px solid rgba(91, 82, 246, 0.16);
    border-radius: 999px;
    background: rgba(91, 82, 246, 0.075);
    color: var(--cg-primary-dark);
    font-size: 0.69rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.section-heading h2[b-iimqb542se] {
    margin: 0;
    color: var(--cg-text);
    font-size: clamp(2.45rem, 4vw, 3.65rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.052em;
}

    .section-heading h2 span[b-iimqb542se] {
        background: linear-gradient( 120deg, #2563eb 0%, #5b52f6 52%, #8b5cf6 100% );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

.section-heading p[b-iimqb542se] {
    max-width: 680px;
    margin: 22px auto 0;
    color: var(--cg-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.section-heading.text-start p[b-iimqb542se] {
    margin-right: 0;
    margin-left: 0;
}


/* ==========================================================================
   20. STATISTICS SECTION
   ========================================================================== */

.stats-section[b-iimqb542se] {
    padding-top: 30px;
    padding-bottom: 80px;
    background: linear-gradient( 180deg, #f8faff 0%, #ffffff 100% );
}

.stats-grid[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.stat-card[b-iimqb542se] {
    position: relative;
    min-width: 0;
    padding: 31px 27px;
    overflow: hidden;
    border: 1px solid var(--cg-border-soft);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 0.92) 100% );
    box-shadow: var(--cg-shadow-sm);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

    .stat-card[b-iimqb542se]::before {
        position: absolute;
        content: "";
        top: -52px;
        right: -52px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(91, 82, 246, 0.07);
        transition: transform 280ms ease, background-color 280ms ease;
    }

    .stat-card:hover[b-iimqb542se] {
        transform: translateY(-7px);
        border-color: rgba(91, 82, 246, 0.22);
        box-shadow: 0 24px 52px rgba(15, 23, 42, 0.10);
    }

        .stat-card:hover[b-iimqb542se]::before {
            transform: scale(1.18);
            background: rgba(91, 82, 246, 0.11);
        }

.stat-icon[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border: 1px solid rgba(91, 82, 246, 0.12);
    border-radius: 14px;
    background: rgba(91, 82, 246, 0.08);
    color: var(--cg-primary);
    font-size: 1.18rem;
}

.stat-number[b-iimqb542se],
.stat-value[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: var(--cg-text);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.stat-label[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--cg-muted);
    font-size: 0.91rem;
    font-weight: 650;
    line-height: 1.5;
}

.stat-detail[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 5px;
    color: var(--cg-muted-light);
    font-size: 0.75rem;
    line-height: 1.4;
}


/* ==========================================================================
   21. FEATURES SECTION
   ========================================================================== */

.features-section[b-iimqb542se] {
    overflow: hidden;
    background: radial-gradient( circle at 8% 20%, rgba(91, 82, 246, 0.065), transparent 30% ), radial-gradient( circle at 92% 75%, rgba(0, 168, 255, 0.055), transparent 28% ), #ffffff;
}

    .features-section[b-iimqb542se]::before {
        position: absolute;
        content: "";
        top: 130px;
        left: 50%;
        width: min(94%, 1180px);
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(91, 82, 246, 0.12), transparent );
        transform: translateX(-50%);
    }

.features-grid[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.feature-card[b-iimqb542se] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 33px 31px 31px;
    overflow: hidden;
    border: 1px solid var(--cg-border-soft);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.055);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

    .feature-card[b-iimqb542se]::after {
        position: absolute;
        content: "";
        right: -84px;
        bottom: -84px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(91, 82, 246, 0.09) 0%, rgba(91, 82, 246, 0) 70% );
        opacity: 0;
        transition: opacity 220ms ease, transform 280ms ease;
    }

    .feature-card:hover[b-iimqb542se] {
        transform: translateY(-9px);
        border-color: rgba(91, 82, 246, 0.24);
        background: #ffffff;
        box-shadow: 0 28px 64px rgba(15, 23, 42, 0.11);
    }

        .feature-card:hover[b-iimqb542se]::after {
            opacity: 1;
            transform: scale(1.15);
        }

.feature-icon[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    border: 1px solid rgba(91, 82, 246, 0.14);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(91, 82, 246, 0.12), rgba(91, 82, 246, 0.055) );
    color: var(--cg-primary);
    font-size: 1.42rem;
    box-shadow: 0 12px 24px rgba(91, 82, 246, 0.10);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover .feature-icon[b-iimqb542se] {
    transform: translateY(-3px) rotate(-3deg);
    box-shadow: 0 18px 30px rgba(91, 82, 246, 0.16);
}

.feature-card:nth-child(2) .feature-icon[b-iimqb542se],
.feature-card:nth-child(5) .feature-icon[b-iimqb542se] {
    border-color: rgba(0, 168, 255, 0.16);
    background: linear-gradient( 145deg, rgba(0, 168, 255, 0.13), rgba(0, 168, 255, 0.055) );
    color: #0284c7;
    box-shadow: 0 12px 24px rgba(0, 168, 255, 0.10);
}

.feature-card:nth-child(3) .feature-icon[b-iimqb542se],
.feature-card:nth-child(6) .feature-icon[b-iimqb542se] {
    border-color: rgba(139, 92, 246, 0.16);
    background: linear-gradient( 145deg, rgba(139, 92, 246, 0.13), rgba(139, 92, 246, 0.055) );
    color: #7c3aed;
    box-shadow: 0 12px 24px rgba(139, 92, 246, 0.10);
}

.feature-card h3[b-iimqb542se] {
    position: relative;
    z-index: 1;
    margin: 0 0 13px;
    color: var(--cg-text);
    font-size: 1.25rem;
    font-weight: 820;
    line-height: 1.3;
    letter-spacing: -0.027em;
}

.feature-card p[b-iimqb542se] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--cg-muted);
    font-size: 0.93rem;
    line-height: 1.72;
}

.feature-card-link[b-iimqb542se] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 24px;
    color: var(--cg-primary);
    font-size: 0.84rem;
    font-weight: 800;
    transition: gap 180ms ease, color 180ms ease;
}

    .feature-card-link:hover[b-iimqb542se] {
        gap: 12px;
        color: var(--cg-primary-dark);
    }

    .feature-card-link i[b-iimqb542se],
    .feature-card-link span[b-iimqb542se] {
        transition: transform 180ms ease;
    }

    .feature-card-link:hover i[b-iimqb542se],
    .feature-card-link:hover span[b-iimqb542se] {
        transform: translateX(3px);
    }


/* ==========================================================================
   22. FEATURE CARD ACCENTS
   ========================================================================== */

.feature-number[b-iimqb542se] {
    position: absolute;
    top: 27px;
    right: 28px;
    color: rgba(15, 23, 42, 0.06);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    pointer-events: none;
}

.feature-pill[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 20px;
    padding: 6px 10px;
    border: 1px solid rgba(91, 82, 246, 0.12);
    border-radius: 999px;
    background: rgba(91, 82, 246, 0.06);
    color: var(--cg-primary-dark);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

/* ==========================================================================
   FEATURES — FINAL POLISH
   ========================================================================== */

.feature-card[b-iimqb542se] {
    border-color: #e2e8f0;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.065), 0 2px 6px rgba(15, 23, 42, 0.025);
}

.feature-number[b-iimqb542se] {
    color: rgba(15, 23, 42, 0.075);
}

.feature-card h3[b-iimqb542se] {
    color: #14213d;
}

.feature-card p[b-iimqb542se] {
    color: #5f6f84;
}

.feature-pill[b-iimqb542se] {
    border-color: rgba(37, 99, 235, 0.16);
    background: #f2f6ff;
    color: #2563eb;
}

.feature-card-link[b-iimqb542se] {
    color: #1769ff;
}

.feature-card:hover[b-iimqb542se] {
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.11), 0 4px 12px rgba(37, 99, 235, 0.05);
}




/* ==========================================================================
   HOW CAREERGPS WORKS — 2026 POLISH
   ========================================================================== */

.how-section[b-iimqb542se] {
    position: relative;
    margin-top: 0;
    padding: 7rem 0 7.5rem;
    overflow: hidden;
    border-top: 1px solid #dce6f5;
    border-bottom: 1px solid #dce6f5;
    background: radial-gradient( circle at 18% 10%, rgba(37, 99, 235, 0.10), transparent 30% ), radial-gradient( circle at 85% 85%, rgba(124, 58, 237, 0.08), transparent 30% ), linear-gradient( 180deg, #edf4ff 0%, #f5f2ff 52%, #eef6ff 100% );
}


.how-container[b-iimqb542se] {
    width: min(100% - 48px, 1180px);
    margin: 0 auto;
}


/* ==========================================================================
   STEPS
   ========================================================================== */

.steps-grid[b-iimqb542se] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 3.5rem;
}


    .steps-grid[b-iimqb542se]::before {
        content: "";
        position: absolute;
        top: 43px;
        left: 16%;
        right: 16%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #cbdcf9 15%, #cbdcf9 85%, transparent );
        z-index: 0;
    }


.step-card[b-iimqb542se] {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 1.8rem;
    border: 1px solid #e3eaf3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.055);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}


    .step-card:hover[b-iimqb542se] {
        transform: translateY(-5px);
        border-color: rgba(37, 99, 235, 0.22);
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.09);
    }


.step-top[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}


.step-number[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #1769ff;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 850;
    box-shadow: 0 0 0 1px #dce8fb, 0 7px 18px rgba(37, 99, 235, 0.22);
}


.step-icon[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf5ff;
    color: #1769ff;
    font-size: 1rem;
}


.step-label[b-iimqb542se] {
    display: block;
    margin-bottom: 0.55rem;
    color: #1769ff;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.step-card h3[b-iimqb542se] {
    margin: 0 0 0.75rem;
    color: #14213d;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}


.step-card p[b-iimqb542se] {
    margin: 0;
    color: #65758a;
    font-size: 0.84rem;
    line-height: 1.7;
}


/* ==========================================================================
   SUPPORT PANEL
   ========================================================================== */

.how-support-panel[b-iimqb542se] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.35rem;
    margin-top: 1.5rem;
    padding: 1.65rem 1.8rem;
    border: 1px solid #dfe8f3;
    border-radius: 20px;
    background: linear-gradient( 135deg, #f7faff, #eef5ff );
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}


.how-support-icon[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #1769ff;
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.23);
}


.how-support-content[b-iimqb542se] {
    min-width: 0;
}


.how-support-eyebrow[b-iimqb542se] {
    display: block;
    margin-bottom: 0.35rem;
    color: #1769ff;
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.how-support-content h3[b-iimqb542se] {
    margin: 0 0 0.35rem;
    color: #14213d;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}


.how-support-content p[b-iimqb542se] {
    max-width: 700px;
    margin: 0;
    color: #66768b;
    font-size: 0.78rem;
    line-height: 1.6;
}


.how-support-actions[b-iimqb542se] {
    flex: 0 0 auto;
}


.how-support-button[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 1.15rem;
    border-radius: 11px;
    background: #1769ff;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease;
}


    .how-support-button:hover[b-iimqb542se] {
        transform: translateY(-2px);
        color: #ffffff;
        box-shadow: 0 13px 28px rgba(37, 99, 235, 0.3);
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .steps-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
    }


        .steps-grid[b-iimqb542se]::before {
            display: none;
        }


    .how-support-panel[b-iimqb542se] {
        grid-template-columns: auto minmax(0, 1fr);
    }


    .how-support-actions[b-iimqb542se] {
        grid-column: 2;
    }
}


@media (max-width: 575.98px) {

    .how-section[b-iimqb542se] {
        padding: 4.5rem 0;
    }


    .how-container[b-iimqb542se] {
        width: calc(100% - 28px);
    }


    .steps-grid[b-iimqb542se] {
        margin-top: 2.5rem;
    }


    .step-card[b-iimqb542se] {
        padding: 1.5rem;
    }


    .how-support-panel[b-iimqb542se] {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }


    .how-support-actions[b-iimqb542se] {
        grid-column: auto;
    }


    .how-support-button[b-iimqb542se] {
        width: 100%;
    }
}


/* ==========================================================================
   25. SHARED SECTION DIVIDERS
   ========================================================================== */

.section-divider[b-iimqb542se] {
    width: min(100% - 64px, 1320px);
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: linear-gradient( 90deg, transparent, var(--cg-border), transparent );
}

.section-top-line[b-iimqb542se] {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100% - 64px, 1320px);
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(148, 163, 184, 0.26), transparent );
    transform: translateX(-50%);
}


/* ==========================================================================
   26. PART 2 RESPONSIVE — DESKTOP AND TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .stats-grid[b-iimqb542se] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features-grid[b-iimqb542se] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .how-support-panel[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .how-support-actions[b-iimqb542se] {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   27. PART 2 RESPONSIVE — TABLETS
   ========================================================================== */

@media (max-width: 820px) {

    .home-section[b-iimqb542se],
    .features-section[b-iimqb542se],
    .how-section[b-iimqb542se],
    .stats-section[b-iimqb542se] {
        padding: 86px 0;
    }

    .section-container[b-iimqb542se],
    .features-container[b-iimqb542se],
    .how-container[b-iimqb542se],
    .stats-container[b-iimqb542se] {
        width: min(100% - 40px, 740px);
    }

    .section-heading[b-iimqb542se] {
        margin-bottom: 48px;
    }

        .section-heading h2[b-iimqb542se] {
            font-size: clamp(2.15rem, 7vw, 3rem);
        }

        .section-heading p[b-iimqb542se] {
            font-size: 1rem;
        }

    .how-grid[b-iimqb542se],
    .steps-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 47px;
    }

        .how-grid[b-iimqb542se]::before,
        .steps-grid[b-iimqb542se]::before {
            display: none;
        }

    .how-card[b-iimqb542se],
    .step-card[b-iimqb542se] {
        max-width: 560px;
        margin: 0 auto;
        padding: 0;
    }

    .how-support-panel[b-iimqb542se] {
        margin-top: 60px;
        padding: 37px 34px;
    }
}


/* ==========================================================================
   28. PART 2 RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .home-section[b-iimqb542se],
    .features-section[b-iimqb542se],
    .how-section[b-iimqb542se] {
        padding: 72px 0;
    }

    .stats-section[b-iimqb542se] {
        padding: 26px 0 66px;
    }

    .section-container[b-iimqb542se],
    .features-container[b-iimqb542se],
    .how-container[b-iimqb542se],
    .stats-container[b-iimqb542se] {
        width: min(100% - 28px, 540px);
    }

    .section-heading[b-iimqb542se] {
        margin-bottom: 40px;
    }

    .section-badge[b-iimqb542se],
    .features-badge[b-iimqb542se],
    .how-badge[b-iimqb542se],
    .stats-badge[b-iimqb542se] {
        font-size: 0.62rem;
        letter-spacing: 0.075em;
    }

    .section-heading h2[b-iimqb542se] {
        font-size: clamp(2rem, 10vw, 2.65rem);
        line-height: 1.08;
    }

    .section-heading p[b-iimqb542se] {
        margin-top: 17px;
        font-size: 0.94rem;
        line-height: 1.68;
    }

    .stats-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .stat-card[b-iimqb542se] {
        padding: 25px 23px;
    }

    .features-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .feature-card[b-iimqb542se] {
        padding: 28px 25px 26px;
        border-radius: 21px;
    }

    .feature-icon[b-iimqb542se] {
        width: 53px;
        height: 53px;
        margin-bottom: 21px;
        border-radius: 16px;
    }

    .how-step-number[b-iimqb542se],
    .step-number[b-iimqb542se] {
        width: 69px;
        height: 69px;
        margin-bottom: 23px;
    }

    .how-support-panel[b-iimqb542se] {
        margin-top: 52px;
        padding: 29px 24px;
        border-radius: 22px;
    }

    .how-support-actions[b-iimqb542se] {
        align-items: stretch;
        flex-direction: column;
    }

    .how-support-button[b-iimqb542se] {
        width: 100%;
    }

    .section-divider[b-iimqb542se],
    .section-top-line[b-iimqb542se] {
        width: min(100% - 28px, 540px);
    }
}
/* ==========================================================================
   CareerGPS Home Page
   PART 3 — Career Pro, Trusted Data, Final CTA, Animations and Cleanup
   ========================================================================== */


/* ==========================================================================
   29. CAREER PRO SECTION
   ========================================================================== */

.career-pro-section[b-iimqb542se],
.pro-section[b-iimqb542se],
.career-pro-teaser-section[b-iimqb542se] {
    position: relative;
    width: 100%;
    padding: 112px 0;
    overflow: hidden;
    background: radial-gradient( circle at 12% 18%, rgba(91, 82, 246, 0.08), transparent 32% ), radial-gradient( circle at 88% 78%, rgba(0, 168, 255, 0.07), transparent 30% ), linear-gradient( 180deg, #ffffff 0%, #f8faff 100% );
}

.career-pro-container[b-iimqb542se],
.pro-container[b-iimqb542se],
.career-pro-teaser-container[b-iimqb542se] {
    width: min(100% - 64px, 1320px);
    margin: 0 auto;
}

.career-pro-card[b-iimqb542se],
.pro-card[b-iimqb542se],
.career-pro-teaser[b-iimqb542se] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    align-items: center;
    gap: clamp(48px, 6vw, 84px);
    min-height: 540px;
    padding: 64px;
    overflow: hidden;
    border: 1px solid rgba(91, 82, 246, 0.18);
    border-radius: 32px;
    background: radial-gradient( circle at 82% 18%, rgba(139, 125, 255, 0.27), transparent 29% ), radial-gradient( circle at 18% 85%, rgba(0, 168, 255, 0.12), transparent 32% ), linear-gradient( 135deg, #111827 0%, #171a35 42%, #27235d 100% );
    box-shadow: 0 38px 90px rgba(15, 23, 42, 0.19);
    isolation: isolate;
}

    .career-pro-card[b-iimqb542se]::before,
    .pro-card[b-iimqb542se]::before,
    .career-pro-teaser[b-iimqb542se]::before {
        position: absolute;
        z-index: -1;
        content: "";
        inset: 0;
        background-image: linear-gradient( rgba(255, 255, 255, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px );
        background-size: 42px 42px;
        mask-image: linear-gradient( to right, rgba(0, 0, 0, 0.78), transparent 90% );
        -webkit-mask-image: linear-gradient( to right, rgba(0, 0, 0, 0.78), transparent 90% );
    }

    .career-pro-card[b-iimqb542se]::after,
    .pro-card[b-iimqb542se]::after,
    .career-pro-teaser[b-iimqb542se]::after {
        position: absolute;
        z-index: -1;
        content: "";
        top: -170px;
        right: -120px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(139, 125, 255, 0.28), rgba(139, 125, 255, 0) 70% );
    }


/* ==========================================================================
   30. CAREER PRO CONTENT
   ========================================================================== */

.career-pro-content[b-iimqb542se],
.pro-content[b-iimqb542se],
.career-pro-copy[b-iimqb542se] {
    min-width: 0;
}

.pro-badge[b-iimqb542se],
.career-pro-badge[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #c4bfff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.67rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

    .pro-badge i[b-iimqb542se],
    .career-pro-badge i[b-iimqb542se] {
        color: #facc15;
    }

.career-pro-content h2[b-iimqb542se],
.pro-content h2[b-iimqb542se],
.career-pro-copy h2[b-iimqb542se] {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.65rem, 4.5vw, 4.25rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

    .career-pro-content h2 span[b-iimqb542se],
    .pro-content h2 span[b-iimqb542se],
    .career-pro-copy h2 span[b-iimqb542se] {
        background: linear-gradient( 110deg, #c4bfff 0%, #8fc9ff 55%, #ffffff 100% );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

.career-pro-description[b-iimqb542se],
.pro-description[b-iimqb542se] {
    max-width: 650px;
    margin: 24px 0 0;
    color: rgba(226, 232, 240, 0.76);
    font-size: 1.03rem;
    line-height: 1.76;
}


/* ==========================================================================
   31. CAREER PRO FEATURE LIST
   ========================================================================== */

.pro-feature-list[b-iimqb542se],
.career-pro-features[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 22px;
    margin: 31px 0 0;
    padding: 0;
    list-style: none;
}

.pro-feature-item[b-iimqb542se],
.career-pro-feature[b-iimqb542se] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    color: rgba(241, 245, 249, 0.90);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.5;
}

    .pro-feature-item i[b-iimqb542se],
    .career-pro-feature i[b-iimqb542se],
    .pro-check[b-iimqb542se] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 23px;
        height: 23px;
        margin-top: 1px;
        border: 1px solid rgba(74, 222, 128, 0.18);
        border-radius: 50%;
        background: rgba(74, 222, 128, 0.13);
        color: #86efac;
        font-size: 0.72rem;
    }


/* ==========================================================================
   32. CAREER PRO ACTIONS
   ========================================================================== */

.pro-actions[b-iimqb542se],
.career-pro-actions[b-iimqb542se] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.pro-primary-button[b-iimqb542se],
.career-pro-button[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: linear-gradient( 135deg, #7c6fff 0%, #5b52f6 55%, #3b82f6 100% );
    color: #ffffff;
    font-size: 0.89rem;
    font-weight: 800;
    box-shadow: 0 17px 36px rgba(91, 82, 246, 0.37);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

    .pro-primary-button:hover[b-iimqb542se],
    .career-pro-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        color: #ffffff;
        filter: brightness(1.06);
        box-shadow: 0 23px 45px rgba(91, 82, 246, 0.46);
    }

.pro-secondary-button[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.89rem;
    font-weight: 750;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

    .pro-secondary-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.11);
        color: #ffffff;
    }


/* ==========================================================================
   33. CAREER PRO VISUAL
   ========================================================================== */

.career-pro-visual[b-iimqb542se],
.pro-visual[b-iimqb542se] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 410px;
}

.pro-dashboard[b-iimqb542se],
.pro-preview-card[b-iimqb542se] {
    position: relative;
    width: min(100%, 500px);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.26);
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
    transition: transform 300ms ease, box-shadow 300ms ease;
}

    .pro-dashboard:hover[b-iimqb542se],
    .pro-preview-card:hover[b-iimqb542se] {
        transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-7px);
        box-shadow: 0 38px 78px rgba(0, 0, 0, 0.32);
    }

.pro-dashboard-header[b-iimqb542se] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.pro-dashboard-title[b-iimqb542se] {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
}

.pro-dashboard-pill[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(134, 239, 172, 0.13);
    color: #86efac;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}

.pro-preview-grid[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.pro-preview-metric[b-iimqb542se] {
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.22);
}

    .pro-preview-metric span[b-iimqb542se] {
        display: block;
        margin-bottom: 7px;
        color: rgba(226, 232, 240, 0.55);
        font-size: 0.61rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .pro-preview-metric strong[b-iimqb542se] {
        display: block;
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 820;
        line-height: 1.25;
    }

.pro-preview-chart[b-iimqb542se] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 130px;
    margin-top: 16px;
    padding: 15px 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 17px;
    background: rgba(15, 23, 42, 0.22);
}

.pro-preview-bar[b-iimqb542se] {
    flex: 1;
    min-width: 10px;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient( 180deg, #8fc9ff 0%, #7c6fff 55%, #5b52f6 100% );
    box-shadow: 0 7px 14px rgba(91, 82, 246, 0.22);
}


/* ==========================================================================
   34. TRUSTED DATA SECTION
   ========================================================================== */

.trusted-data-section[b-iimqb542se],
.data-sources-section[b-iimqb542se],
.trusted-section[b-iimqb542se] {
    position: relative;
    width: 100%;
    padding: 104px 0;
    background: #ffffff;
}

.trusted-data-container[b-iimqb542se],
.data-sources-container[b-iimqb542se],
.trusted-container[b-iimqb542se] {
    width: min(100% - 64px, 1320px);
    margin: 0 auto;
}

.data-sources-grid[b-iimqb542se],
.trusted-logos-grid[b-iimqb542se],
.trusted-data-grid[b-iimqb542se] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.data-source-card[b-iimqb542se],
.trusted-logo-card[b-iimqb542se],
.trusted-data-card[b-iimqb542se] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    min-height: 122px;
    padding: 24px;
    border: 1px solid var(--cg-border-soft);
    border-radius: 21px;
    background: linear-gradient( 145deg, #ffffff 0%, #f8fafc 100% );
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

    .data-source-card:hover[b-iimqb542se],
    .trusted-logo-card:hover[b-iimqb542se],
    .trusted-data-card:hover[b-iimqb542se] {
        transform: translateY(-6px);
        border-color: rgba(91, 82, 246, 0.21);
        box-shadow: 0 22px 46px rgba(15, 23, 42, 0.09);
    }

.data-source-icon[b-iimqb542se],
.trusted-logo-icon[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(91, 82, 246, 0.12);
    border-radius: 15px;
    background: rgba(91, 82, 246, 0.075);
    color: var(--cg-primary);
    font-size: 1.28rem;
}

.data-source-content[b-iimqb542se],
.trusted-logo-content[b-iimqb542se] {
    min-width: 0;
}

.data-source-card strong[b-iimqb542se],
.trusted-logo-card strong[b-iimqb542se],
.trusted-data-card strong[b-iimqb542se] {
    display: block;
    margin-bottom: 5px;
    color: var(--cg-text);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.35;
}

.data-source-card span[b-iimqb542se],
.trusted-logo-card span[b-iimqb542se],
.trusted-data-card span[b-iimqb542se] {
    display: block;
    color: var(--cg-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.trusted-data-note[b-iimqb542se] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    max-width: 980px;
    margin: 28px auto 0;
    padding: 15px 18px;
    border: 1px solid rgba(91, 82, 246, 0.10);
    border-radius: 14px;
    background: rgba(248, 250, 255, 0.9);
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.55;
    text-align: left;
}

    .trusted-data-note > i[b-iimqb542se] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(91, 82, 246, 0.08);
        color: #5b52f6;
        font-size: 0.95rem;
    }

    .trusted-data-note span[b-iimqb542se] {
        min-width: 0;
    }

    .trusted-data-note a[b-iimqb542se] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        color: #5b52f6;
        font-size: 0.76rem;
        font-weight: 800;
        text-decoration: none;
        transition: color 180ms ease, transform 180ms ease;
    }

        .trusted-data-note a:hover[b-iimqb542se] {
            color: #4338ca;
            transform: translateX(2px);
        }

.data-source-note[b-iimqb542se] {
    max-width: 820px;
    margin: 35px auto 0;
    color: var(--cg-muted-light);
    font-size: 0.79rem;
    line-height: 1.65;
    text-align: center;
}


/* ==========================================================================
   35. FINAL CTA SECTION
   ========================================================================== */

.final-cta-section[b-iimqb542se],
.cta-section[b-iimqb542se],
.home-cta-section[b-iimqb542se] {
    position: relative;
    width: 100%;
    padding: 48px 0 116px;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #f7f9fd 100% );
}

.final-cta-container[b-iimqb542se],
.cta-container[b-iimqb542se] {
    width: min(100% - 64px, 1320px);
    margin: 0 auto;
}

.final-cta-card[b-iimqb542se],
.cta-card[b-iimqb542se] {
    position: relative;
    padding: 76px 64px;
    overflow: hidden;
    border: 1px solid rgba(91, 82, 246, 0.15);
    border-radius: 32px;
    background: radial-gradient( circle at 10% 20%, rgba(255, 255, 255, 0.10), transparent 26% ), radial-gradient( circle at 87% 82%, rgba(0, 168, 255, 0.20), transparent 34% ), linear-gradient( 135deg, #4f46e5 0%, #5b52f6 47%, #2563eb 100% );
    box-shadow: 0 35px 80px rgba(79, 70, 229, 0.24);
    text-align: center;
    isolation: isolate;
}

    .final-cta-card[b-iimqb542se]::before,
    .cta-card[b-iimqb542se]::before {
        position: absolute;
        z-index: -1;
        content: "";
        inset: 0;
        background-image: linear-gradient( rgba(255, 255, 255, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px );
        background-size: 40px 40px;
        mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), transparent 90% );
        -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), transparent 90% );
    }

    .final-cta-card[b-iimqb542se]::after,
    .cta-card[b-iimqb542se]::after {
        position: absolute;
        z-index: -1;
        content: "";
        top: -190px;
        right: -110px;
        width: 470px;
        height: 470px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

.final-cta-badge[b-iimqb542se],
.cta-badge[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.final-cta-card h2[b-iimqb542se],
.cta-card h2[b-iimqb542se] {
    max-width: 830px;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(2.6rem, 4.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.final-cta-card p[b-iimqb542se],
.cta-card p[b-iimqb542se] {
    max-width: 690px;
    margin: 22px auto 0;
    color: rgba(239, 246, 255, 0.82);
    font-size: 1.03rem;
    line-height: 1.72;
}

.final-cta-actions[b-iimqb542se],
.cta-actions[b-iimqb542se] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

.final-cta-button[b-iimqb542se],
.cta-primary-button[b-iimqb542se] {
    border: 1px solid rgba(255, 255, 255, 0.70);
    background: #ffffff;
    color: var(--cg-primary-dark);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

    .final-cta-button:hover[b-iimqb542se],
    .cta-primary-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        border-color: #ffffff;
        background: #f8fafc;
        color: #3730a3;
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.24);
    }

.cta-secondary-button[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 27px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.93rem;
    font-weight: 750;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

    .cta-secondary-button:hover[b-iimqb542se] {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.40);
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }

.final-cta-footnote[b-iimqb542se],
.cta-footnote[b-iimqb542se] {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.73rem;
    line-height: 1.5;
}


/* ==========================================================================
   36. SHARED HOVER AND FOCUS STATES
   ========================================================================== */

.home-page a:focus-visible[b-iimqb542se],
.home-page button:focus-visible[b-iimqb542se] {
    outline: 3px solid rgba(91, 82, 246, 0.30);
    outline-offset: 4px;
}

.home-page .primary-hero-button:focus-visible[b-iimqb542se],
.home-page .pro-primary-button:focus-visible[b-iimqb542se],
.home-page .career-pro-button:focus-visible[b-iimqb542se],
.home-page .final-cta-button:focus-visible[b-iimqb542se],
.home-page .cta-primary-button:focus-visible[b-iimqb542se] {
    outline-color: rgba(255, 255, 255, 0.70);
}


/* ==========================================================================
   37. ANIMATIONS
   ========================================================================== */

@keyframes cgFloat-b-iimqb542se {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes cgPulse-b-iimqb542se {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.68;
        transform: scale(0.94);
    }
}

@keyframes cgGlow-b-iimqb542se {
    0%, 100% {
        opacity: 0.26;
        transform: scale(1);
    }

    50% {
        opacity: 0.42;
        transform: scale(1.08);
    }
}

@keyframes cgFadeUp-b-iimqb542se {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge-dot[b-iimqb542se],
.preview-status[b-iimqb542se]::before {
    animation: cgPulse-b-iimqb542se 2.4s ease-in-out infinite;
}

.visual-glow-one[b-iimqb542se],
.visual-glow-two[b-iimqb542se] {
    animation: cgGlow-b-iimqb542se 7s ease-in-out infinite;
}

.visual-glow-two[b-iimqb542se] {
    animation-delay: -3.5s;
}

.pro-dashboard[b-iimqb542se],
.pro-preview-card[b-iimqb542se] {
    animation: cgFloat-b-iimqb542se 6s ease-in-out infinite;
}

.feature-card[b-iimqb542se],
.stat-card[b-iimqb542se],
.data-source-card[b-iimqb542se],
.trusted-logo-card[b-iimqb542se],
.trusted-data-card[b-iimqb542se] {
    animation: cgFadeUp-b-iimqb542se 520ms ease both;
}


/* ==========================================================================
   38. MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .home-page *[b-iimqb542se],
    .home-page *[b-iimqb542se]::before,
    .home-page *[b-iimqb542se]::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .product-preview[b-iimqb542se],
    .pro-dashboard[b-iimqb542se],
    .pro-preview-card[b-iimqb542se] {
        transform: none !important;
    }
}


/* ==========================================================================
   39. RESPONSIVE — CAREER PRO AND TRUSTED DATA
   ========================================================================== */

@media (max-width: 1100px) {

    .career-pro-card[b-iimqb542se],
    .pro-card[b-iimqb542se],
    .career-pro-teaser[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 54px;
    }

    .career-pro-visual[b-iimqb542se],
    .pro-visual[b-iimqb542se] {
        min-height: 0;
    }

    .pro-dashboard[b-iimqb542se],
    .pro-preview-card[b-iimqb542se] {
        width: 100%;
        max-width: 650px;
        transform: none;
    }

        .pro-dashboard:hover[b-iimqb542se],
        .pro-preview-card:hover[b-iimqb542se] {
            transform: translateY(-7px);
        }

    .data-sources-grid[b-iimqb542se],
    .trusted-logos-grid[b-iimqb542se],
    .trusted-data-grid[b-iimqb542se] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   40. RESPONSIVE — TABLETS
   ========================================================================== */

@media (max-width: 820px) {

    .career-pro-section[b-iimqb542se],
    .pro-section[b-iimqb542se],
    .career-pro-teaser-section[b-iimqb542se],
    .trusted-data-section[b-iimqb542se],
    .data-sources-section[b-iimqb542se],
    .trusted-section[b-iimqb542se] {
        padding: 86px 0;
    }

    .career-pro-container[b-iimqb542se],
    .pro-container[b-iimqb542se],
    .career-pro-teaser-container[b-iimqb542se],
    .trusted-data-container[b-iimqb542se],
    .data-sources-container[b-iimqb542se],
    .trusted-container[b-iimqb542se],
    .final-cta-container[b-iimqb542se],
    .cta-container[b-iimqb542se] {
        width: min(100% - 40px, 740px);
    }

    .career-pro-card[b-iimqb542se],
    .pro-card[b-iimqb542se],
    .career-pro-teaser[b-iimqb542se] {
        padding: 44px 38px;
        border-radius: 27px;
    }

    .career-pro-content h2[b-iimqb542se],
    .pro-content h2[b-iimqb542se],
    .career-pro-copy h2[b-iimqb542se] {
        font-size: clamp(2.35rem, 8vw, 3.3rem);
    }

    .pro-feature-list[b-iimqb542se],
    .career-pro-features[b-iimqb542se] {
        grid-template-columns: 1fr;
    }

    .final-cta-section[b-iimqb542se],
    .cta-section[b-iimqb542se],
    .home-cta-section[b-iimqb542se] {
        padding-bottom: 92px;
    }

    .final-cta-card[b-iimqb542se],
    .cta-card[b-iimqb542se] {
        padding: 60px 42px;
        border-radius: 27px;
    }
}


/* ==========================================================================
   41. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .career-pro-section[b-iimqb542se],
    .pro-section[b-iimqb542se],
    .career-pro-teaser-section[b-iimqb542se],
    .trusted-data-section[b-iimqb542se],
    .data-sources-section[b-iimqb542se],
    .trusted-section[b-iimqb542se] {
        padding: 72px 0;
    }

    .career-pro-container[b-iimqb542se],
    .pro-container[b-iimqb542se],
    .career-pro-teaser-container[b-iimqb542se],
    .trusted-data-container[b-iimqb542se],
    .data-sources-container[b-iimqb542se],
    .trusted-container[b-iimqb542se],
    .final-cta-container[b-iimqb542se],
    .cta-container[b-iimqb542se] {
        width: min(100% - 28px, 540px);
    }

    .career-pro-card[b-iimqb542se],
    .pro-card[b-iimqb542se],
    .career-pro-teaser[b-iimqb542se] {
        gap: 38px;
        padding: 34px 24px;
        border-radius: 23px;
    }

    .career-pro-content h2[b-iimqb542se],
    .pro-content h2[b-iimqb542se],
    .career-pro-copy h2[b-iimqb542se] {
        font-size: clamp(2.15rem, 10vw, 2.8rem);
    }

    .career-pro-description[b-iimqb542se],
    .pro-description[b-iimqb542se] {
        font-size: 0.94rem;
    }

    .pro-actions[b-iimqb542se],
    .career-pro-actions[b-iimqb542se] {
        align-items: stretch;
        flex-direction: column;
    }

    .pro-primary-button[b-iimqb542se],
    .career-pro-button[b-iimqb542se],
    .pro-secondary-button[b-iimqb542se] {
        width: 100%;
    }

    .pro-preview-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
    }

    .pro-dashboard[b-iimqb542se],
    .pro-preview-card[b-iimqb542se] {
        padding: 18px;
        border-radius: 20px;
    }

    .data-sources-grid[b-iimqb542se],
    .trusted-logos-grid[b-iimqb542se],
    .trusted-data-grid[b-iimqb542se] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .data-source-card[b-iimqb542se],
    .trusted-logo-card[b-iimqb542se],
    .trusted-data-card[b-iimqb542se] {
        min-height: 105px;
        padding: 21px;
    }

    .final-cta-section[b-iimqb542se],
    .cta-section[b-iimqb542se],
    .home-cta-section[b-iimqb542se] {
        padding: 30px 0 72px;
    }

    .final-cta-card[b-iimqb542se],
    .cta-card[b-iimqb542se] {
        padding: 48px 24px;
        border-radius: 23px;
    }

        .final-cta-card h2[b-iimqb542se],
        .cta-card h2[b-iimqb542se] {
            font-size: clamp(2.15rem, 10vw, 2.85rem);
        }

        .final-cta-card p[b-iimqb542se],
        .cta-card p[b-iimqb542se] {
            font-size: 0.94rem;
        }

    .final-cta-actions[b-iimqb542se],
    .cta-actions[b-iimqb542se] {
        align-items: stretch;
        flex-direction: column;
    }

    .final-cta-button[b-iimqb542se],
    .cta-primary-button[b-iimqb542se],
    .cta-secondary-button[b-iimqb542se] {
        width: 100%;
    }
}


/* ==========================================================================
   42. EXTRA-SMALL MOBILE CLEANUP
   ========================================================================== */

@media (max-width: 420px) {

    .career-pro-card[b-iimqb542se],
    .pro-card[b-iimqb542se],
    .career-pro-teaser[b-iimqb542se] {
        padding-right: 20px;
        padding-left: 20px;
    }

    .pro-dashboard-header[b-iimqb542se] {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .data-source-card[b-iimqb542se],
    .trusted-logo-card[b-iimqb542se],
    .trusted-data-card[b-iimqb542se] {
        align-items: flex-start;
    }

    .data-source-icon[b-iimqb542se],
    .trusted-logo-icon[b-iimqb542se] {
        width: 46px;
        height: 46px;
    }

    .final-cta-card[b-iimqb542se],
    .cta-card[b-iimqb542se] {
        padding-right: 20px;
        padding-left: 20px;
    }
}


/* ==========================================================================
   43. PRINT CLEANUP
   ========================================================================== */

@media print {

    .hero-background[b-iimqb542se],
    .bg-circle[b-iimqb542se],
    .bg-grid[b-iimqb542se],
    .visual-glow[b-iimqb542se],
    .final-cta-section[b-iimqb542se],
    .cta-section[b-iimqb542se],
    .home-cta-section[b-iimqb542se] {
        display: none !important;
    }

    .hero-section[b-iimqb542se],
    .features-section[b-iimqb542se],
    .how-section[b-iimqb542se],
    .career-pro-section[b-iimqb542se],
    .trusted-data-section[b-iimqb542se] {
        padding: 30px 0;
    }

    .product-preview[b-iimqb542se],
    .feature-card[b-iimqb542se],
    .stat-card[b-iimqb542se],
    .career-pro-card[b-iimqb542se],
    .data-source-card[b-iimqb542se] {
        box-shadow: none !important;
        transform: none !important;
    }
}

/* =========================================================
   CAREERGPS CINEMATIC HOMEPAGE HERO
   ========================================================= */

.career-hero[b-iimqb542se] {
    position: relative;
    min-height: 650px;
    overflow: visible;
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient( 90deg, rgba(4, 20, 55, 0.97) 0%, rgba(5, 31, 78, 0.91) 42%, rgba(7, 48, 111, 0.67) 70%, rgba(8, 55, 130, 0.48) 100% ), url('/images/careergps-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .career-hero[b-iimqb542se]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 72% 42%, rgba(52, 124, 255, 0.20), transparent 34% );
    }

.career-hero-overlay[b-iimqb542se] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 14, 42, 0.08) 60%, rgba(0, 13, 38, 0.40) 100% );
}

.career-hero-container[b-iimqb542se] {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 76px;
    padding-bottom: 100px;
}

.career-hero-content[b-iimqb542se] {
    max-width: 760px;
}

/* EYEBROW */

.career-hero-eyebrow[b-iimqb542se] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #bcd5ff;
}

    .career-hero-eyebrow i[b-iimqb542se] {
        font-size: 1rem;
        color: #62a2ff;
    }

/* HEADLINE */

.career-hero-title[b-iimqb542se] {
    max-width: 720px;
    margin: 0 0 20px;
    font-size: clamp(3.25rem, 5vw, 5.1rem);
    line-height: 0.99;
    letter-spacing: -0.055em;
    font-weight: 850;
    color: #fff;
}

    .career-hero-title span[b-iimqb542se] {
        color: #3d8cff;
    }

/* DESCRIPTION */

.career-hero-description[b-iimqb542se] {
    max-width: 660px;
    margin-bottom: 30px;
    font-size: 1.25rem;
    line-height: 1.65;
    font-weight: 450;
    color: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   SEARCH
   ========================================================= */

.career-search-wrapper[b-iimqb542se] {
    position: relative;
    width: min(100%, 670px);
    z-index: 20;
}

.career-search-box[b-iimqb542se] {
    position: relative;
    display: flex;
    align-items: center;
    height: 82px;
    padding: 8px 9px 8px 25px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 17px;
    box-shadow: 0 22px 55px rgba(0, 16, 50, 0.28), 0 5px 15px rgba(0, 0, 0, 0.12);
}

.career-search-icon[b-iimqb542se] {
    flex: 0 0 auto;
    margin-right: 15px;
    color: #1769ff;
    font-size: 1.45rem;
}

.career-search-input[b-iimqb542se] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1.13rem;
    font-weight: 500;
    color: #14213d;
}

    .career-search-input[b-iimqb542se]::placeholder {
        color: #8b96a9;
        opacity: 1;
    }

.career-search-button[b-iimqb542se] {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    background: linear-gradient( 135deg, #0f6fff, #2454e8 );
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 8px 22px rgba(20, 91, 235, 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .career-search-button:hover[b-iimqb542se] {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(20, 91, 235, 0.42);
    }

/* =========================================================
   AUTOCOMPLETE
   ========================================================= */

.career-autocomplete[b-iimqb542se] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(215, 225, 241, 0.95);
    border-radius: 16px;
    box-shadow: 0 25px 65px rgba(3, 18, 48, 0.30);
    z-index: 100;
}

.career-autocomplete-item[b-iimqb542se] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #edf2f8;
    background: #fff;
    text-align: left;
    transition: background 0.15s ease, padding-left 0.15s ease;
}

    .career-autocomplete-item:last-child[b-iimqb542se] {
        border-bottom: 0;
    }

    .career-autocomplete-item:hover[b-iimqb542se] {
        background: #f3f7ff;
        padding-left: 22px;
    }

.career-autocomplete-icon[b-iimqb542se] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf4ff;
    color: #1769ff;
}

.career-autocomplete-copy[b-iimqb542se] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .career-autocomplete-copy strong[b-iimqb542se] {
        color: #17233d;
        font-size: 0.96rem;
        font-weight: 700;
    }

    .career-autocomplete-copy small[b-iimqb542se] {
        margin-top: 2px;
        color: #8792a6;
        font-size: 0.76rem;
    }

.career-result-arrow[b-iimqb542se] {
    color: #9ba8ba;
    font-size: 0.95rem;
}

.career-autocomplete-item:hover .career-result-arrow[b-iimqb542se] {
    color: #1769ff;
}

.career-autocomplete-empty[b-iimqb542se] {
    padding: 20px;
    color: #6e7d92;
    text-align: center;
    font-size: 0.93rem;
}

/* EXAMPLE */

.career-search-example[b-iimqb542se] {
    margin-top: 11px;
    margin-left: 7px;
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.82rem;
}

/* =========================================================
   POPULAR SEARCHES
   ========================================================= */

.popular-careers[b-iimqb542se] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 21px;
}

.popular-label[b-iimqb542se] {
    margin-right: 3px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.83rem;
    font-weight: 700;
}

.popular-career[b-iimqb542se] {
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(8, 31, 75, 0.48);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.93);
    font-size: 0.78rem;
    font-weight: 650;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .popular-career:hover[b-iimqb542se] {
        transform: translateY(-1px);
        background: rgba(31, 107, 255, 0.72);
        border-color: rgba(124, 174, 255, 0.85);
        color: #fff;
    }

/* =========================================================
   HERO STATISTICS
   ========================================================= */

.career-hero-stats[b-iimqb542se] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 40px;
}

.career-hero-stat[b-iimqb542se] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 150px;
    padding: 0 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
}

    .career-hero-stat:first-child[b-iimqb542se] {
        padding-left: 0;
    }

    .career-hero-stat:last-child[b-iimqb542se] {
        border-right: 0;
    }

.career-stat-icon[b-iimqb542se] {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: rgba(31, 104, 255, 0.23);
    border: 1px solid rgba(111, 164, 255, 0.26);
    color: #75aaff;
    font-size: 1.1rem;
}

.career-hero-stat > div[b-iimqb542se] {
    display: flex;
    flex-direction: column;
}

.career-hero-stat strong[b-iimqb542se] {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.1;
    font-weight: 800;
}

.career-hero-stat span:not(.career-stat-icon)[b-iimqb542se] {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.77rem;
}

/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.career-scroll-indicator[b-iimqb542se] {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

    .career-scroll-indicator:hover[b-iimqb542se] {
        color: #fff;
    }

    .career-scroll-indicator i[b-iimqb542se] {
        font-size: 1.05rem;
    }

/* =========================================================
   OPPORTUNITY MAP TRANSITION
   ========================================================= */

.home-opportunity-section[b-iimqb542se] {
    position: relative;
    z-index: 2;
    background: #f6f9fe;
    scroll-margin-top: 100px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .career-hero[b-iimqb542se] {
        min-height: auto;
    }

    .career-hero-container[b-iimqb542se] {
        padding-top: 70px;
        padding-bottom: 100px;
    }

    .career-hero-content[b-iimqb542se] {
        max-width: 680px;
    }

    .career-hero-title[b-iimqb542se] {
        font-size: clamp(3rem, 8vw, 4.5rem);
    }

    .career-hero-stats[b-iimqb542se] {
        row-gap: 24px;
    }

    .career-hero-stat[b-iimqb542se] {
        width: 50%;
        padding: 0 20px;
    }

        .career-hero-stat:nth-child(2)[b-iimqb542se] {
            border-right: 0;
        }

        .career-hero-stat:nth-child(3)[b-iimqb542se] {
            padding-left: 0;
        }
}

@media (max-width: 575.98px) {

    .career-hero[b-iimqb542se] {
        background-position: 62% center;
    }

    .career-hero-container[b-iimqb542se] {
        padding-top: 52px;
        padding-bottom: 90px;
    }

    .career-hero-eyebrow[b-iimqb542se] {
        font-size: 0.69rem;
    }

    .career-hero-title[b-iimqb542se] {
        font-size: 2.85rem;
    }

    .career-hero-description[b-iimqb542se] {
        font-size: 1.02rem;
    }

    .career-search-box[b-iimqb542se] {
        height: 70px;
        padding-left: 18px;
    }

    .career-search-icon[b-iimqb542se] {
        margin-right: 10px;
        font-size: 1.15rem;
    }

    .career-search-input[b-iimqb542se] {
        font-size: 0.95rem;
    }

    .career-search-button[b-iimqb542se] {
        width: 52px;
        height: 52px;
    }

    .career-search-example[b-iimqb542se] {
        display: none;
    }

    .popular-label[b-iimqb542se] {
        width: 100%;
    }

    .career-hero-stats[b-iimqb542se] {
        margin-top: 32px;
    }

    .career-hero-stat[b-iimqb542se] {
        width: 50%;
        min-width: 0;
        padding: 0 8px;
        border-right: 0;
    }

        .career-hero-stat:first-child[b-iimqb542se],
        .career-hero-stat:nth-child(3)[b-iimqb542se] {
            padding-left: 0;
        }

    .career-stat-icon[b-iimqb542se] {
        width: 38px;
        height: 38px;
    }

    .career-hero-stat strong[b-iimqb542se] {
        font-size: 1rem;
    }
}


.data-source-type[b-iimqb542se] {
    display: block;
    margin-bottom: 0.35rem;
    color: #1769ff;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ==========================================================
   CAREERGPS LOGIN
   ========================================================== */

.auth-page[b-0ws0qzes5q] {
    min-height: calc(100vh - 1px);
    padding: 2rem;
    background: radial-gradient(circle at 10% 10%, rgba(79, 124, 255, .12), transparent 30%), radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .10), transparent 32%), #f5f8fd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell[b-0ws0qzes5q] {
    width: min(1180px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    overflow: hidden;
    border: 1px solid rgba(214, 224, 239, .9);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

/* ==========================================================
   BRAND PANEL
   ========================================================== */

.auth-brand-panel[b-0ws0qzes5q] {
    position: relative;
    overflow: hidden;
    padding: 3.25rem;
    background: linear-gradient(145deg, rgba(15, 39, 95, .98), rgba(34, 75, 190, .97)), #17366f;
    color: #ffffff;
}

.auth-brand-content[b-0ws0qzes5q] {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.auth-logo[b-0ws0qzes5q] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 850;
    text-decoration: none;
    letter-spacing: -.02em;
}

    .auth-logo:hover[b-0ws0qzes5q] {
        color: inherit;
    }

.auth-logo-icon[b-0ws0qzes5q] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.auth-brand-copy[b-0ws0qzes5q] {
    max-width: 560px;
    margin-top: 6rem;
}

.auth-eyebrow[b-0ws0qzes5q],
.auth-heading-kicker[b-0ws0qzes5q] {
    display: inline-block;
    margin-bottom: .8rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-eyebrow[b-0ws0qzes5q] {
    color: #bcd0ff;
}

.auth-brand-copy h1[b-0ws0qzes5q] {
    max-width: 510px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 4vw, 4.15rem);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: -.045em;
}

.auth-brand-copy p[b-0ws0qzes5q] {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    line-height: 1.75;
}

.auth-benefits[b-0ws0qzes5q] {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
}

.auth-benefit[b-0ws0qzes5q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 17px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.auth-benefit-icon[b-0ws0qzes5q] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 1.05rem;
}

.auth-benefit div[b-0ws0qzes5q] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.auth-benefit strong[b-0ws0qzes5q] {
    font-size: .92rem;
    font-weight: 750;
}

.auth-benefit span[b-0ws0qzes5q] {
    color: rgba(255, 255, 255, .68);
    font-size: .8rem;
}

.auth-brand-footer[b-0ws0qzes5q] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, .62);
    font-size: .79rem;
}

.auth-decoration[b-0ws0qzes5q] {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.auth-decoration-one[b-0ws0qzes5q] {
    right: -160px;
    bottom: -190px;
    width: 440px;
    height: 440px;
    border: 70px solid rgba(255, 255, 255, .045);
}

.auth-decoration-two[b-0ws0qzes5q] {
    top: 80px;
    right: -75px;
    width: 210px;
    height: 210px;
    background: rgba(118, 153, 255, .12);
    filter: blur(2px);
}

/* ==========================================================
   FORM PANEL
   ========================================================== */

.auth-form-panel[b-0ws0qzes5q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    background: #ffffff;
}

.auth-form-container[b-0ws0qzes5q] {
    width: min(430px, 100%);
}

.auth-mobile-logo[b-0ws0qzes5q] {
    display: none;
    margin-bottom: 2.5rem;
    color: #17366f;
}

.auth-heading[b-0ws0qzes5q] {
    margin-bottom: 2rem;
}

.auth-heading-kicker[b-0ws0qzes5q] {
    color: #3568f5;
}

.auth-heading h2[b-0ws0qzes5q] {
    margin: 0 0 .65rem;
    color: #172b4d;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.auth-heading p[b-0ws0qzes5q] {
    margin: 0;
    color: #667085;
    font-size: .95rem;
    line-height: 1.65;
}

.auth-alert[b-0ws0qzes5q] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding: .95rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff7f7;
    color: #b42318;
    font-size: .86rem;
    line-height: 1.5;
}

.auth-alert-icon[b-0ws0qzes5q] {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.auth-field[b-0ws0qzes5q] {
    margin-bottom: 1.25rem;
}

    .auth-field label[b-0ws0qzes5q],
    .auth-label-row label[b-0ws0qzes5q] {
        margin-bottom: .5rem;
        color: #344054;
        font-size: .82rem;
        font-weight: 750;
    }

.auth-label-row[b-0ws0qzes5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-input-wrapper[b-0ws0qzes5q] {
    position: relative;
}

.auth-input-icon[b-0ws0qzes5q] {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input[b-0ws0qzes5q] {
    width: 100%;
    min-height: 52px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #172b4d;
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-password-input[b-0ws0qzes5q] {
    padding-right: 3rem;
}

.auth-input[b-0ws0qzes5q]::placeholder {
    color: #a6afbd;
}

.auth-input:hover[b-0ws0qzes5q] {
    border-color: #b9c5d7;
}

.auth-input:focus[b-0ws0qzes5q] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .12);
}

.auth-password-toggle[b-0ws0qzes5q] {
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    transform: translateY(-50%);
}

    .auth-password-toggle:hover[b-0ws0qzes5q] {
        background: #f2f5fa;
        color: #3568f5;
    }

.auth-text-link[b-0ws0qzes5q] {
    color: #3568f5;
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
}

    .auth-text-link:hover[b-0ws0qzes5q] {
        color: #2347d8;
        text-decoration: underline;
    }

.auth-options[b-0ws0qzes5q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2rem 0 1.5rem;
}

.auth-checkbox[b-0ws0qzes5q] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #475467;
    font-size: .82rem;
    cursor: pointer;
}

    .auth-checkbox input[b-0ws0qzes5q] {
        width: 17px;
        height: 17px;
        accent-color: #3568f5;
    }

.auth-submit-button[b-0ws0qzes5q],
.auth-secondary-button[b-0ws0qzes5q] {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.auth-submit-button[b-0ws0qzes5q] {
    border: 0;
    background: linear-gradient(135deg, #4f7cff, #2347d8);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(54, 96, 230, .25);
}

    .auth-submit-button:hover:not(:disabled)[b-0ws0qzes5q] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(54, 96, 230, .32);
    }

    .auth-submit-button:disabled[b-0ws0qzes5q] {
        cursor: wait;
        opacity: .72;
    }

.auth-secondary-button[b-0ws0qzes5q] {
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #344054;
}

    .auth-secondary-button:hover[b-0ws0qzes5q] {
        border-color: #aebcd0;
        background: #f8faff;
        color: #2347d8;
        transform: translateY(-1px);
    }

.auth-divider[b-0ws0qzes5q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.7rem 0;
    color: #98a2b3;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}

    .auth-divider[b-0ws0qzes5q]::before,
    .auth-divider[b-0ws0qzes5q]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e7ecf3;
    }

.auth-legal[b-0ws0qzes5q] {
    margin: 1.5rem 0 0;
    color: #98a2b3;
    font-size: .71rem;
    line-height: 1.6;
    text-align: center;
}

    .auth-legal a[b-0ws0qzes5q] {
        color: #667085;
        font-weight: 650;
        text-decoration: none;
    }

        .auth-legal a:hover[b-0ws0qzes5q] {
            color: #3568f5;
            text-decoration: underline;
        }

/* Blazor validation */

.validation-message[b-0ws0qzes5q] {
    display: block;
    margin-top: .4rem;
    color: #d92d20;
    font-size: .74rem;
}

.invalid[b-0ws0qzes5q] {
    border-color: #f04438;
}

    .invalid:focus[b-0ws0qzes5q] {
        border-color: #f04438;
        box-shadow: 0 0 0 4px rgba(240, 68, 56, .10);
    }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    .auth-page[b-0ws0qzes5q] {
        padding: 1.25rem;
    }

    .auth-shell[b-0ws0qzes5q] {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel[b-0ws0qzes5q] {
        display: none;
    }

    .auth-form-panel[b-0ws0qzes5q] {
        min-height: calc(100vh - 2.5rem);
        padding: 3rem 2rem;
    }

    .auth-mobile-logo[b-0ws0qzes5q] {
        display: block;
    }
}

@media (max-width: 575px) {

    .auth-page[b-0ws0qzes5q] {
        padding: 0;
        background: #ffffff;
    }

    .auth-shell[b-0ws0qzes5q] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel[b-0ws0qzes5q] {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        align-items: flex-start;
    }

    .auth-form-container[b-0ws0qzes5q] {
        padding-top: 1rem;
    }

    .auth-heading h2[b-0ws0qzes5q] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/Methodology.razor.rz.scp.css */
.methodology-page[b-zju3sjalvw] {
    width: 100%;
}

.methodology-hero[b-zju3sjalvw] {
    max-width: 900px;
    padding: 54px 0 72px 0;
}

.methodology-eyebrow[b-zju3sjalvw] {
    display: block;
    margin-bottom: 18px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.methodology-hero h1[b-zju3sjalvw] {
    margin: 0;
    color: #111827;
    font-size: clamp(44px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.methodology-hero p[b-zju3sjalvw] {
    max-width: 760px;
    margin: 24px 0 0 0;
    color: #6b7280;
    font-size: 19px;
    line-height: 1.7;
}

.methodology-section[b-zju3sjalvw] {
    padding: 72px 0;
    border-top: 1px solid #e5e7eb;
}

.section-heading[b-zju3sjalvw] {
    display: flex;
    gap: 22px;
    max-width: 900px;
    margin-bottom: 38px;
}

.section-number[b-zju3sjalvw] {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #dbeafe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}

.section-heading h2[b-zju3sjalvw] {
    margin: 0;
    color: #111827;
    font-size: 32px;
    letter-spacing: -0.025em;
}

.section-heading p[b-zju3sjalvw] {
    max-width: 760px;
    margin: 12px 0 0 0;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.65;
}

.methodology-grid[b-zju3sjalvw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.methodology-card[b-zju3sjalvw],
.model-description-card[b-zju3sjalvw] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    background-color: #ffffff;
}

    .methodology-card h3[b-zju3sjalvw],
    .model-description-card h3[b-zju3sjalvw] {
        margin: 0 0 10px 0;
        color: #111827;
        font-size: 19px;
    }

    .methodology-card p[b-zju3sjalvw],
    .model-description-card p[b-zju3sjalvw] {
        margin: 0;
        color: #6b7280;
        line-height: 1.65;
    }

.process-grid[b-zju3sjalvw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.process-step > span[b-zju3sjalvw] {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 800;
}

.process-step h3[b-zju3sjalvw] {
    margin: 20px 0 8px 0;
    color: #111827;
    font-size: 19px;
}

.process-step p[b-zju3sjalvw] {
    margin: 0;
    color: #6b7280;
    line-height: 1.65;
}

.model-description-grid[b-zju3sjalvw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.data-source-list[b-zju3sjalvw] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #ffffff;
}

.data-source-item[b-zju3sjalvw] {
    display: grid;
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 0.65fr);
    gap: 30px;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

    .data-source-item:last-child[b-zju3sjalvw] {
        border-bottom: 0;
    }

    .data-source-item strong[b-zju3sjalvw] {
        color: #111827;
    }

    .data-source-item p[b-zju3sjalvw] {
        margin: 0;
        color: #6b7280;
        line-height: 1.6;
    }

.methodology-disclaimer[b-zju3sjalvw] {
    margin-top: 72px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 30px;
    background-color: #fffbeb;
}

    .methodology-disclaimer h2[b-zju3sjalvw] {
        margin: 0 0 14px 0;
        color: #111827;
        font-size: 24px;
    }

    .methodology-disclaimer p[b-zju3sjalvw] {
        margin: 10px 0 0 0;
        color: #6b7280;
        line-height: 1.65;
    }

.methodology-cta[b-zju3sjalvw] {
    margin: 72px 0 30px 0;
    border-radius: 16px;
    padding: 54px;
    background-color: #111827;
    text-align: center;
}

    .methodology-cta h2[b-zju3sjalvw] {
        margin: 0;
        color: #ffffff;
        font-size: 34px;
    }

    .methodology-cta p[b-zju3sjalvw] {
        margin: 12px 0 26px 0;
        color: #9ca3af;
        font-size: 17px;
    }

.methodology-button[b-zju3sjalvw] {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 22px;
    background-color: #2563eb;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

    .methodology-button:hover[b-zju3sjalvw] {
        background-color: #1d4ed8;
        color: #ffffff;
    }

@media (max-width: 950px) {
    .methodology-grid[b-zju3sjalvw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid[b-zju3sjalvw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .methodology-grid[b-zju3sjalvw],
    .process-grid[b-zju3sjalvw],
    .model-description-grid[b-zju3sjalvw] {
        grid-template-columns: 1fr;
    }

    .data-source-item[b-zju3sjalvw] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .methodology-cta[b-zju3sjalvw] {
        padding: 38px 22px;
    }
}
/* /Components/Pages/MyCareers.razor.rz.scp.css */
.my-careers-page[b-dvqunp2tod] {
    min-height: 100vh;
    background: #f6f7fb;
    color: #172033;
}

/* ============================================================
   HERO
   ============================================================ */

.my-careers-hero[b-dvqunp2tod] {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 6rem;
    background: radial-gradient( circle at 85% 20%, rgba(124, 97, 255, 0.32), transparent 30% ), linear-gradient( 135deg, #111937 0%, #252d68 55%, #5144c9 100% );
    color: #ffffff;
}

    .my-careers-hero[b-dvqunp2tod]::before {
        position: absolute;
        inset: 0;
        content: "";
        opacity: 0.06;
        background-image: linear-gradient( rgba(255, 255, 255, 0.8) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px );
        background-size: 46px 46px;
    }

    .my-careers-hero .container[b-dvqunp2tod] {
        position: relative;
        z-index: 2;
    }

.my-careers-back[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 2.25rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

    .my-careers-back:hover[b-dvqunp2tod] {
        color: #ffffff;
    }

.my-careers-hero-content[b-dvqunp2tod] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
}

.my-careers-eyebrow[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: #ff8ca7;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.my-careers-hero h1[b-dvqunp2tod] {
    margin: 0;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.my-careers-hero p[b-dvqunp2tod] {
    max-width: 720px;
    margin: 1.4rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    line-height: 1.75;
}

.saved-count[b-dvqunp2tod] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 150px;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(6, 10, 35, 0.22);
    backdrop-filter: blur(14px);
}

.saved-count-number[b-dvqunp2tod] {
    font-size: 2.25rem;
    font-weight: 850;
    line-height: 1;
}

.saved-count-label[b-dvqunp2tod] {
    margin-top: 0.45rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ============================================================
   CONTENT
   ============================================================ */

.my-careers-content[b-dvqunp2tod] {
    position: relative;
    z-index: 3;
    margin-top: -2.5rem;
    padding-bottom: 6rem;
}

.my-careers-loading[b-dvqunp2tod],
.my-careers-empty[b-dvqunp2tod] {
    max-width: 760px;
    margin: 0 auto;
    padding: 4.5rem 2rem;
    border: 1px solid #e5e8f1;
    border-radius: 1.6rem;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 22px 60px rgba(27, 38, 78, 0.1);
}

.my-careers-loading[b-dvqunp2tod] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.my-careers-empty h2[b-dvqunp2tod] {
    margin: 1.4rem 0 0.7rem;
    font-size: 1.8rem;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.my-careers-empty p[b-dvqunp2tod] {
    max-width: 560px;
    margin: 0 auto;
    color: #6f778b;
    line-height: 1.7;
}

.empty-icon[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.6rem;
    background: #fff0f4;
    color: #ed4169;
    font-size: 2.2rem;
}

.btn-explore-careers[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.75rem;
    padding: 0.8rem 1.2rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #5b52f6, #7467ff);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(91, 82, 246, 0.24);
}

    .btn-explore-careers:hover[b-dvqunp2tod] {
        color: #ffffff;
        transform: translateY(-2px);
    }

/* ============================================================
   CAREER CARDS
   ============================================================ */

.my-careers-grid[b-dvqunp2tod] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.career-card[b-dvqunp2tod] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e6ef;
    border-radius: 1.45rem;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(27, 38, 78, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

    .career-card:hover[b-dvqunp2tod] {
        transform: translateY(-5px);
        border-color: #ced2e2;
        box-shadow: 0 25px 58px rgba(27, 38, 78, 0.13);
    }

.career-card-top[b-dvqunp2tod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 1.35rem 0;
}

.career-icon[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.95rem;
    background: #f0efff;
    color: #5b52f6;
    font-size: 1.15rem;
}

.remove-button[b-dvqunp2tod] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid #ffd0db;
    border-radius: 999px;
    background: #fff2f5;
    color: #ed4169;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

    .remove-button:hover:not(:disabled)[b-dvqunp2tod] {
        transform: scale(1.08);
        background: #ed4169;
        color: #ffffff;
    }

    .remove-button:disabled[b-dvqunp2tod] {
        cursor: not-allowed;
        opacity: 0.55;
    }

.career-card-body[b-dvqunp2tod] {
    flex: 1;
    padding: 1.15rem 1.35rem 1.45rem;
}

.occupation-code[b-dvqunp2tod] {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #8c93a5;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.career-card-body h2[b-dvqunp2tod] {
    margin: 0;
    min-height: 3.2rem;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.career-metrics[b-dvqunp2tod] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.career-metric[b-dvqunp2tod] {
    display: flex;
    flex-direction: column;
    padding: 0.9rem;
    border-radius: 0.95rem;
    background: #f7f8fc;
}

.metric-label[b-dvqunp2tod] {
    color: #7b8395;
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.career-metric strong[b-dvqunp2tod] {
    margin-top: 0.3rem;
    color: #172033;
    font-size: 1rem;
    font-weight: 850;
}

.career-card-footer[b-dvqunp2tod] {
    padding: 1rem 1.35rem;
    border-top: 1px solid #eceef5;
    background: #fcfcfe;
}

.view-career-button[b-dvqunp2tod] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5148df;
    font-size: 0.85rem;
    font-weight: 850;
    text-decoration: none;
}

    .view-career-button:hover[b-dvqunp2tod] {
        color: #342cab;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199.98px) {
    .my-careers-grid[b-dvqunp2tod] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .my-careers-hero-content[b-dvqunp2tod] {
        align-items: flex-start;
        flex-direction: column;
    }

    .saved-count[b-dvqunp2tod] {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .my-careers-hero[b-dvqunp2tod] {
        padding: 3.5rem 0 5rem;
    }

    .my-careers-grid[b-dvqunp2tod] {
        grid-template-columns: 1fr;
    }

    .career-card-body h2[b-dvqunp2tod] {
        min-height: 0;
    }
}

@media (max-width: 479.98px) {
    .career-metrics[b-dvqunp2tod] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
/*==========================================================
    NOT FOUND PAGE
==========================================================*/

.nf-hero[b-218afvyvyy] {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
    background: linear-gradient(135deg,#0d6efd 0%,#2563eb 45%,#4f46e5 100%);
    color: #fff;
}

    .nf-hero[b-218afvyvyy]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 42%);
        pointer-events: none;
    }

    .nf-hero > *[b-218afvyvyy] {
        position: relative;
        z-index: 2;
    }

.nf-badge[b-218afvyvyy] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.nf-hero h1 span[b-218afvyvyy] {
    color: #b9dbff;
}

.nf-hero p[b-218afvyvyy] {
    color: rgba(255,255,255,.9);
}

.hero-actions[b-218afvyvyy] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

    .hero-actions .btn[b-218afvyvyy] {
        border-radius: 12px;
        padding: .95rem 1.75rem;
        font-weight: 600;
    }

/*==========================================================
    404 ILLUSTRATION
==========================================================*/

.nf-illustration[b-218afvyvyy] {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-circle[b-218afvyvyy] {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 800;
    backdrop-filter: blur(18px);
}

.floating-card[b-218afvyvyy] {
    position: absolute;
    background: #fff;
    color: #212529;
    border-radius: 18px;
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    font-weight: 600;
}

    .floating-card i[b-218afvyvyy] {
        color: #0d6efd;
        font-size: 1.3rem;
    }

.card-one[b-218afvyvyy] {
    top: 10%;
    left: 0;
}

.card-two[b-218afvyvyy] {
    right: 0;
    top: 42%;
}

.card-three[b-218afvyvyy] {
    bottom: 5%;
    left: 12%;
}

/*==========================================================
    COMMON
==========================================================*/

.section-badge[b-218afvyvyy] {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-218afvyvyy] {
    max-width: 760px;
    margin: 1rem auto 0;
    color: #6c757d;
}

/*==========================================================
    SHORTCUTS
==========================================================*/

.nf-shortcuts[b-218afvyvyy] {
    background: #f8fafc;
}

.shortcut-card[b-218afvyvyy] {
    display: block;
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    border: 1px solid #edf2f7;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .3s;
    color: inherit;
}

    .shortcut-card:hover[b-218afvyvyy] {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(13,110,253,.15);
        color: inherit;
    }

.shortcut-icon[b-218afvyvyy] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.shortcut-card h4[b-218afvyvyy] {
    font-weight: 700;
    margin-bottom: .75rem;
}

.shortcut-card p[b-218afvyvyy] {
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.7;
}

/*==========================================================
    HELP
==========================================================*/

.nf-help[b-218afvyvyy] {
    padding: 5rem 0;
}

.nf-help-list[b-218afvyvyy] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nf-help-item[b-218afvyvyy] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.nf-help-icon[b-218afvyvyy] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.nf-help-item h5[b-218afvyvyy] {
    font-weight: 700;
    margin-bottom: .4rem;
}

.nf-help-item p[b-218afvyvyy] {
    color: #6c757d;
    margin-bottom: 0;
}

.nf-help-card[b-218afvyvyy] {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.06);
}

.nf-help-card-icon[b-218afvyvyy] {
    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 22px;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.nf-help-card p[b-218afvyvyy] {
    color: #6c757d;
}

/*==========================================================
    CTA
==========================================================*/

.nf-cta-section[b-218afvyvyy] {
    padding: 5rem 0 6rem;
}

.nf-cta-card[b-218afvyvyy] {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 4rem;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
}

    .nf-cta-card[b-218afvyvyy]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 40%);
        pointer-events: none;
    }

    .nf-cta-card > *[b-218afvyvyy] {
        position: relative;
        z-index: 2;
    }

    .nf-cta-card .btn[b-218afvyvyy] {
        border-radius: 12px;
        padding: .95rem 1.6rem;
        font-weight: 600;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:991px) {

    .nf-hero[b-218afvyvyy] {
        text-align: center;
        padding: 5rem 0;
    }

    .hero-actions[b-218afvyvyy] {
        justify-content: center;
    }

    .nf-illustration[b-218afvyvyy] {
        margin-top: 3rem;
        min-height: 360px;
    }

    .floating-card[b-218afvyvyy] {
        position: relative;
        margin: 1rem auto;
        width: 260px;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .nf-help-card[b-218afvyvyy],
    .nf-cta-card[b-218afvyvyy] {
        padding: 2rem;
    }
}

@media (max-width:768px) {

    .nf-hero h1[b-218afvyvyy] {
        font-size: 2.6rem;
    }

    .hero-actions[b-218afvyvyy] {
        flex-direction: column;
    }

        .hero-actions .btn[b-218afvyvyy] {
            width: 100%;
        }

    .error-circle[b-218afvyvyy] {
        width: 180px;
        height: 180px;
        font-size: 3.8rem;
    }

    .shortcut-card[b-218afvyvyy],
    .nf-help-card[b-218afvyvyy],
    .nf-cta-card[b-218afvyvyy] {
        border-radius: 18px;
    }

    .nf-help-item[b-218afvyvyy] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .nf-cta-card .btn[b-218afvyvyy] {
        width: 100%;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* ==========================================================
   CareerGPS Pricing
========================================================== */

.pricing-page[b-j4njh2ue4x] {
    background: #f5f8fc;
}

.pricing-container[b-j4njh2ue4x] {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/*==========================================================
 HERO
==========================================================*/

.pricing-hero[b-j4njh2ue4x] {
    background: linear-gradient(135deg,#143b87,#3f6ff7);
    color: white;
    padding: 90px 0;
}

.hero-content[b-j4njh2ue4x] {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pricing-badge[b-j4njh2ue4x] {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: white;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-description[b-j4njh2ue4x] {
    margin-top: 24px;
    max-width: 700px;
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255,255,255,.92);
}

/*==========================================================
 SECTION
==========================================================*/

.pricing-section[b-j4njh2ue4x] {
    margin-top: -70px;
    padding-bottom: 80px;
}

/*==========================================================
 CARDS
==========================================================*/

.pricing-card[b-j4njh2ue4x] {
    background: white;
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    position: relative;
    box-shadow: 0 15px 40px rgba(30,42,80,.08);
    transition: .35s;
    border: 1px solid #e8edf7;
}

    .pricing-card:hover[b-j4njh2ue4x] {
        transform: translateY(-10px);
        box-shadow: 0 30px 60px rgba(30,42,80,.14);
    }

/*==========================================================
 FEATURED
==========================================================*/

.featured[b-j4njh2ue4x] {
    background: linear-gradient( 160deg, #173d89, #295cff );
    color: white;
    transform: scale(1.04);
}

    .featured:hover[b-j4njh2ue4x] {
        transform: scale(1.04) translateY(-10px);
    }

    .featured .price[b-j4njh2ue4x],
    .featured .plan-name[b-j4njh2ue4x],
    .featured .plan-type[b-j4njh2ue4x],
    .featured p[b-j4njh2ue4x],
    .featured li[b-j4njh2ue4x] {
        color: white;
    }

    .featured .feature-list li[b-j4njh2ue4x] {
        border-color: rgba(255,255,255,.18);
    }

    .featured .bi-check-circle-fill[b-j4njh2ue4x] {
        color: #8bffca;
    }

/*==========================================================
 BADGE
==========================================================*/

.popular-badge[b-j4njh2ue4x] {
    position: absolute;
    top: 22px;
    right: 22px;
    background: white;
    color: #295cff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 16px;
    letter-spacing: .5px;
}

/*==========================================================
 ICONS
==========================================================*/

.plan-icon[b-j4njh2ue4x] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
    background: #eef4ff;
    color: #2962ff;
}

.featured-icon[b-j4njh2ue4x] {
    background: rgba(255,255,255,.15);
    color: white;
}

/*==========================================================
 TEXT
==========================================================*/

.plan-name[b-j4njh2ue4x] {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.plan-type[b-j4njh2ue4x] {
    color: #6d7b95;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: .82rem;
}

.price[b-j4njh2ue4x] {
    font-size: 3.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1;
}

    .price span[b-j4njh2ue4x] {
        font-size: 1rem;
        color: #8a97ae;
        margin-left: 6px;
        font-weight: 500;
    }

.plan-description[b-j4njh2ue4x] {
    color: #6f7c93;
    line-height: 1.7;
    margin-bottom: 35px;
    min-height: 70px;
}

/*==========================================================
 FEATURES
==========================================================*/

.feature-list[b-j4njh2ue4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .feature-list li[b-j4njh2ue4x] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 0;
        border-bottom: 1px solid #edf2f8;
        font-size: .97rem;
    }

        .feature-list li:last-child[b-j4njh2ue4x] {
            border: none;
        }

    .feature-list i[b-j4njh2ue4x] {
        color: #2962ff;
        font-size: 1.15rem;
    }

/*==========================================================
 BUTTONS
==========================================================*/

.btn[b-j4njh2ue4x] {
    border-radius: 14px;
    padding: .9rem 1.25rem;
    font-weight: 600;
}

/*==========================================================
COMPARISON GRID
==========================================================*/

.comparison-card[b-j4njh2ue4x] {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(30,42,80,.08);
}

.comparison-grid[b-j4njh2ue4x] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

    .comparison-grid > div[b-j4njh2ue4x] {
        padding: 22px 26px;
        border-bottom: 1px solid #edf2f8;
    }

        .comparison-grid > div:nth-child(8n+5)[b-j4njh2ue4x],
        .comparison-grid > div:nth-child(8n+6)[b-j4njh2ue4x],
        .comparison-grid > div:nth-child(8n+7)[b-j4njh2ue4x],
        .comparison-grid > div:nth-child(8n+8)[b-j4njh2ue4x] {
            background: #f8fbff;
        }

/* Header */

.cg-header[b-j4njh2ue4x] {
    background: #163d8b;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
}

.feature-col[b-j4njh2ue4x] {
    text-align: left;
}

/* Feature names */

.feature-name[b-j4njh2ue4x] {
    font-weight: 600;
    color: #24344d;
}

/* Plan columns */

.comparison-grid > div:not(.feature-name):not(.cg-header):not(.feature-col)[b-j4njh2ue4x] {
    text-align: center;
}

/* Icons */

.comparison-grid i[b-j4njh2ue4x] {
    color: #2962ff;
    font-size: 1.35rem;
}

/* Empty */

.cg-empty[b-j4njh2ue4x] {
    color: #b7c2d6;
    font-size: 1.2rem;
}

/* Remove last border */

.comparison-grid > div:nth-last-child(-n+4)[b-j4njh2ue4x] {
    border-bottom: none;
}

/* Mobile */

@media(max-width:992px) {

    .comparison-grid[b-j4njh2ue4x] {
        grid-template-columns: 220px repeat(3,1fr);
        font-size: .9rem;
    }

        .comparison-grid > div[b-j4njh2ue4x] {
            padding: 18px 14px;
        }
}

/*==========================================================
 CTA
==========================================================*/

.pricing-cta[b-j4njh2ue4x] {
    padding-bottom: 90px;
}

.cta-box[b-j4njh2ue4x] {
    background: linear-gradient( 135deg, #173d89, #3367ff );
    color: white;
    border-radius: 28px;
    padding: 70px 40px;
    box-shadow: 0 25px 70px rgba(30,60,150,.25);
}

    .cta-box h2[b-j4njh2ue4x] {
        font-size: 2.5rem;
        font-weight: 700;
    }

    .cta-box p[b-j4njh2ue4x] {
        font-size: 1.15rem;
        margin: 25px auto 35px;
        max-width: 720px;
        color: rgba(255,255,255,.90);
    }

    .cta-box .btn[b-j4njh2ue4x] {
        padding: 16px 40px;
        font-size: 1.1rem;
        border-radius: 14px;
    }

/*==========================================================
 MOBILE
==========================================================*/

@media(max-width:991px) {

    .pricing-section[b-j4njh2ue4x] {
        margin-top: -40px;
    }

    .featured[b-j4njh2ue4x] {
        transform: none;
    }

        .featured:hover[b-j4njh2ue4x] {
            transform: translateY(-8px);
        }
}

@media(max-width:768px) {

    .pricing-hero[b-j4njh2ue4x] {
        padding: 70px 0;
    }

    .pricing-card[b-j4njh2ue4x] {
        padding: 30px;
    }

    .price[b-j4njh2ue4x] {
        font-size: 2.8rem;
    }

    .cta-box[b-j4njh2ue4x] {
        padding: 50px 25px;
    }

        .cta-box h2[b-j4njh2ue4x] {
            font-size: 2rem;
        }

    .pricing-container[b-j4njh2ue4x] {
        padding-left: 20px;
        padding-right: 20px;
    }
    .pricing-card[b-j4njh2ue4x] {
        padding: 48px;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/*==========================================================
    PRIVACY PAGE
==========================================================*/

.privacy-hero[b-28krfp8wlb] {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
    background: linear-gradient(135deg,#0d6efd 0%,#2563eb 45%,#4f46e5 100%);
    color: #fff;
}

    .privacy-hero[b-28krfp8wlb]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 42%);
        pointer-events: none;
    }

    .privacy-hero > *[b-28krfp8wlb] {
        position: relative;
        z-index: 2;
    }

.privacy-badge[b-28krfp8wlb] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.privacy-hero h1 span[b-28krfp8wlb] {
    color: #b9dbff;
}

.privacy-hero p[b-28krfp8wlb] {
    color: rgba(255,255,255,.9);
}

.privacy-meta[b-28krfp8wlb] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.privacy-meta-card[b-28krfp8wlb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}

    .privacy-meta-card i[b-28krfp8wlb] {
        font-size: 1.5rem;
    }

    .privacy-meta-card small[b-28krfp8wlb] {
        display: block;
        font-size: .72rem;
        opacity: .8;
        letter-spacing: .08em;
    }

    .privacy-meta-card strong[b-28krfp8wlb] {
        display: block;
        font-size: .95rem;
    }

.privacy-hero-card[b-28krfp8wlb] {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(18px);
}

.privacy-highlight + .privacy-highlight[b-28krfp8wlb] {
    margin-top: 2rem;
}

.privacy-highlight i[b-28krfp8wlb] {
    font-size: 2rem;
    margin-bottom: .8rem;
}

.privacy-highlight h4[b-28krfp8wlb] {
    color: #fff;
}

.privacy-highlight p[b-28krfp8wlb] {
    color: rgba(255,255,255,.85);
    margin-bottom: 0;
}

/*==========================================================
    COMMON
==========================================================*/

.section-badge[b-28krfp8wlb] {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-28krfp8wlb] {
    max-width: 760px;
    margin: 1rem auto 0;
    color: #6c757d;
}

/*==========================================================
    CARDS
==========================================================*/

.privacy-collection[b-28krfp8wlb],
.privacy-services[b-28krfp8wlb],
.privacy-rights[b-28krfp8wlb] {
    background: #f8fafc;
}

.privacy-card[b-28krfp8wlb] {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    height: 100%;
    border: 1px solid #edf2f7;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .3s;
}

    .privacy-card:hover[b-28krfp8wlb] {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(13,110,253,.15);
    }

.featured-card[b-28krfp8wlb] {
    border: 2px solid #0d6efd;
}

.privacy-icon[b-28krfp8wlb] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
}

.privacy-card h4[b-28krfp8wlb],
.privacy-card h5[b-28krfp8wlb] {
    font-weight: 700;
    margin-bottom: 1rem;
}

.privacy-card p[b-28krfp8wlb] {
    color: #6c757d;
    line-height: 1.7;
}

.privacy-list[b-28krfp8wlb] {
    margin-top: 1rem;
    padding-left: 1.2rem;
}

    .privacy-list li[b-28krfp8wlb] {
        margin-bottom: .6rem;
        color: #495057;
    }

/*==========================================================
    SECURITY
==========================================================*/

.privacy-security[b-28krfp8wlb] {
    padding: 5rem 0;
}

.security-card[b-28krfp8wlb] {
    background: #fff;
    border-radius: 28px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.07);
}

.security-feature[b-28krfp8wlb] {
    background: #f8fafc;
    border-radius: 20px;
    padding: 1.75rem;
    height: 100%;
    transition: .3s;
}

    .security-feature:hover[b-28krfp8wlb] {
        background: #fff;
        transform: translateY(-5px);
        box-shadow: 0 16px 40px rgba(13,110,253,.12);
    }

.security-icon[b-28krfp8wlb] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.security-feature h5[b-28krfp8wlb] {
    font-weight: 700;
    margin-bottom: .7rem;
}

.security-feature p[b-28krfp8wlb] {
    color: #6c757d;
    margin-bottom: 0;
}

/*==========================================================
    CTA
==========================================================*/

.privacy-cta-section[b-28krfp8wlb] {
    padding: 5rem 0 6rem;
}

.privacy-cta-card[b-28krfp8wlb] {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 4rem;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
}

    .privacy-cta-card[b-28krfp8wlb]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 40%);
        pointer-events: none;
    }

    .privacy-cta-card > *[b-28krfp8wlb] {
        position: relative;
        z-index: 2;
    }

    .privacy-cta-card .btn[b-28krfp8wlb] {
        border-radius: 12px;
        padding: .95rem 1.5rem;
        font-weight: 600;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:991px) {

    .privacy-hero[b-28krfp8wlb] {
        text-align: center;
        padding: 5rem 0;
    }

    .privacy-meta[b-28krfp8wlb] {
        justify-content: center;
    }

    .privacy-hero-card[b-28krfp8wlb] {
        margin-top: 2rem;
    }

    .security-card[b-28krfp8wlb],
    .privacy-cta-card[b-28krfp8wlb] {
        padding: 2rem;
    }
}

@media (max-width:768px) {

    .privacy-hero h1[b-28krfp8wlb] {
        font-size: 2.6rem;
    }

    .privacy-meta[b-28krfp8wlb] {
        flex-direction: column;
    }

    .privacy-meta-card[b-28krfp8wlb] {
        width: 100%;
    }

    .privacy-card[b-28krfp8wlb],
    .security-feature[b-28krfp8wlb],
    .security-card[b-28krfp8wlb],
    .privacy-cta-card[b-28krfp8wlb] {
        border-radius: 18px;
    }

        .privacy-cta-card .btn[b-28krfp8wlb] {
            width: 100%;
        }
}
/* /Components/Pages/Pro.razor.rz.scp.css */
.pro-page[b-ljh5dd46ys] {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #0f172a;
}

.pro-shell[b-ljh5dd46ys] {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    box-sizing: border-box;
}

.pro-eyebrow[b-ljh5dd46ys] {
    display: block;
    margin-bottom: 9px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.pro-section[b-ljh5dd46ys] {
    padding: 72px 0;
}

.pro-section-heading[b-ljh5dd46ys] {
    max-width: 760px;
}

.pro-section-heading-centered[b-ljh5dd46ys] {
    margin: 0 auto;
    text-align: center;
}

.pro-section-heading h2[b-ljh5dd46ys],
.pro-faq-heading h2[b-ljh5dd46ys],
.pro-final-cta-card h2[b-ljh5dd46ys] {
    margin: 0;
    color: #0f172a;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.pro-section-heading p[b-ljh5dd46ys],
.pro-faq-heading p[b-ljh5dd46ys] {
    margin: 16px 0 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.65;
}


/* ============================================================
   BUTTONS
============================================================ */

.pro-button[b-ljh5dd46ys] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

    .pro-button:hover[b-ljh5dd46ys] {
        transform: translateY(-1px);
    }

.pro-button-primary[b-ljh5dd46ys] {
    background: #2563eb;
    color: #ffffff;
}

    .pro-button-primary:hover[b-ljh5dd46ys] {
        background: #1d4ed8;
    }

.pro-button-secondary[b-ljh5dd46ys] {
    border-color: rgba(148, 163, 184, 0.36);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

    .pro-button-secondary:hover[b-ljh5dd46ys] {
        background: rgba(255, 255, 255, 0.1);
    }


/* ============================================================
   HERO
============================================================ */

.pro-hero[b-ljh5dd46ys] {
    position: relative;
    padding: 80px 0 76px;
    overflow: hidden;
    background: radial-gradient( circle at 78% 18%, rgba(37, 99, 235, 0.22), transparent 34% ), radial-gradient( circle at 12% 90%, rgba(59, 130, 246, 0.1), transparent 30% ), #081426;
}

.pro-hero-grid[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(470px, 1.08fr);
    gap: 64px;
    align-items: center;
}

.pro-hero-content h1[b-ljh5dd46ys] {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(45px, 5.6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.pro-hero-description[b-ljh5dd46ys] {
    max-width: 650px;
    margin: 22px 0 0;
    color: #a9b7ca;
    font-size: 16px;
    line-height: 1.65;
}

.pro-hero-actions[b-ljh5dd46ys] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.pro-hero-points[b-ljh5dd46ys] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
}

    .pro-hero-points span[b-ljh5dd46ys] {
        position: relative;
        padding-left: 15px;
    }

        .pro-hero-points span[b-ljh5dd46ys]::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #60a5fa;
            content: "";
            transform: translateY(-50%);
        }


/* ============================================================
   HERO PREVIEW
============================================================ */

.pro-hero-preview[b-ljh5dd46ys] {
    min-width: 0;
}

.pro-preview-window[b-ljh5dd46ys] {
    padding: 20px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 18px;
    background: rgba(15, 29, 51, 0.96);
    box-shadow: 0 34px 100px rgba(2, 8, 23, 0.58);
}

.pro-preview-window-header[b-ljh5dd46ys] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .pro-preview-window-header div > span[b-ljh5dd46ys],
    .pro-preview-window-header div > strong[b-ljh5dd46ys] {
        display: block;
    }

.pro-preview-kicker[b-ljh5dd46ys] {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.pro-preview-window-header strong[b-ljh5dd46ys] {
    margin-top: 5px;
    color: #ffffff;
    font-size: 21px;
}

.pro-live-badge[b-ljh5dd46ys] {
    flex-shrink: 0;
    padding: 6px 9px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    font-size: 9px;
    font-weight: 800;
}

.pro-preview-score-row[b-ljh5dd46ys] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.pro-preview-score[b-ljh5dd46ys],
.pro-preview-rank[b-ljh5dd46ys] {
    flex: 1 1 0;
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

    .pro-preview-score span[b-ljh5dd46ys],
    .pro-preview-score strong[b-ljh5dd46ys],
    .pro-preview-score small[b-ljh5dd46ys],
    .pro-preview-rank span[b-ljh5dd46ys],
    .pro-preview-rank strong[b-ljh5dd46ys],
    .pro-preview-rank small[b-ljh5dd46ys] {
        display: block;
    }

    .pro-preview-score span[b-ljh5dd46ys],
    .pro-preview-rank span[b-ljh5dd46ys] {
        color: #94a3b8;
        font-size: 9px;
        font-weight: 700;
    }

    .pro-preview-score strong[b-ljh5dd46ys],
    .pro-preview-rank strong[b-ljh5dd46ys] {
        margin-top: 5px;
        color: #ffffff;
        font-size: 27px;
    }

    .pro-preview-score small[b-ljh5dd46ys],
    .pro-preview-rank small[b-ljh5dd46ys] {
        margin-top: 3px;
        color: #60a5fa;
    }

.pro-preview-map[b-ljh5dd46ys] {
    position: relative;
    height: 205px;
    margin-top: 11px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 11px;
    background: radial-gradient( circle at 60% 40%, rgba(37, 99, 235, 0.14), transparent 34% ), #09182b;
}

.pro-map-shape[b-ljh5dd46ys] {
    position: absolute;
    top: 48%;
    left: 50%;
    width: 78%;
    height: 58%;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: linear-gradient( 135deg, rgba(30, 58, 138, 0.8), rgba(219, 234, 254, 0.3) 48%, rgba(153, 27, 27, 0.72) );
    clip-path: polygon( 2% 22%, 12% 12%, 27% 18%, 39% 12%, 55% 20%, 69% 14%, 83% 25%, 98% 30%, 93% 44%, 97% 56%, 85% 63%, 79% 78%, 63% 73%, 51% 84%, 38% 75%, 25% 82%, 13% 68%, 5% 54% );
    opacity: 0.9;
    transform: translate(-50%, -50%);
}

.pro-map-label[b-ljh5dd46ys] {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 2px solid #0f1d33;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(2, 8, 23, 0.4);
}

.pro-map-label-one[b-ljh5dd46ys] {
    top: 30%;
    left: 18%;
}

.pro-map-label-two[b-ljh5dd46ys] {
    top: 24%;
    left: 43%;
}

.pro-map-label-three[b-ljh5dd46ys] {
    top: 42%;
    left: 66%;
}

.pro-map-label-four[b-ljh5dd46ys] {
    top: 64%;
    left: 52%;
}

.pro-preview-metrics[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

    .pro-preview-metrics div[b-ljh5dd46ys] {
        min-width: 0;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
    }

    .pro-preview-metrics span[b-ljh5dd46ys],
    .pro-preview-metrics strong[b-ljh5dd46ys] {
        display: block;
    }

    .pro-preview-metrics span[b-ljh5dd46ys] {
        color: #64748b;
        font-size: 8px;
    }

    .pro-preview-metrics strong[b-ljh5dd46ys] {
        margin-top: 4px;
        overflow: hidden;
        color: #ffffff;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   CAPABILITIES
============================================================ */

.pro-value-intro[b-ljh5dd46ys] {
    background: #ffffff;
}

.pro-capability-grid[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 42px;
}

.pro-capability-card[b-ljh5dd46ys] {
    min-width: 0;
    min-height: 172px;
    padding: 21px;
    border: 1px solid #dbe3ef;
    border-top: 3px solid #2563eb;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
    box-sizing: border-box;
}

.pro-card-number[b-ljh5dd46ys] {
    color: #2563eb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.pro-capability-card h3[b-ljh5dd46ys] {
    margin: 12px 0 0;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.25;
}

.pro-capability-card p[b-ljh5dd46ys] {
    margin: 9px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   PRODUCT PREVIEW
============================================================ */

.pro-product-section[b-ljh5dd46ys] {
    background: #f1f5f9;
}

.pro-product-preview[b-ljh5dd46ys] {
    position: relative;
    margin-top: 38px;
    padding: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #081426;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
}

.pro-product-preview-label[b-ljh5dd46ys] {
    margin-bottom: 10px;
    color: #60a5fa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.pro-product-toolbar[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    padding-bottom: 14px;
}

.pro-toolbar-field[b-ljh5dd46ys] {
    padding: 11px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: #0f1d33;
}

    .pro-toolbar-field span[b-ljh5dd46ys],
    .pro-toolbar-field strong[b-ljh5dd46ys] {
        display: block;
    }

    .pro-toolbar-field span[b-ljh5dd46ys] {
        color: #64748b;
        font-size: 8px;
        font-weight: 800;
    }

    .pro-toolbar-field strong[b-ljh5dd46ys] {
        margin-top: 4px;
        color: #ffffff;
        font-size: 13px;
    }

.pro-toolbar-button[b-ljh5dd46ys] {
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
}

.pro-product-grid[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.7fr);
    gap: 12px;
}

.pro-product-map-panel[b-ljh5dd46ys],
.pro-ranking-panel[b-ljh5dd46ys] {
    min-width: 0;
    padding: 17px;
    border: 1px solid #dbe3ef;
    border-radius: 11px;
    background: #f8fafc;
}

.pro-panel-header[b-ljh5dd46ys] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

    .pro-panel-header div > span[b-ljh5dd46ys],
    .pro-panel-header div > strong[b-ljh5dd46ys] {
        display: block;
    }

    .pro-panel-header div > span[b-ljh5dd46ys] {
        color: #2563eb;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 0.09em;
    }

    .pro-panel-header div > strong[b-ljh5dd46ys] {
        margin-top: 4px;
        color: #0f172a;
        font-size: 15px;
    }

    .pro-panel-header small[b-ljh5dd46ys] {
        color: #64748b;
        font-size: 8px;
        font-weight: 800;
    }

.pro-fake-map[b-ljh5dd46ys] {
    position: relative;
    height: 305px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 9px;
    background: linear-gradient( 135deg, rgba(30, 58, 138, 0.15), rgba(248, 250, 252, 0.9) 48%, rgba(153, 27, 27, 0.16) ), #eef2f7;
}

    .pro-fake-map[b-ljh5dd46ys]::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 78%;
        height: 57%;
        border: 1px solid #94a3b8;
        background: linear-gradient( 135deg, #1e3a8a, #bfdbfe 38%, #f8fafc 50%, #fca5a5 66%, #991b1b );
        clip-path: polygon( 2% 22%, 12% 12%, 27% 18%, 39% 12%, 55% 20%, 69% 14%, 83% 25%, 98% 30%, 93% 44%, 97% 56%, 85% 63%, 79% 78%, 63% 73%, 51% 84%, 38% 75%, 25% 82%, 13% 68%, 5% 54% );
        content: "";
        transform: translate(-50%, -50%);
    }

.pro-market-point[b-ljh5dd46ys] {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
}

.point-one[b-ljh5dd46ys] {
    top: 28%;
    left: 19%;
}

.point-two[b-ljh5dd46ys] {
    top: 24%;
    left: 43%;
}

.point-three[b-ljh5dd46ys] {
    top: 41%;
    left: 66%;
}

.point-four[b-ljh5dd46ys] {
    top: 64%;
    left: 54%;
}

.point-five[b-ljh5dd46ys] {
    top: 55%;
    left: 80%;
}

.pro-ranking-list[b-ljh5dd46ys] {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

    .pro-ranking-list div[b-ljh5dd46ys] {
        display: grid;
        grid-template-columns: 25px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 11px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #ffffff;
    }

    .pro-ranking-list b[b-ljh5dd46ys] {
        color: #2563eb;
    }

    .pro-ranking-list span[b-ljh5dd46ys] {
        min-width: 0;
        overflow: hidden;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pro-ranking-list strong[b-ljh5dd46ys] {
        color: #0f172a;
        font-size: 12px;
    }


/* ============================================================
   HOW IT WORKS
============================================================ */

.pro-how-section[b-ljh5dd46ys] {
    background: #ffffff;
}

.pro-step-grid[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 40px;
}

.pro-step[b-ljh5dd46ys] {
    position: relative;
    min-height: 155px;
    padding: 20px;
    border-top: 3px solid #2563eb;
    background: #f8fafc;
    box-sizing: border-box;
}

    .pro-step > span[b-ljh5dd46ys] {
        color: #2563eb;
        font-size: 10px;
        font-weight: 900;
    }

    .pro-step h3[b-ljh5dd46ys] {
        margin: 12px 0 0;
        font-size: 17px;
    }

    .pro-step p[b-ljh5dd46ys] {
        margin: 9px 0 0;
        color: #64748b;
        font-size: 12px;
        line-height: 1.55;
    }


/* ============================================================
   PRICING
============================================================ */

.pro-pricing-section[b-ljh5dd46ys] {
    background: #081426;
}

    .pro-pricing-section .pro-section-heading h2[b-ljh5dd46ys] {
        color: #ffffff;
    }

    .pro-pricing-section .pro-section-heading p[b-ljh5dd46ys] {
        color: #94a3b8;
    }

.pro-pricing-card[b-ljh5dd46ys] {
    max-width: 820px;
    margin: 38px auto 0;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.32);
    border-radius: 16px;
    background: #0f1d33;
    box-shadow: 0 30px 90px rgba(2, 8, 23, 0.5);
}

.pro-pricing-top[b-ljh5dd46ys] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding: 27px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.pro-pricing-label[b-ljh5dd46ys] {
    color: #60a5fa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.pro-pricing-top h3[b-ljh5dd46ys] {
    max-width: 500px;
    margin: 9px 0 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.1;
}

.pro-pricing-top p[b-ljh5dd46ys] {
    margin: 9px 0 0;
    color: #94a3b8;
}

.pro-price[b-ljh5dd46ys] {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
    color: #ffffff;
}

    .pro-price span[b-ljh5dd46ys] {
        font-size: 21px;
    }

    .pro-price strong[b-ljh5dd46ys] {
        font-size: 50px;
        letter-spacing: -0.05em;
    }

    .pro-price small[b-ljh5dd46ys] {
        margin-left: 5px;
        color: #64748b;
    }

.pro-pricing-body[b-ljh5dd46ys] {
    padding: 27px;
}

.pro-pricing-features[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 26px;
}

    .pro-pricing-features span[b-ljh5dd46ys] {
        position: relative;
        padding-left: 20px;
        color: #cbd5e1;
        font-size: 13px;
    }

        .pro-pricing-features span[b-ljh5dd46ys]::before {
            position: absolute;
            top: 2px;
            left: 0;
            color: #60a5fa;
            content: "✓";
            font-weight: 900;
        }

.pro-pricing-button[b-ljh5dd46ys] {
    width: 100%;
    min-height: 52px;
    margin-top: 25px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

    .pro-pricing-button:hover[b-ljh5dd46ys] {
        background: #1d4ed8;
    }


/* ============================================================
   FAQ
============================================================ */

.pro-faq-section[b-ljh5dd46ys] {
    background: #f8fafc;
}

.pro-faq-layout[b-ljh5dd46ys] {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 72px;
    align-items: start;
}

.pro-faq-list[b-ljh5dd46ys] {
    display: grid;
    gap: 9px;
}

    .pro-faq-list details[b-ljh5dd46ys] {
        padding: 0 18px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
    }

    .pro-faq-list summary[b-ljh5dd46ys] {
        padding: 17px 0;
        color: #0f172a;
        font-weight: 800;
        cursor: pointer;
    }

    .pro-faq-list details p[b-ljh5dd46ys] {
        margin: 0;
        padding: 0 0 17px;
        color: #64748b;
        font-size: 13px;
        line-height: 1.65;
    }


/* ============================================================
   FINAL CTA
============================================================ */

.pro-final-cta[b-ljh5dd46ys] {
    padding: 72px 0 88px;
    background: #ffffff;
}

.pro-final-cta-card[b-ljh5dd46ys] {
    padding: 66px 36px;
    border: 1px solid #1e293b;
    border-radius: 18px;
    background: radial-gradient( circle at 80% 20%, rgba(37, 99, 235, 0.2), transparent 35% ), #081426;
    text-align: center;
}

    .pro-final-cta-card h2[b-ljh5dd46ys] {
        color: #ffffff;
    }

    .pro-final-cta-card p[b-ljh5dd46ys] {
        max-width: 650px;
        margin: 17px auto 27px;
        color: #94a3b8;
        font-size: 16px;
        line-height: 1.65;
    }


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1050px) {

    .pro-hero-grid[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .pro-hero-content[b-ljh5dd46ys] {
        max-width: 820px;
    }

    .pro-capability-grid[b-ljh5dd46ys] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pro-step-grid[b-ljh5dd46ys] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .pro-section[b-ljh5dd46ys] {
        padding: 62px 0;
    }

    .pro-product-grid[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
    }

    .pro-faq-layout[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}


@media (max-width: 650px) {

    .pro-shell[b-ljh5dd46ys] {
        width: min(100% - 28px, 1180px);
    }

    .pro-hero[b-ljh5dd46ys] {
        padding: 62px 0;
    }

    .pro-hero-content h1[b-ljh5dd46ys] {
        font-size: clamp(40px, 12vw, 58px);
    }

    .pro-hero-actions[b-ljh5dd46ys] {
        flex-direction: column;
    }

    .pro-button[b-ljh5dd46ys] {
        width: 100%;
        box-sizing: border-box;
    }

    .pro-preview-window[b-ljh5dd46ys] {
        padding: 14px;
    }

    .pro-preview-window-header[b-ljh5dd46ys] {
        flex-direction: column;
    }

    .pro-preview-score-row[b-ljh5dd46ys] {
        flex-direction: column;
    }

    .pro-preview-metrics[b-ljh5dd46ys] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pro-capability-grid[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
    }

    .pro-product-toolbar[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
    }

    .pro-fake-map[b-ljh5dd46ys] {
        height: 260px;
    }

    .pro-step-grid[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
    }

    .pro-pricing-top[b-ljh5dd46ys] {
        flex-direction: column;
        gap: 22px;
    }

    .pro-pricing-features[b-ljh5dd46ys] {
        grid-template-columns: 1fr;
    }

    .pro-final-cta[b-ljh5dd46ys] {
        padding-bottom: 72px;
    }

    .pro-final-cta-card[b-ljh5dd46ys] {
        padding: 52px 20px;
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.auth-page[b-6nrdtmnrkq] {
    min-height: 100vh;
    background: #f5f8fd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-shell[b-6nrdtmnrkq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1150px;
    width: 100%;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

.auth-brand-panel[b-6nrdtmnrkq] {
    background: linear-gradient(135deg,#17366f,#3568f5);
    color: #fff;
    padding: 3rem;
}

.auth-logo[b-6nrdtmnrkq] {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 800;
}

.auth-brand-copy h1[b-6nrdtmnrkq] {
    font-size: 3rem;
    margin-top: 3rem;
}

.auth-benefits[b-6nrdtmnrkq] {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.12);
}

.auth-benefit[b-6nrdtmnrkq] {
    background: rgba(255,255,255,.1);
    padding: 1rem;
    border-radius: 14px;
}

.auth-form-panel[b-6nrdtmnrkq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.auth-form-container[b-6nrdtmnrkq] {
    max-width: 500px;
    margin: 0 auto;
}

.auth-field[b-6nrdtmnrkq] {
    margin-bottom: 26px;
}

    .auth-field label[b-6nrdtmnrkq] {
        font-size: .82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #667085;
        margin-bottom: .55rem;
    }

.auth-input[b-6nrdtmnrkq] {
    width: 100%;
    height: 58px;
    border: 1px solid #d9e1ef;
    border-radius: 14px;
    padding: .75rem 1rem .75rem 3rem;
    font-size: 1rem;
    box-sizing: border-box;
}

.auth-submit-button[b-6nrdtmnrkq] {
    width: 100%;
    min-height: 54px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg,#4f7cff,#2347d8);
    color: #fff;
    font-weight: 800;
    margin-top: 1rem;
}

.auth-alert[b-6nrdtmnrkq] {
    margin-top: 1rem;
    color: #b42318;
    background: #fff5f5;
    border: 1px solid #fecaca;
    padding: .75rem;
    border-radius: 10px;
}

@media(max-width:991px) {
    .auth-shell[b-6nrdtmnrkq] {
        grid-template-columns: 1fr
    }

    .auth-brand-panel[b-6nrdtmnrkq] {
        display: none
    }
    .auth-card[b-6nrdtmnrkq] {
        background: white;
        border: 1px solid #e6edf6;
        border-radius: 18px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .free-account-box[b-6nrdtmnrkq] {
        margin-top: 2rem;
        padding: 1.5rem;
        border-radius: 18px;
        background: linear-gradient(180deg,#fbfcff,#f3f7ff);
        border: 1px solid #e3ebfb;
    }

        .free-account-box h5[b-6nrdtmnrkq] {
            font-weight: 800;
            color: #183153;
            margin-bottom: 1rem;
        }

        .free-account-box ul[b-6nrdtmnrkq] {
            margin: 0;
            padding-left: 1.2rem;
            line-height: 2;
            color: #475467;
        }
        
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/* CSS for ForgotPassword component */
/* ==========================================================
   CAREERGPS LOGIN
   ========================================================== */

.auth-page[b-uqwsi4s1my] {
    min-height: calc(100vh - 1px);
    padding: 2rem;
    background: radial-gradient(circle at 10% 10%, rgba(79, 124, 255, .12), transparent 30%), radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .10), transparent 32%), #f5f8fd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-shell[b-uqwsi4s1my] {
    width: min(1180px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    overflow: hidden;
    border: 1px solid rgba(214, 224, 239, .9);
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
}

/* ==========================================================
   BRAND PANEL
   ========================================================== */

.auth-brand-panel[b-uqwsi4s1my] {
    position: relative;
    overflow: hidden;
    padding: 3.25rem;
    background: linear-gradient(145deg, rgba(15, 39, 95, .98), rgba(34, 75, 190, .97)), #17366f;
    color: #ffffff;
}

.auth-brand-content[b-uqwsi4s1my] {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.auth-logo[b-uqwsi4s1my] {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    width: fit-content;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 850;
    text-decoration: none;
    letter-spacing: -.02em;
}

    .auth-logo:hover[b-uqwsi4s1my] {
        color: inherit;
    }

.auth-logo-icon[b-uqwsi4s1my] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.auth-brand-copy[b-uqwsi4s1my] {
    max-width: 560px;
    margin-top: 6rem;
}

.auth-eyebrow[b-uqwsi4s1my],
.auth-heading-kicker[b-uqwsi4s1my] {
    display: inline-block;
    margin-bottom: .8rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-eyebrow[b-uqwsi4s1my] {
    color: #bcd0ff;
}

.auth-brand-copy h1[b-uqwsi4s1my] {
    max-width: 510px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 4vw, 4.15rem);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: -.045em;
}

.auth-brand-copy p[b-uqwsi4s1my] {
    max-width: 510px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    line-height: 1.75;
}

.auth-benefits[b-uqwsi4s1my] {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
}

.auth-benefit[b-uqwsi4s1my] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 17px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.auth-benefit-icon[b-uqwsi4s1my] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 1.05rem;
}

.auth-benefit div[b-uqwsi4s1my] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.auth-benefit strong[b-uqwsi4s1my] {
    font-size: .92rem;
    font-weight: 750;
}

.auth-benefit span[b-uqwsi4s1my] {
    color: rgba(255, 255, 255, .68);
    font-size: .8rem;
}

.auth-brand-footer[b-uqwsi4s1my] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, .62);
    font-size: .79rem;
}

.auth-decoration[b-uqwsi4s1my] {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.auth-decoration-one[b-uqwsi4s1my] {
    right: -160px;
    bottom: -190px;
    width: 440px;
    height: 440px;
    border: 70px solid rgba(255, 255, 255, .045);
}

.auth-decoration-two[b-uqwsi4s1my] {
    top: 80px;
    right: -75px;
    width: 210px;
    height: 210px;
    background: rgba(118, 153, 255, .12);
    filter: blur(2px);
}

/* ==========================================================
   FORM PANEL
   ========================================================== */

.auth-form-panel[b-uqwsi4s1my] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    background: #ffffff;
}

.auth-form-container[b-uqwsi4s1my] {
    width: min(430px, 100%);
}

.auth-mobile-logo[b-uqwsi4s1my] {
    display: none;
    margin-bottom: 2.5rem;
    color: #17366f;
}

.auth-heading[b-uqwsi4s1my] {
    margin-bottom: 2rem;
}

.auth-heading-kicker[b-uqwsi4s1my] {
    color: #3568f5;
}

.auth-heading h2[b-uqwsi4s1my] {
    margin: 0 0 .65rem;
    color: #172b4d;
    font-size: 2.15rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.auth-heading p[b-uqwsi4s1my] {
    margin: 0;
    color: #667085;
    font-size: .95rem;
    line-height: 1.65;
}

.auth-alert[b-uqwsi4s1my] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding: .95rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff7f7;
    color: #b42318;
    font-size: .86rem;
    line-height: 1.5;
}

.auth-alert-icon[b-uqwsi4s1my] {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.auth-field[b-uqwsi4s1my] {
    margin-bottom: 1.25rem;
}

    .auth-field label[b-uqwsi4s1my],
    .auth-label-row label[b-uqwsi4s1my] {
        margin-bottom: .5rem;
        color: #344054;
        font-size: .82rem;
        font-weight: 750;
    }

.auth-label-row[b-uqwsi4s1my] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-input-wrapper[b-uqwsi4s1my] {
    position: relative;
}

.auth-input-icon[b-uqwsi4s1my] {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 1;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input[b-uqwsi4s1my] {
    width: 100%;
    min-height: 52px;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #172b4d;
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.auth-password-input[b-uqwsi4s1my] {
    padding-right: 3rem;
}

.auth-input[b-uqwsi4s1my]::placeholder {
    color: #a6afbd;
}

.auth-input:hover[b-uqwsi4s1my] {
    border-color: #b9c5d7;
}

.auth-input:focus[b-uqwsi4s1my] {
    border-color: #4f7cff;
    box-shadow: 0 0 0 4px rgba(79, 124, 255, .12);
}

.auth-password-toggle[b-uqwsi4s1my] {
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    transform: translateY(-50%);
}

    .auth-password-toggle:hover[b-uqwsi4s1my] {
        background: #f2f5fa;
        color: #3568f5;
    }

.auth-text-link[b-uqwsi4s1my] {
    color: #3568f5;
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
}

    .auth-text-link:hover[b-uqwsi4s1my] {
        color: #2347d8;
        text-decoration: underline;
    }

.auth-options[b-uqwsi4s1my] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .2rem 0 1.5rem;
}

.auth-checkbox[b-uqwsi4s1my] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #475467;
    font-size: .82rem;
    cursor: pointer;
}

    .auth-checkbox input[b-uqwsi4s1my] {
        width: 17px;
        height: 17px;
        accent-color: #3568f5;
    }

.auth-submit-button[b-uqwsi4s1my],
.auth-secondary-button[b-uqwsi4s1my] {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.auth-submit-button[b-uqwsi4s1my] {
    border: 0;
    background: linear-gradient(135deg, #4f7cff, #2347d8);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(54, 96, 230, .25);
}

    .auth-submit-button:hover:not(:disabled)[b-uqwsi4s1my] {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(54, 96, 230, .32);
    }

    .auth-submit-button:disabled[b-uqwsi4s1my] {
        cursor: wait;
        opacity: .72;
    }

.auth-secondary-button[b-uqwsi4s1my] {
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #344054;
}

    .auth-secondary-button:hover[b-uqwsi4s1my] {
        border-color: #aebcd0;
        background: #f8faff;
        color: #2347d8;
        transform: translateY(-1px);
    }

.auth-divider[b-uqwsi4s1my] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.7rem 0;
    color: #98a2b3;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}

    .auth-divider[b-uqwsi4s1my]::before,
    .auth-divider[b-uqwsi4s1my]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e7ecf3;
    }

.auth-legal[b-uqwsi4s1my] {
    margin: 1.5rem 0 0;
    color: #98a2b3;
    font-size: .71rem;
    line-height: 1.6;
    text-align: center;
}

    .auth-legal a[b-uqwsi4s1my] {
        color: #667085;
        font-weight: 650;
        text-decoration: none;
    }

        .auth-legal a:hover[b-uqwsi4s1my] {
            color: #3568f5;
            text-decoration: underline;
        }

/* Blazor validation */

.validation-message[b-uqwsi4s1my] {
    display: block;
    margin-top: .4rem;
    color: #d92d20;
    font-size: .74rem;
}

.invalid[b-uqwsi4s1my] {
    border-color: #f04438;
}

    .invalid:focus[b-uqwsi4s1my] {
        border-color: #f04438;
        box-shadow: 0 0 0 4px rgba(240, 68, 56, .10);
    }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    .auth-page[b-uqwsi4s1my] {
        padding: 1.25rem;
    }

    .auth-shell[b-uqwsi4s1my] {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .auth-brand-panel[b-uqwsi4s1my] {
        display: none;
    }

    .auth-form-panel[b-uqwsi4s1my] {
        min-height: calc(100vh - 2.5rem);
        padding: 3rem 2rem;
    }

    .auth-mobile-logo[b-uqwsi4s1my] {
        display: block;
    }
}

@media (max-width: 575px) {

    .auth-page[b-uqwsi4s1my] {
        padding: 0;
        background: #ffffff;
    }

    .auth-shell[b-uqwsi4s1my] {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-form-panel[b-uqwsi4s1my] {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        align-items: flex-start;
    }

    .auth-form-container[b-uqwsi4s1my] {
        padding-top: 1rem;
    }

    .auth-heading h2[b-uqwsi4s1my] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/*==========================================================
    TERMS OF SERVICE PAGE
==========================================================*/

.terms-hero[b-pyjltbtbjg] {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
    background: linear-gradient(135deg,#0d6efd 0%,#2563eb 45%,#4f46e5 100%);
    color: #fff;
}

    .terms-hero[b-pyjltbtbjg]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 42%);
        pointer-events: none;
    }

    .terms-hero > *[b-pyjltbtbjg] {
        position: relative;
        z-index: 2;
    }

.terms-badge[b-pyjltbtbjg] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.terms-hero h1 span[b-pyjltbtbjg] {
    color: #b9dbff;
}

.terms-hero p[b-pyjltbtbjg] {
    color: rgba(255,255,255,.9);
}

.terms-meta[b-pyjltbtbjg] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.terms-meta-card[b-pyjltbtbjg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 1rem 1.35rem;
    backdrop-filter: blur(10px);
}

    .terms-meta-card i[b-pyjltbtbjg] {
        font-size: 1.5rem;
    }

    .terms-meta-card small[b-pyjltbtbjg] {
        display: block;
        font-size: .72rem;
        letter-spacing: .08em;
        opacity: .8;
    }

    .terms-meta-card strong[b-pyjltbtbjg] {
        display: block;
        font-size: .95rem;
    }

.terms-hero-card[b-pyjltbtbjg] {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(18px);
}

.terms-highlight + .terms-highlight[b-pyjltbtbjg] {
    margin-top: 2rem;
}

.terms-highlight i[b-pyjltbtbjg] {
    font-size: 2rem;
    margin-bottom: .8rem;
}

.terms-highlight h4[b-pyjltbtbjg] {
    color: #fff;
}

.terms-highlight p[b-pyjltbtbjg] {
    color: rgba(255,255,255,.85);
    margin-bottom: 0;
}

/*==========================================================
    COMMON
==========================================================*/

.section-badge[b-pyjltbtbjg] {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-description[b-pyjltbtbjg] {
    max-width: 760px;
    margin: 1rem auto 0;
    color: #6c757d;
}

/*==========================================================
    CARDS
==========================================================*/

.terms-overview[b-pyjltbtbjg],
.terms-use[b-pyjltbtbjg],
.terms-updates[b-pyjltbtbjg] {
    background: #f8fafc;
}

.terms-card[b-pyjltbtbjg] {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    height: 100%;
    border: 1px solid #edf2f7;
    box-shadow: 0 18px 45px rgba(0,0,0,.06);
    transition: .3s;
}

    .terms-card:hover[b-pyjltbtbjg] {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(13,110,253,.15);
    }

.featured-card[b-pyjltbtbjg] {
    border: 2px solid #0d6efd;
}

.terms-icon[b-pyjltbtbjg] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
}

.terms-card h4[b-pyjltbtbjg],
.terms-card h5[b-pyjltbtbjg] {
    font-weight: 700;
    margin-bottom: 1rem;
}

.terms-card p[b-pyjltbtbjg] {
    color: #6c757d;
    line-height: 1.7;
}

/*==========================================================
    LISTS
==========================================================*/

.terms-list[b-pyjltbtbjg] {
    padding-left: 1.2rem;
    margin: 1rem 0 0;
}

    .terms-list li[b-pyjltbtbjg] {
        margin-bottom: .8rem;
        color: #495057;
        line-height: 1.6;
    }

/*==========================================================
    RESPONSIBILITY
==========================================================*/

.terms-responsibilities[b-pyjltbtbjg] {
    padding: 5rem 0;
}

.responsibility-card[b-pyjltbtbjg] {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 16px 45px rgba(0,0,0,.05);
    transition: .3s;
}

    .responsibility-card:hover[b-pyjltbtbjg] {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(13,110,253,.14);
    }

.responsibility-icon[b-pyjltbtbjg] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.responsibility-card h5[b-pyjltbtbjg] {
    font-weight: 700;
    margin-bottom: .6rem;
}

.responsibility-card p[b-pyjltbtbjg] {
    margin-bottom: 0;
    color: #6c757d;
}

/*==========================================================
    PROPERTY
==========================================================*/

.terms-property[b-pyjltbtbjg] {
    background: #fff;
}

.property-card[b-pyjltbtbjg] {
    background: linear-gradient(135deg,#ffffff,#f8fbff);
    border-radius: 28px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.06);
}

.property-icon[b-pyjltbtbjg] {
    width: 120px;
    height: 120px;
    margin: auto;
    border-radius: 30px;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}

/*==========================================================
    DISCLAIMER
==========================================================*/

.terms-disclaimer[b-pyjltbtbjg] {
    background: #f8fafc;
}

/*==========================================================
    LIABILITY
==========================================================*/

.terms-liability[b-pyjltbtbjg] {
    padding: 5rem 0;
}

.liability-card[b-pyjltbtbjg] {
    background: #fff;
    border-radius: 28px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.06);
}

    .liability-card p[b-pyjltbtbjg] {
        color: #6c757d;
    }

/*==========================================================
    CTA
==========================================================*/

.terms-cta-section[b-pyjltbtbjg] {
    padding: 5rem 0 6rem;
}

.terms-cta-card[b-pyjltbtbjg] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#0d6efd,#4f46e5);
    border-radius: 30px;
    padding: 4rem;
}

    .terms-cta-card[b-pyjltbtbjg]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 40%);
        pointer-events: none;
    }

    .terms-cta-card > *[b-pyjltbtbjg] {
        position: relative;
        z-index: 2;
    }

    .terms-cta-card .btn[b-pyjltbtbjg] {
        border-radius: 12px;
        font-weight: 600;
        padding: .95rem 1.6rem;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:991px) {

    .terms-hero[b-pyjltbtbjg] {
        text-align: center;
        padding: 5rem 0;
    }

    .terms-meta[b-pyjltbtbjg] {
        justify-content: center;
    }

    .terms-hero-card[b-pyjltbtbjg] {
        margin-top: 2rem;
    }

    .property-card[b-pyjltbtbjg],
    .liability-card[b-pyjltbtbjg],
    .terms-cta-card[b-pyjltbtbjg] {
        padding: 2rem;
    }
}

@media (max-width:768px) {

    .terms-hero h1[b-pyjltbtbjg] {
        font-size: 2.6rem;
    }

    .terms-meta[b-pyjltbtbjg] {
        flex-direction: column;
    }

    .terms-meta-card[b-pyjltbtbjg] {
        width: 100%;
    }

    .terms-card[b-pyjltbtbjg],
    .responsibility-card[b-pyjltbtbjg],
    .property-card[b-pyjltbtbjg],
    .liability-card[b-pyjltbtbjg],
    .terms-cta-card[b-pyjltbtbjg] {
        border-radius: 18px;
    }

        .terms-cta-card .btn[b-pyjltbtbjg] {
            width: 100%;
        }
}
/* /Components/Pages/Test.razor.rz.scp.css */
.box[b-4vh1o5ahb2] {
    background: red;
    color: white;
    padding: 50px;
}
/* /Components/Shared/CareerProTeaser.razor.rz.scp.css */
/* ==========================================================================
   CAREER-SPECIFIC INTELLIGENCE
   ========================================================================== */

.career-pro-teaser[b-82qc6xxuxo] {
    width: min(1180px, calc(100% - 48px));
    margin: 6rem auto 0;
    box-sizing: border-box;
}


/* ==========================================================================
   ENTRY PANEL
   ========================================================================== */

.career-teaser-entry[b-82qc6xxuxo] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
    gap: 3rem;
    align-items: center;
    padding: 3.5rem;
    overflow: visible;
    border: 1px solid #dce6f2;
    border-radius: 26px;
    background: radial-gradient( circle at 95% 10%, rgba(37, 99, 235, 0.11), transparent 32% ), radial-gradient( circle at 5% 100%, rgba(124, 58, 237, 0.055), transparent 28% ), #ffffff;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.085);
}


.career-teaser-entry-content[b-82qc6xxuxo] {
    min-width: 0;
}


.career-teaser-eyebrow[b-82qc6xxuxo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #1769ff;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


    .career-teaser-eyebrow i[b-82qc6xxuxo] {
        font-size: 0.8rem;
    }


.career-teaser-entry h2[b-82qc6xxuxo] {
    max-width: 660px;
    margin: 0;
    color: #14213d;
    font-size: clamp(2.3rem, 4vw, 3.55rem);
    font-weight: 850;
    line-height: 1.03;
    letter-spacing: -0.045em;
}


    .career-teaser-entry h2 span[b-82qc6xxuxo] {
        color: #1769ff;
    }


.career-teaser-entry-content > p[b-82qc6xxuxo] {
    max-width: 680px;
    margin: 1rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.career-search-panel[b-82qc6xxuxo] {
    width: min(680px, 100%);
    margin-top: 1.75rem;
}


    .career-search-panel label[b-82qc6xxuxo] {
        display: block;
        margin-bottom: 0.55rem;
        color: #334155;
        font-size: 0.7rem;
        font-weight: 800;
    }


.career-search-wrapper[b-82qc6xxuxo] {
    position: relative;
    z-index: 50;
}


.career-search-icon[b-82qc6xxuxo] {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1769ff;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}


.career-search-input[b-82qc6xxuxo] {
    width: 100%;
    min-height: 58px;
    padding: 0 3.25rem 0 3rem;
    border: 1px solid #d5dfeb;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #14213d;
    font: inherit;
    font-size: 0.87rem;
    box-sizing: border-box;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}


    .career-search-input[b-82qc6xxuxo]::placeholder {
        color: #9aa7b8;
    }


    .career-search-input:focus[b-82qc6xxuxo] {
        border-color: #1769ff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10), 0 12px 30px rgba(15, 23, 42, 0.075);
    }


.career-search-action[b-82qc6xxuxo] {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #1769ff;
    color: #ffffff;
    font-size: 0.85rem;
    transform: translateY(-50%);
    pointer-events: none;
}


/* ==========================================================================
   AUTOCOMPLETE
   ========================================================================== */

.career-search-results[b-82qc6xxuxo] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 100;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16);
}


.career-search-result[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    color: #14213d;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}


    .career-search-result:last-child[b-82qc6xxuxo] {
        border-bottom: 0;
    }


    .career-search-result:hover[b-82qc6xxuxo] {
        background: #f5f8ff;
    }


.career-result-main[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.75rem;
}


.career-result-icon[b-82qc6xxuxo] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #edf4ff;
    color: #1769ff;
    font-size: 0.85rem;
}


.career-result-title[b-82qc6xxuxo] {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.career-result-meta[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.7rem;
    color: #a1adbd;
}


    .career-result-meta small[b-82qc6xxuxo] {
        font-size: 0.68rem;
    }


    .career-result-meta i[b-82qc6xxuxo] {
        color: #1769ff;
        font-size: 0.75rem;
    }


.career-no-results[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    color: #64748b;
    font-size: 0.8rem;
}


/* ==========================================================================
   SEARCH HELPER
   ========================================================================== */

.career-search-helper[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
    color: #8a98aa;
    font-size: 0.68rem;
}


    .career-search-helper i[b-82qc6xxuxo] {
        color: #1769ff;
    }


/* ==========================================================================
   ENTRY STATS
   ========================================================================== */

.career-teaser-entry-stats[b-82qc6xxuxo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}


.career-entry-stat[b-82qc6xxuxo] {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
}


    .career-entry-stat strong[b-82qc6xxuxo] {
        display: block;
        color: #1769ff;
        font-size: 1.55rem;
        font-weight: 850;
        line-height: 1;
        letter-spacing: -0.035em;
    }


    .career-entry-stat span[b-82qc6xxuxo] {
        display: block;
        margin-top: 0.45rem;
        color: #718095;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 1.25;
    }


/* ==========================================================================
   STATUS
   ========================================================================== */

.career-status[b-82qc6xxuxo],
.career-error[b-82qc6xxuxo] {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
}


.career-status[b-82qc6xxuxo] {
    background: #f1f5f9;
    color: #475569;
}


.career-error[b-82qc6xxuxo] {
    background: #fef2f2;
    color: #b91c1c;
}


/* ==========================================================================
   ENTRY RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .career-teaser-entry[b-82qc6xxuxo] {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem;
    }


    .career-teaser-entry-stats[b-82qc6xxuxo] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 600px) {

    .career-pro-teaser[b-82qc6xxuxo] {
        width: min(100% - 28px, 1180px);
        margin-top: 4rem;
    }


    .career-teaser-entry[b-82qc6xxuxo] {
        padding: 1.5rem;
        border-radius: 20px;
    }


        .career-teaser-entry h2[b-82qc6xxuxo] {
            font-size: 2.2rem;
        }


    .career-teaser-entry-stats[b-82qc6xxuxo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .career-search-input[b-82qc6xxuxo] {
        min-height: 54px;
        padding-right: 2.9rem;
        padding-left: 2.7rem;
        font-size: 0.78rem;
    }
}


/* ============================================================
   PREVIEW SECTION
============================================================ */

.career-preview-section[b-82qc6xxuxo] {
    margin-top: 38px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #1e293b;
    border-radius: 18px;
    background: radial-gradient( circle at 15% 0%, rgba(37, 99, 235, 0.15), transparent 35% ), #081426;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14);
}

.career-preview-header[b-82qc6xxuxo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 24px;
}

    .career-preview-header > div[b-82qc6xxuxo] {
        max-width: 760px;
    }

    .career-preview-header h3[b-82qc6xxuxo] {
        margin: 0;
        color: #ffffff;
        font-size: clamp(25px, 3vw, 38px);
        line-height: 1.08;
        letter-spacing: -0.025em;
    }

    .career-preview-header p[b-82qc6xxuxo] {
        margin: 12px 0 0;
        color: #94a3b8;
        line-height: 1.6;
    }

.career-preview-status[b-82qc6xxuxo] {
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.career-map-status[b-82qc6xxuxo] {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}


/* ============================================================
   TWO-COLUMN LAYOUT
============================================================ */

.career-preview-grid[b-82qc6xxuxo] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.8fr);
    gap: 18px;
    align-items: stretch;
}


/* ============================================================
   MAP PANEL
============================================================ */

.career-map-panel[b-82qc6xxuxo] {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 13px;
    background: #f8fafc;
}

.career-map-title-row[b-82qc6xxuxo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

    .career-map-title-row div > span[b-82qc6xxuxo],
    .career-map-title-row div > strong[b-82qc6xxuxo] {
        display: block;
    }

    .career-map-title-row div > span[b-82qc6xxuxo] {
        color: #2563eb;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.09em;
    }

    .career-map-title-row div > strong[b-82qc6xxuxo] {
        margin-top: 3px;
        color: #0f172a;
        font-size: 15px;
    }

.career-map-pro-label[b-82qc6xxuxo] {
    padding: 5px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
}


/* ============================================================
   MAP STAGE
============================================================ */

.career-map-stage[b-82qc6xxuxo] {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 430px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #eef2f7;
}

.career-map-svg-container[b-82qc6xxuxo] {
    position: absolute;
    inset: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .career-map-svg-container[b-82qc6xxuxo]  svg {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }

    .career-map-svg-container[b-82qc6xxuxo]  .career-pro-preview-state {
        stroke: #64748b;
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }


/* ============================================================
   LOCKED PREVIEW SHADE
============================================================ */

.career-map-preview-shade[b-82qc6xxuxo] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.12);
}


/* ============================================================
   LOCK CARD
============================================================ */

.career-map-lock-card[b-82qc6xxuxo] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: min(390px, calc(100% - 44px));
    padding: 24px;
    border: 1px solid rgba(96, 165, 250, 0.48);
    border-radius: 14px;
    background: rgba(8, 20, 38, 0.95);
    box-shadow: 0 24px 70px rgba(2, 8, 23, 0.52);
    color: #ffffff;
    text-align: center;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.career-lock-icon[b-82qc6xxuxo] {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
}

.career-lock-eyebrow[b-82qc6xxuxo] {
    display: block;
    margin-bottom: 7px;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.career-map-lock-card > strong[b-82qc6xxuxo] {
    display: block;
    font-size: 22px;
    line-height: 1.2;
}

.career-map-lock-card p[b-82qc6xxuxo] {
    margin: 10px 0 0;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}

.career-map-lock-card .career-lock-secondary[b-82qc6xxuxo] {
    color: #94a3b8;
    font-size: 11px;
}

.career-map-unlock-button[b-82qc6xxuxo] {
    width: 100%;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

    .career-map-unlock-button:hover[b-82qc6xxuxo] {
        background: #1d4ed8;
    }


/* ============================================================
   MAP LEGEND

   LEFT   = LOWER OPPORTUNITY  = DARK BLUE
   CENTER = MIDDLE OPPORTUNITY = LIGHT NEUTRAL
   RIGHT  = HIGHER OPPORTUNITY = DARK RED

   This matches the JavaScript map scale:
   percentile 0.00 = blue
   percentile 1.00 = red
============================================================ */

.career-map-footer[b-82qc6xxuxo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
}

.career-map-gradient[b-82qc6xxuxo] {
    width: min(230px, 48%);
    height: 7px;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient( to right, #1e3a8a 0%, #2563eb 20%, #93c5fd 40%, #f1f5f9 50%, #fca5a5 60%, #dc2626 80%, #991b1b 100% ) !important;
}


/* ============================================================
   PRO PANEL
============================================================ */

.career-pro-panel[b-82qc6xxuxo] {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 13px;
    background: #0f1d33;
    color: #ffffff;
    box-sizing: border-box;
}

.career-pro-panel-eyebrow[b-82qc6xxuxo] {
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.career-pro-panel h3[b-82qc6xxuxo] {
    margin: 10px 0 10px;
    font-size: 24px;
    line-height: 1.14;
}

.career-pro-panel-description[b-82qc6xxuxo] {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
}

.career-stat-grid[b-82qc6xxuxo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.career-stat[b-82qc6xxuxo] {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

    .career-stat strong[b-82qc6xxuxo],
    .career-stat span[b-82qc6xxuxo] {
        display: block;
    }

    .career-stat strong[b-82qc6xxuxo] {
        color: #ffffff;
        font-size: 17px;
    }

    .career-stat span[b-82qc6xxuxo] {
        margin-top: 4px;
        color: #94a3b8;
        font-size: 9px;
    }

.career-feature-list[b-82qc6xxuxo] {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

    .career-feature-list div[b-82qc6xxuxo] {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 7px;
        align-items: start;
        color: #cbd5e1;
        font-size: 11px;
        line-height: 1.4;
    }

        .career-feature-list div > span[b-82qc6xxuxo] {
            color: #60a5fa;
            font-weight: 900;
        }

.career-pro-button[b-82qc6xxuxo] {
    width: 100%;
    min-height: 46px;
    margin-top: 22px;
    border: 0;
    border-radius: 7px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

    .career-pro-button:hover[b-82qc6xxuxo] {
        background: #1d4ed8;
    }

.career-pro-note[b-82qc6xxuxo] {
    display: block;
    margin-top: 9px;
    color: #64748b;
    text-align: center;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    .career-preview-grid[b-82qc6xxuxo] {
        grid-template-columns: 1fr;
    }

    .career-map-stage[b-82qc6xxuxo] {
        height: 390px;
    }

    .career-pro-panel[b-82qc6xxuxo] {
        padding: 22px;
    }
}


@media (max-width: 600px) {

    .career-pro-teaser[b-82qc6xxuxo] {
        width: min(100% - 28px, 1180px);
        margin-top: 44px;
    }

    .career-preview-section[b-82qc6xxuxo] {
        padding: 18px;
    }

    .career-preview-header[b-82qc6xxuxo] {
        flex-direction: column;
    }

    .career-map-panel[b-82qc6xxuxo] {
        padding: 12px;
    }

    .career-map-stage[b-82qc6xxuxo] {
        height: 330px;
    }

    .career-map-svg-container[b-82qc6xxuxo] {
        inset: 8px;
    }

    .career-map-lock-card[b-82qc6xxuxo] {
        width: calc(100% - 24px);
        padding: 18px;
    }

        .career-map-lock-card > strong[b-82qc6xxuxo] {
            font-size: 19px;
        }

    .career-map-footer[b-82qc6xxuxo] {
        gap: 5px;
    }

    .career-stat-grid[b-82qc6xxuxo] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Shared/ProCapabilities.razor.rz.scp.css */
@page
"/"

<PageTitle > CareerGPS | Find Better Career Opportunities</PageTitle >


<OpportunityMap @rendermode="InteractiveServer" / >


<CareerProTeaser @rendermode="InteractiveServer" / >


<ProCapabilities @rendermode="InteractiveServer" / >


<div class="home-page" >

<section class="hero-section" >

<div class="hero-content" >

<span class="hero-eyebrow" >
CAREER INTELLIGENCE FOR BETTER DECISIONS
</span >


<h1 >
Make Smarter Career Decisions
With Better Market Data
</h1 >


<p class="hero-description" >
CareerGPS brings together career[b-jt9memh4xv], salary[b-jt9memh4xv], employment[b-jt9memh4xv],
growth[b-jt9memh4xv], and labor-market data to help you understand
opportunity across the United States.
</p >


<div class="hero-actions" >

<a class="primary-action"
href="#career-opportunity" >

Explore Career Opportunity

</a >


<a class="secondary-action"
href="/pro" >

Explore CareerGPS Pro

</a >

</div >

</div >

</section >


<section id="career-opportunity"
class="home-section" >

<div class="section-heading" >

<span class="section-eyebrow" >
EXPLORE THE DATA
</span >


<h2 >
Understand Opportunity From Multiple Angles
</h2 >


<p >
CareerGPS combines geography[b-jt9memh4xv], career[b-jt9memh4xv], labor-market[b-jt9memh4xv],
salary[b-jt9memh4xv], employment[b-jt9memh4xv], growth[b-jt9memh4xv], and momentum data to help
you evaluate markets more intelligently.
</p >

</div >


<div class="feature-grid" >

<article class="feature-card" >

<span class="feature-number" >
01
</span >


<h3 >
Compare Careers
</h3 >


<p >
Understand how careers differ across employment[b-jt9memh4xv],
salary[b-jt9memh4xv], projected growth[b-jt9memh4xv], education requirements[b-jt9memh4xv],
and overall opportunity.
</p >

</article >


<article class="feature-card" >

<span class="feature-number" >
02
</span >


<h3 >
Compare Locations
</h3 >


<p >
Explore how opportunity changes across states and
metro areas using CareerGPS market intelligence.
</p >

</article >


<article class="feature-card" >

<span class="feature-number" >
03
</span >


<h3 >
Follow Market Trends
</h3 >


<p >
Analyze changing employment conditions[b-jt9memh4xv], unemployment[b-jt9memh4xv],
labor-force participation[b-jt9memh4xv], and market momentum over time.
</p >

</article >


<article class="feature-card" >

<span class="feature-number" >
04
</span >


<h3 >
Choose Your Priorities
</h3 >


<p >
Compare markets using scoring models that emphasize
salary[b-jt9memh4xv], employment[b-jt9memh4xv], growth[b-jt9memh4xv], unemployment[b-jt9memh4xv], or other
career priorities.
</p >

</article >

</div >

</section >


<section class="home-final-cta" >

<span >
CAREERGPS PRO
</span >


<h2 >
Your Career Exists Everywhere.
Opportunity Doesn't.
</h2 >


<p >
Discover which states and metro areas offer stronger
opportunities for your career[b-jt9memh4xv], understand why markets
rank differently[b-jt9memh4xv], and follow changing conditions over time.
</p >


<a href="/pro"
class="home-final-cta-button" >

Explore CareerGPS Pro

</a >

</section >

</div[b-jt9memh4xv] >