/* =========================================================
   STOCK ANALYSIS PAGE
========================================================= */

.stock-page {

    background: #f5f8fc;

    min-height: 70vh;

}


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

.stock-loading {

    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #7b879c;

    font-size: 13px;

}


.loading-spinner {

    width: 35px;

    height: 35px;

    border: 4px solid #dce4ef;

    border-top-color: #1261d6;

    border-radius: 50%;

    animation:
        stockSpin 0.8s linear infinite;

    margin-bottom: 15px;

}


@keyframes stockSpin {

    to {
        transform: rotate(360deg);
    }

}


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

.stock-hero {

    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );

    color: white;

    padding:
        30px
        max(24px, calc((100% - 1180px) / 2));

    display: grid;

    grid-template-columns:
        1fr
        330px;

    gap: 45px;

    align-items: center;

}


.back-link {

    display: inline-block;

    margin-bottom: 22px;

    color: #9fc3ef;

    font-size: 11px;

    font-weight: 700;

}


.back-link:hover {

    color: #08b6d9;

}


.stock-symbol-row {

    display: flex;

    align-items: center;

    gap: 18px;

}


.stock-page-symbol {

    font-size: 42px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1.5px;

}


.stock-page-company {

    margin-top: 6px;

    color: #b8cbe6;

    font-size: 13px;

}


.stock-current-price {

    margin-top: 30px;

    font-size: 38px;

    font-weight: 900;

}


.price-label {

    color: #8fa8c9;

    font-size: 10px;

}


/* =========================================================
   SIGNAL
========================================================= */

.signal {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        7px
        13px;

    border-radius: 7px;

    font-size: 10px;

    font-weight: 900;

}


.signal-buy {

    background: #e9fbf3;

    color: #08a66a;

}


.signal-hold {

    background: #fff4e5;

    color: #ff8a00;

}


.signal-watch {

    background: #edf4ff;

    color: #1261d6;

}


.signal-neutral {

    background: #eef1f5;

    color: #526078;

}


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

.stock-score-card {

    padding: 25px;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius: 18px;

    background:
        rgba(255,255,255,0.08);

}


.score-card-label {

    color: #91b0d7;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

}


.stock-big-score {

    margin-top: 7px;

    font-size: 45px;

    line-height: 1;

    font-weight: 900;

}


.score-excellent {

    color: #38dfaa;

}


.score-good {

    color: #55c9f2;

}


.score-average {

    color: #ffc928;

}


.score-low {

    color: #ff8585;

}


.score-out-of {

    margin-top: 4px;

    color: #91a9ca;

    font-size: 10px;

}


.score-progress {

    height: 7px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.12);

}


.score-progress-fill {

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1261d6,
            #08b6d9
        );

}


.confidence-row {

    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(255,255,255,0.1);

    color: #91a9ca;

    font-size: 10px;

}


.confidence-row strong {

    color: #ffffff;

}


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

.analysis-section {

    width:
        min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        28px
        0;

}


.analysis-heading {

    margin-bottom: 16px;

}


.analysis-heading .section-label {

    display: block;

    margin-bottom: 7px;

    color: #1261d6;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

}


.analysis-heading h2 {

    color: #071a3a;

    font-size: 27px;

    line-height: 1.15;

}


.analysis-heading p {

    margin-top: 7px;

    color: #526078;

    font-size: 11px;

}


/* =========================================================
   TARGET PRICE
========================================================= */

.target-grid {

    display: grid;

    grid-template-columns:
        1fr
        55px
        1fr
        1fr;

    gap: 14px;

    align-items: stretch;

}


.target-card {

    padding: 18px;

    border:
        1px solid
        #dce4ef;

    border-radius: 15px;

    background: white;

}


.target-card span {

    display: block;

    color: #7b879c;

    font-size: 10px;

}


.target-card strong {

    display: block;

    margin-top: 7px;

    color: #071a3a;

    font-size: 27px;

    font-weight: 900;

}


.target-card.target strong {

    color: #1261d6;

}


.target-card.upside strong {

    color: #08a66a;

}


.target-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1261d6;

    font-size: 28px;

    font-weight: 900;

}


.target-agreement-box {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 12px;

    padding:
        13px
        17px;

    border-radius: 10px;

    background: #e8faff;

}


.target-agreement-box span {

    color: #526078;

    font-size: 10px;

}


.target-agreement-box strong {

    color: #1261d6;

    font-size: 11px;

}


/* =========================================================
   FUNDAMENTAL GRID
========================================================= */

.fundamental-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

}


.fundamental-card {

    padding: 16px;

    border:
        1px solid
        #dce4ef;

    border-radius: 14px;

    background: white;

}


.fundamental-icon {

    font-size: 20px;

}


.fundamental-name {

    margin-top: 11px;

    color: #526078;

    font-size: 10px;

    font-weight: 700;

}


.fundamental-score {

    margin-top: 4px;

    color: #071a3a;

    font-size: 22px;

    font-weight: 900;

}


.fundamental-bar {

    height: 6px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 10px;

    background: #e9eef5;

}


.fundamental-bar-fill {

    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1261d6,
            #08b6d9
        );

}


/* =========================================================
   VALUATION
========================================================= */

.valuation-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


.valuation-card {

    padding: 23px;

    border:
        1px solid
        #dce4ef;

    border-radius: 14px;

    background: white;

}


.valuation-card span {

    color: #7b879c;

    font-size: 10px;

}


.valuation-card strong {

    display: block;

    margin-top: 7px;

    color: #1261d6;

    font-size: 25px;

    font-weight: 900;

}


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

.summary-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

}


.summary-item {

    padding: 18px;

    border:
        1px solid
        #dce4ef;

    border-radius: 12px;

    background: white;

}


.summary-item span {

    display: block;

    color: #7b879c;

    font-size: 9px;

}


.summary-item strong {

    display: block;

    margin-top: 4px;

    color: #071a3a;

    font-size: 14px;

}


/* =========================================================
   METHODOLOGY
========================================================= */

.methodology-section {

    width:
        min(1180px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        0
        0
        50px;

}


.methodology-card {

    display: flex;

    gap: 20px;

    padding: 25px;

    border:
        1px solid
        #ccebf2;

    border-radius: 16px;

    background:
        #e8faff;

}


.methodology-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #1261d6;

    color: white;

    font-size: 20px;

    font-weight: 900;

}


.methodology-card h2 {

    color: #071a3a;

    font-size: 18px;

}


.methodology-card p {

    margin-top: 8px;

    color: #526078;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.stock-disclaimer {

    padding:
        18px
        max(20px, calc((100% - 1180px) / 2));

    background: #fff9df;

    border-top:
        1px solid
        #f2df8c;

    border-bottom:
        1px solid
        #f2df8c;

    color: #705900;

    font-size: 10px;

    line-height: 1.6;

}


.stock-disclaimer strong {

    color: #594700;

}


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

.stock-error {

    min-height: 550px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;

}


.error-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff0f0;

    color: #e5484d;

    font-size: 26px;

    font-weight: 900;

}


.stock-error h2 {

    margin-top: 18px;

    color: #071a3a;

    font-size: 25px;

}


.stock-error p {

    margin-top: 7px;

    color: #526078;

    font-size: 12px;

}


.back-button {

    margin-top: 20px;

    padding:
        11px
        17px;

    border-radius: 8px;

    background: #1261d6;

    color: white;

    font-size: 10px;

    font-weight: 800;

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 800px
) {

    .stock-hero {

        grid-template-columns:
            1fr;

        padding:
            35px
            20px;

    }


    .stock-page-symbol {

        font-size: 34px;

    }


    .stock-current-price {

        font-size: 32px;

    }


    .target-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    .target-arrow {

        display: none;

    }


    .fundamental-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .valuation-grid {

        grid-template-columns:
            1fr;

    }


    .summary-grid {

        grid-template-columns:
            1fr
            1fr;

    }

}


@media (
    max-width: 500px
) {

    .analysis-section {

        width:
            calc(100% - 24px);

        padding:
            35px
            0;

    }


    .stock-symbol-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

    }


    .target-grid {

        grid-template-columns:
            1fr;

    }


    .fundamental-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    .summary-grid {

        grid-template-columns:
            1fr;

    }


    .target-agreement-box {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .methodology-section {

        width:
            calc(100% - 24px);

    }

}

/* =========================================================
   ALL STOCKS PAGE
========================================================= */

.stocks-page {
    background: #f5f8fc;
    min-height: 70vh;
}

.stocks-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.stocks-page-hero {
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );

    color: white;
    padding: 42px 0 35px;
}

.stocks-eyebrow {
    color: #55d7f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.stocks-page-hero h1 {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 900;
}

.stocks-page-hero p {
    max-width: 650px;
    margin-top: 8px;
    color: #b8cbe6;
    font-size: 12px;
    line-height: 1.6;
}


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

.stocks-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.stocks-summary-card {
    padding: 17px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
}

.stocks-summary-card span {
    display: block;
    color: #91a9ca;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
}

.stocks-summary-card strong {
    display: block;
    margin-top: 5px;
    color: white;
    font-size: 24px;
    font-weight: 900;
}

.stocks-summary-card.buy strong {
    color: #38dfaa;
}

.stocks-summary-card.hold strong {
    color: #ffc928;
}


/* =========================================================
   DIRECTORY
========================================================= */

.stocks-directory {
    padding: 30px 0 45px;
}


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

.stocks-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.stocks-filter-buttons {
    display: flex;
    gap: 7px;
}

.stock-filter {
    padding: 8px 17px;
    border: 1px solid #d7e0eb;
    border-radius: 7px;
    background: white;
    color: #526078;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.stock-filter:hover {
    border-color: #1261d6;
    color: #1261d6;
}

.stock-filter.active {
    border-color: #1261d6;
    background: #1261d6;
    color: white;
}

.stocks-count {
    color: #7b879c;
    font-size: 10px;
}

.stocks-count strong {
    color: #071a3a;
}


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

.stocks-table-wrapper {
    overflow-x: auto;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    background: white;
    box-shadow: 0 5px 18px rgba(15, 42, 75, .05);
}

.stocks-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.stocks-table th {
    padding: 13px 15px;
    border-bottom: 1px solid #dce4ef;
    background: #f7f9fc;
    color: #7b879c;
    text-align: left;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
}

.stocks-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #edf1f5;
    color: #071a3a;
    font-size: 10px;
    vertical-align: middle;
}

.stock-row {
    cursor: pointer;
    transition: background .15s ease;
}

.stock-row:hover {
    background: #f1f9ff;
}

.stock-row:last-child td {
    border-bottom: none;
}

.stock-rank {
    color: #8a96a8 !important;
    font-weight: 800;
}


/* =========================================================
   STOCK NAME
========================================================= */

.stock-name-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
}

.stock-name-link strong {
    color: #1261d6;
    font-size: 11px;
    font-weight: 900;
}

.stock-name-link span {
    max-width: 230px;
    overflow: hidden;
    color: #7b879c;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-price-cell {
    font-weight: 900;
}

.stock-target-cell {
    color: #1261d6 !important;
    font-weight: 900;
}


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

.list-score {
    width: 80px;
}

.list-score strong {
    font-size: 11px;
    font-weight: 900;
}

.list-score-bar {
    width: 100%;
    height: 4px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: #e8edf4;
}

.list-score-bar span {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #1261d6,
        #08b6d9
    );
}


/* =========================================================
   SIGNALS
========================================================= */

.list-signal-buy,
.list-signal-hold,
.list-signal-neutral {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 900;
}

.list-signal-buy {
    background: #e7fbf2;
    color: #079b63;
}

.list-signal-hold {
    background: #fff4df;
    color: #df7c00;
}

.list-signal-neutral {
    background: #eef1f5;
    color: #526078;
}


/* =========================================================
   UPSIDE
========================================================= */

.upside-positive {
    color: #079b63;
    font-weight: 900;
}

.upside-negative {
    color: #d94a52;
    font-weight: 900;
}


/* =========================================================
   AGREEMENT
========================================================= */

.agreement-strong,
.agreement-moderate,
.agreement-weak,
.agreement-low {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 800;
}

.agreement-strong {
    background: #e7fbf2;
    color: #079b63;
}

.agreement-moderate {
    background: #e8f5ff;
    color: #1261d6;
}

.agreement-weak {
    background: #fff4df;
    color: #df7c00;
}

.agreement-low {
    background: #f0f2f5;
    color: #697586;
}


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

.stocks-loading {
    padding: 50px !important;
    color: #7b879c !important;
    text-align: center;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.stocks-disclaimer {
    padding: 17px 0;
    border-top: 1px solid #f2df8c;
    border-bottom: 1px solid #f2df8c;
    background: #fff9df;
    color: #705900;
    font-size: 9px;
    line-height: 1.6;
}

.stocks-disclaimer strong {
    color: #594700;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .stocks-container {
        width: calc(100% - 24px);
    }

    .stocks-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .stocks-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .stocks-page-hero h1 {
        font-size: 29px;
    }

}

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

.methodology-hero {
    padding: 48px 0 42px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.methodology-container {
    width: min(1050px, calc(100% - 40px));
    margin: 0 auto;
}

.methodology-eyebrow {
    color: #55d7f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.methodology-hero h1 {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
}

.methodology-hero p {
    max-width: 680px;
    margin-top: 10px;
    color: #b8cbe6;
    font-size: 12px;
    line-height: 1.7;
}


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

.methodology-page {
    padding: 45px 0 60px;
    background: #f6f9fc;
}

.methodology-section {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 35px 0;
    border-bottom: 1px solid #dfe6ef;
}

.methodology-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #e8f5ff;
    color: #1261d6;
    font-size: 11px;
    font-weight: 900;
}

.methodology-section h2 {
    margin-bottom: 10px;
    color: #071a3a;
    font-size: 23px;
    font-weight: 900;
}

.methodology-section p {
    max-width: 760px;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   FUNDAMENTAL CARDS
========================================================= */

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.methodology-card {
    padding: 17px;
    border: 1px solid #dce5ef;
    border-radius: 11px;
    background: white;
}

.methodology-card strong {
    display: block;
    color: #1261d6;
    font-size: 11px;
    font-weight: 900;
}

.methodology-card p {
    margin: 7px 0 0;
    font-size: 9px;
    line-height: 1.6;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.methodology-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 720px;
    margin-top: 10px;
    padding: 14px 16px;
    border-left: 3px solid #1261d6;
    border-radius: 7px;
    background: white;
}

.methodology-highlight strong {
    min-width: 125px;
    color: #071a3a;
    font-size: 10px;
}

.methodology-highlight span {
    color: #64748b;
    font-size: 9px;
}


/* =========================================================
   SIGNALS
========================================================= */

.signal-methodology-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.signal-methodology {
    padding: 17px;
    border-radius: 11px;
    background: white;
    border: 1px solid #dce5ef;
}

.signal-methodology span {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 900;
}

.signal-methodology p {
    margin-top: 10px;
    font-size: 9px;
}

.signal-methodology.buy span {
    background: #e7fbf2;
    color: #079b63;
}

.signal-methodology.hold span {
    background: #fff4df;
    color: #df7c00;
}

.signal-methodology.watch span {
    background: #e8f5ff;
    color: #1261d6;
}

.signal-methodology.avoid span {
    background: #ffecef;
    color: #c33d50;
}


/* =========================================================
   FORMULA
========================================================= */

.methodology-formula {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 760px;
    margin: 18px 0;
    padding: 17px 20px;
    border-radius: 10px;
    background: #071a3a;
    color: white;
}

.methodology-formula span {
    color: #91a9ca;
    font-size: 9px;
    font-weight: 800;
}

.methodology-formula strong {
    color: #55d7f2;
    font-size: 11px;
}


/* =========================================================
   AGREEMENT
========================================================= */

.agreement-methodology {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.agreement-methodology > div {
    padding: 15px;
    border-radius: 9px;
    background: white;
    border: 1px solid #dce5ef;
}

.agreement-methodology strong {
    display: block;
    color: #1261d6;
    font-size: 10px;
}

.agreement-methodology span {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.6;
}


/* =========================================================
   READING BOX
========================================================= */

.reading-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.reading-box > div {
    padding: 15px;
    border-radius: 9px;
    background: white;
    border: 1px solid #dce5ef;
}

.reading-box strong {
    display: block;
    color: #071a3a;
    font-size: 10px;
}

.reading-box span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 9px;
}


/* =========================================================
   WARNING
========================================================= */

.methodology-warning {
    margin-top: 35px;
    padding: 25px;
    border: 1px solid #f1df9a;
    border-radius: 12px;
    background: #fff9df;
}

.methodology-warning h2 {
    margin-bottom: 10px;
    color: #594700;
    font-size: 18px;
}

.methodology-warning p {
    margin-bottom: 9px;
    color: #705900;
    font-size: 10px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .methodology-container {
        width: calc(100% - 26px);
    }

    .methodology-hero h1 {
        font-size: 29px;
    }

    .methodology-section {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .methodology-grid,
    .signal-methodology-grid,
    .agreement-methodology {
        grid-template-columns: 1fr;
    }

    .reading-box {
        grid-template-columns: 1fr;
    }

    .methodology-formula {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .methodology-highlight {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

}

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

.picks-hero {
    padding: 45px 0 38px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.picks-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.picks-eyebrow {
    color: #55d7f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.picks-hero h1 {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
}

.picks-hero p {
    max-width: 650px;
    margin-top: 9px;
    color: #b8cbe6;
    font-size: 12px;
    line-height: 1.7;
}

.picks-page {
    padding: 35px 0 60px;
    background: #f6f9fc;
}


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

.picks-section,
.top-pick-section {
    margin-bottom: 35px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 15px;
}

.section-heading span {
    color: #1261d6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.section-heading h2 {
    margin-top: 5px;
    color: #071a3a;
    font-size: 21px;
    font-weight: 900;
}

.section-heading a {
    color: #1261d6;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   TOP PICK
========================================================= */

.top-pick-card {
    overflow: hidden;
    border: 1px solid #dce5ef;
    border-radius: 15px;
    background: white;
    box-shadow: 0 8px 25px rgba(15, 42, 75, .06);
}

.top-pick-badge {
    padding: 9px 18px;
    background: linear-gradient(
        90deg,
        #1261d6,
        #08b6d9
    );
    color: white;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.top-pick-main {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 20px;
    padding: 25px;
    align-items: center;
}

.top-pick-stock {
    min-width: 0;
}

.top-pick-symbol {
    color: #1261d6;
    font-size: 25px;
    font-weight: 900;
}

.top-pick-company {
    margin-top: 4px;
    overflow: hidden;
    color: #778398;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-pick-main span,
.top-pick-bottom span {
    display: block;
    color: #8a96a8;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

.top-pick-main strong {
    display: block;
    margin-top: 5px;
    color: #071a3a;
    font-size: 17px;
    font-weight: 900;
}

.top-pick-target strong {
    color: #1261d6;
}

.top-pick-upside strong {
    color: #079b63;
}

.top-pick-bottom {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 17px 25px;
    border-top: 1px solid #edf1f5;
    background: #fafcff;
}

.top-pick-bottom > div strong {
    display: block;
    margin-top: 4px;
    color: #071a3a;
    font-size: 10px;
}

.top-pick-button {
    margin-left: auto;
    padding: 9px 15px;
    border-radius: 7px;
    background: #071a3a;
    color: white;
    font-size: 8px;
    font-weight: 900;
    text-decoration: none;
}


/* =========================================================
   PICK GRID
========================================================= */

.pick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.pick-card {
    display: block;
    padding: 17px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: white;
    color: inherit;
    text-decoration: none;
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.pick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 42, 75, .08);
}

.pick-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pick-card-top strong {
    display: block;
    color: #1261d6;
    font-size: 13px;
    font-weight: 900;
}

.pick-card-top span:not(
    .pick-buy,
    .pick-hold,
    .pick-watch,
    .pick-avoid
) {
    display: block;
    max-width: 170px;
    margin-top: 3px;
    overflow: hidden;
    color: #7b879c;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick-buy,
.pick-hold,
.pick-watch,
.pick-avoid {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 7px;
    font-weight: 900;
}

.pick-buy {
    background: #e7fbf2;
    color: #079b63;
}

.pick-hold {
    background: #fff4df;
    color: #df7c00;
}

.pick-watch {
    background: #e8f5ff;
    color: #1261d6;
}

.pick-avoid {
    background: #ffecef;
    color: #c33d50;
}

.pick-card-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 22px;
}

.pick-card-values span {
    display: block;
    color: #8a96a8;
    font-size: 7px;
    font-weight: 900;
}

.pick-card-values strong {
    display: block;
    margin-top: 4px;
    color: #071a3a;
    font-size: 11px;
}

.pick-card-values strong.upside-positive {
    color: #079b63;
}

.pick-card-values strong.upside-negative {
    color: #d94a52;
}

.pick-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #edf1f5;
}

.pick-card-bottom span:first-child {
    color: #8a96a8;
    font-size: 8px;
}

.pick-card-bottom strong {
    color: #071a3a;
    font-size: 10px;
}

.pick-arrow {
    margin-left: auto;
    color: #1261d6;
    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   EMPTY / LOADING
========================================================= */

.picks-loading,
.picks-empty {
    padding: 35px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: white;
    color: #7b879c;
    font-size: 10px;
    text-align: center;
}


/* =========================================================
   NOTE
========================================================= */

.picks-note {
    margin-top: 40px;
    padding: 23px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: white;
}

.picks-note h2 {
    color: #071a3a;
    font-size: 17px;
}

.picks-note p {
    max-width: 800px;
    margin-top: 9px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.7;
}

.picks-note a {
    display: inline-block;
    margin-top: 10px;
    color: #1261d6;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .picks-container {
        width: calc(100% - 26px);
    }

    .picks-hero h1 {
        font-size: 29px;
    }

    .top-pick-main {
        grid-template-columns: 1fr 1fr;
    }

    .top-pick-stock {
        grid-column: 1 / -1;
    }

    .top-pick-bottom {
        flex-wrap: wrap;
        gap: 15px;
    }

    .top-pick-button {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

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

}

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

.screener-hero {
    padding: 45px 0 38px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.screener-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.screener-eyebrow {
    color: #55d7f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.screener-hero h1 {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 900;
}

.screener-hero p {
    max-width: 700px;
    margin-top: 9px;
    color: #b8cbe6;
    font-size: 12px;
    line-height: 1.7;
}


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

.screener-page {
    padding: 35px 0 60px;
    background: #f6f9fc;
}


/* =========================================================
   FILTER PANEL
========================================================= */

.screener-panel {
    padding: 22px;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: white;
    box-shadow: 0 6px 20px rgba(15, 42, 75, .05);
}

.screener-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.screener-panel-heading span,
.screener-results-heading span {
    color: #1261d6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.screener-panel-heading h2,
.screener-results-heading h2 {
    margin-top: 5px;
    color: #071a3a;
    font-size: 20px;
    font-weight: 900;
}

.reset-filters {
    padding: 8px 14px;
    border: 1px solid #d7e0eb;
    border-radius: 7px;
    background: white;
    color: #526078;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.reset-filters:hover {
    border-color: #1261d6;
    color: #1261d6;
}


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

.screener-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.screener-filter label {
    display: block;
    margin-bottom: 6px;
    color: #526078;
    font-size: 9px;
    font-weight: 800;
}

.screener-filter select {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #d7e0eb;
    border-radius: 7px;
    outline: none;
    background: white;
    color: #071a3a;
    font-size: 10px;
    cursor: pointer;
}

.screener-filter select:focus {
    border-color: #1261d6;
}


.screener-filter-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid #edf1f5;
}

.screener-filter-summary strong {
    color: #1261d6;
    font-size: 20px;
    font-weight: 900;
}

.screener-filter-summary span {
    color: #7b879c;
    font-size: 9px;
}


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

.screener-results {
    margin-top: 35px;
}

.screener-results-heading {
    margin-bottom: 15px;
}

.screener-table-wrapper {
    overflow-x: auto;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: white;
    box-shadow: 0 6px 20px rgba(15, 42, 75, .05);
}

.screener-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
}

.screener-table th {
    padding: 13px 14px;
    border-bottom: 1px solid #dce5ef;
    background: #f7f9fc;
    color: #7b879c;
    text-align: left;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
}

.screener-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f5;
    color: #071a3a;
    font-size: 9px;
    vertical-align: middle;
}

.screener-stock-row {
    cursor: pointer;
    transition: background .15s ease;
}

.screener-stock-row:hover {
    background: #f1f9ff;
}

.screener-stock-row:last-child td {
    border-bottom: none;
}


/* =========================================================
   STOCK
========================================================= */

.screener-rank {
    color: #8a96a8;
    font-weight: 800;
}

.screener-stock {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
}

.screener-stock strong {
    color: #1261d6;
    font-size: 11px;
    font-weight: 900;
}

.screener-stock span {
    max-width: 230px;
    overflow: hidden;
    color: #7b879c;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screener-price {
    font-weight: 900;
}

.screener-target {
    color: #1261d6 !important;
    font-weight: 900;
}


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

.screener-score {
    width: 75px;
}

.screener-score strong {
    font-size: 10px;
}

.screener-score div {
    width: 100%;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 10px;
    background: #e8edf4;
}

.screener-score div span {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #1261d6,
        #08b6d9
    );
}


/* =========================================================
   SIGNAL
========================================================= */

.screener-buy,
.screener-hold,
.screener-watch,
.screener-avoid,
.screener-neutral {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 7px;
    font-weight: 900;
}

.screener-buy {
    background: #e7fbf2;
    color: #079b63;
}

.screener-hold {
    background: #fff4df;
    color: #df7c00;
}

.screener-watch {
    background: #e8f5ff;
    color: #1261d6;
}

.screener-avoid {
    background: #ffecef;
    color: #c33d50;
}

.screener-neutral {
    background: #eef1f5;
    color: #697586;
}


/* =========================================================
   UPSIDE
========================================================= */

.screener-table .upside-positive {
    color: #079b63;
    font-weight: 900;
}

.screener-table .upside-negative {
    color: #d94a52;
    font-weight: 900;
}


/* =========================================================
   AGREEMENT
========================================================= */

.screener-agreement {
    color: #526078;
    font-size: 8px;
    font-weight: 800;
}


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

.screener-loading {
    padding: 45px !important;
    color: #7b879c !important;
    text-align: center;
}


/* =========================================================
   NOTE
========================================================= */

.screener-note {
    margin-top: 35px;
    padding: 22px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: white;
}

.screener-note h2 {
    color: #071a3a;
    font-size: 17px;
}

.screener-note p {
    max-width: 800px;
    margin-top: 8px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .screener-container {
        width: calc(100% - 26px);
    }

    .screener-hero h1 {
        font-size: 29px;
    }

    .screener-filters {
        grid-template-columns: 1fr;
    }

    .screener-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

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

.guides-hero {
    padding: 45px 0 40px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.guides-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.guides-eyebrow {
    color: #55d7f2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.guides-hero h1 {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
}

.guides-hero p {
    max-width: 680px;
    margin-top: 9px;
    color: #b8cbe6;
    font-size: 12px;
    line-height: 1.7;
}


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

.guides-page {
    padding: 38px 0 60px;
    background: #f6f9fc;
}

.guides-intro {
    margin-bottom: 25px;
}

.guides-intro > span {
    color: #1261d6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.guides-intro h2 {
    margin-top: 5px;
    color: #071a3a;
    font-size: 23px;
    font-weight: 900;
}

.guides-intro p {
    max-width: 720px;
    margin-top: 8px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.7;
}


/* =========================================================
   GUIDE GRID
========================================================= */

.guides-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.guide-card {
    display: flex;
    gap: 17px;
    padding: 20px;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    background: white;
    box-shadow: 0 5px 18px rgba(15, 42, 75, .04);
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(15, 42, 75, .08);
}

.guide-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e8f5ff;
    color: #1261d6;
    font-size: 9px;
    font-weight: 900;
}

.guide-content {
    min-width: 0;
}

.guide-category {
    color: #1261d6;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.guide-content h2 {
    margin-top: 5px;
    color: #071a3a;
    font-size: 15px;
    font-weight: 900;
}

.guide-content p {
    margin-top: 7px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.7;
}

.guide-content a {
    display: inline-block;
    margin-top: 11px;
    color: #1261d6;
    font-size: 8px;
    font-weight: 900;
    text-decoration: none;
}


/* =========================================================
   TOOLS
========================================================= */

.guides-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 35px;
    padding: 24px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.guides-tools > div:first-child > span {
    color: #55d7f2;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.guides-tools h2 {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 900;
}

.guides-tools p {
    max-width: 600px;
    margin-top: 7px;
    color: #b8cbe6;
    font-size: 9px;
    line-height: 1.6;
}

.guides-tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.guides-tool-buttons a {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.guides-tool-buttons a:hover {
    background: rgba(255,255,255,.16);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.guides-disclaimer {
    margin-top: 25px;
    padding: 15px 18px;
    border: 1px solid #f1df9a;
    border-radius: 9px;
    background: #fff9df;
    color: #705900;
    font-size: 9px;
    line-height: 1.6;
}

.guides-disclaimer strong {
    color: #594700;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .guides-container {
        width: calc(100% - 26px);
    }

    .guides-hero h1 {
        font-size: 29px;
    }

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

    .guides-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .guides-tool-buttons {
        width: 100%;
    }

}

/* =========================================================
   FONT SIZE IMPROVEMENT
   Increase readability across secondary pages
========================================================= */

/* General page text */
.stocks-page,
.picks-page,
.screener-page,
.guides-page,
.methodology-page {
    font-size: 14px;
}


/* Body paragraphs */
.stocks-page p,
.picks-page p,
.screener-page p,
.guides-page p,
.methodology-page p {
    font-size: 13px;
    line-height: 1.7;
}


/* Small labels */
.stocks-page span,
.picks-page span,
.screener-page span,
.guides-page span,
.methodology-page span {
    font-size: 11px;
}


/* Keep important headings larger */
.stocks-page h1,
.picks-page h1,
.screener-page h1,
.guides-page h1,
.methodology-page h1 {
    font-size: 34px;
}

.stocks-page h2,
.picks-page h2,
.screener-page h2,
.guides-page h2,
.methodology-page h2 {
    font-size: 22px;
}


/* Navigation */
.main-nav a {
    font-size: 12px;
}


/* Table text */
.stocks-table td,
.screener-table td {
    font-size: 12px;
}

.stocks-table th,
.screener-table th {
    font-size: 10px;
}


/* Stock/company names */
.stock-name-link strong,
.screener-stock strong {
    font-size: 13px;
}

.stock-name-link span,
.screener-stock span {
    font-size: 10px;
}


/* Buttons */
button,
.stock-filter,
.reset-filters {
    font-size: 11px;
}


/* Guide cards */
.guide-content h2 {
    font-size: 17px;
}

.guide-content p {
    font-size: 11px;
}

.guide-content a {
    font-size: 10px;
}


/* Pick cards */
.pick-card-top strong {
    font-size: 14px;
}

.pick-card-top span {
    font-size: 10px;
}

.pick-card-values span {
    font-size: 9px;
}

.pick-card-values strong {
    font-size: 12px;
}


/* Screener filters */
.screener-filter label {
    font-size: 11px;
}

.screener-filter select {
    font-size: 12px;
}


/* Notes / disclaimers */
.screener-note p,
.guides-disclaimer,
.picks-note p,
.stocks-disclaimer {
    font-size: 11px;
}


/* Footer */
.site-footer {
    font-size: 11px;
}

.footer-links a,
.footer-links strong {
    font-size: 11px;
}

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

.about-hero {
    padding: 45px 0 40px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.about-container {
    width: min(1050px, calc(100% - 40px));
    margin: 0 auto;
}

.about-eyebrow {
    color: #55d7f2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.about-hero h1 {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
}

.about-hero p {
    max-width: 700px;
    margin-top: 10px;
    color: #b8cbe6;
    font-size: 13px;
    line-height: 1.7;
}


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

.about-page {
    padding: 40px 0 60px;
    background: #f6f9fc;
}

.about-section {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 35px 0;
    border-bottom: 1px solid #dce5ef;
}

.about-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8f5ff;
    color: #1261d6;
    font-size: 11px;
    font-weight: 900;
}

.about-label {
    color: #1261d6;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: 1px;
}

.about-section h2 {
    margin-top: 6px;
    color: #071a3a;
    font-size: 23px;
    font-weight: 900;
}

.about-section p {
    max-width: 780px;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px !important;
    line-height: 1.75;
}


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

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.about-card {
    padding: 18px;
    border: 1px solid #dce5ef;
    border-radius: 11px;
    background: white;
}

.about-card strong {
    display: block;
    color: #1261d6;
    font-size: 13px;
    font-weight: 900;
}

.about-card p {
    margin-top: 7px;
    font-size: 11px !important;
    line-height: 1.65;
}


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

.about-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 7px;
    background: #071a3a;
    color: white;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}


/* =========================================================
   WARNING
========================================================= */

.about-warning {
    margin-top: 35px;
    padding: 25px;
    border: 1px solid #f1df9a;
    border-radius: 12px;
    background: #fff9df;
}

.about-warning h2 {
    color: #594700;
    font-size: 20px;
}

.about-warning p {
    margin-top: 10px;
    color: #705900;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   EXPLORE
========================================================= */

.about-explore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 35px;
    padding: 25px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.about-explore > div:first-child span {
    color: #55d7f2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.about-explore h2 {
    margin-top: 6px;
    font-size: 20px;
}

.about-explore-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.about-explore-links a {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .about-container {
        width: calc(100% - 26px);
    }

    .about-hero h1 {
        font-size: 29px;
    }

    .about-section {
        grid-template-columns: 1fr;
        gap: 13px;
    }

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

    .about-explore {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   LEGAL PAGES
========================================================= */

.legal-hero {
    padding: 45px 0 40px;
    background:
        linear-gradient(
            135deg,
            #071a3a,
            #0c326b
        );
    color: white;
}

.legal-container {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
}

.legal-eyebrow {
    color: #55d7f2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.legal-hero h1 {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
}

.legal-hero p {
    margin-top: 9px;
    color: #b8cbe6;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   LEGAL CONTENT
========================================================= */

.legal-page {
    padding: 40px 0 60px;
    background: #f6f9fc;
}

.legal-updated {
    margin-bottom: 25px;
    color: #7b879c;
    font-size: 10px;
}

.legal-section {
    padding: 25px 0;
    border-bottom: 1px solid #dce5ef;
}

.legal-section h2 {
    color: #071a3a;
    font-size: 20px;
    font-weight: 900;
}

.legal-section p {
    max-width: 800px;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   WARNING
========================================================= */

.legal-warning {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #f1df9a;
    border-radius: 11px;
    background: #fff9df;
    color: #705900;
    font-size: 11px;
    line-height: 1.7;
}

.legal-warning strong {
    color: #594700;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .legal-container {
        width: calc(100% - 26px);
    }

    .legal-hero h1 {
        font-size: 29px;
    }

    .legal-section h2 {
        font-size: 18px;
    }

    .legal-section p {
        font-size: 12px;
    }

}