/* =========================================================
   SEQUENCES & SERIES GUIDE
   ========================================================= */

#sequences-series-guide
{
    --sas-navy: #0f172a;
    --sas-slate: #475569;
    --sas-muted: #64748b;

    --sas-border: #dbe5ec;
    --sas-surface: #f8fafc;
    --sas-white: #ffffff;

    --sas-blue: #0f5f8f;
    --sas-blue-dark: #0a4569;
    --sas-blue-soft: #edf6fb;

    --sas-teal: #159a9c;
    --sas-teal-dark: #0f7476;
    --sas-teal-soft: #eaf8f7;

    --sas-green: #24855b;
    --sas-green-soft: #eef9f3;

    --sas-red: #b84a4a;
    --sas-red-soft: #fff1f1;

    --sas-orange: #c96d1b;
    --sas-orange-soft: #fff5e9;

    --sas-purple: #7154a3;
    --sas-purple-soft: #f4effb;

    --sas-shadow:
        0 10px 30px
        rgba(
            15,
            95,
            143,
            0.08
        );

    --sas-shadow-hover:
        0 16px 38px
        rgba(
            15,
            95,
            143,
            0.14
        );

    color: var(--sas-slate);
}


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

.sas-intro h2,
.sas-section h2,
.sas-section h3,
.sas-related-section h2,
.sas-related-section h3
{
    color: var(--sas-navy);
}

.sas-intro h2,
.sas-section-heading h2,
.sas-final-card h2,
.sas-practice-cta h2,
.sas-related-section > h2
{
    font-weight: 800;
    line-height: 1.2;
}

.sas-intro .lead
{
    color: var(--sas-navy);

    font-weight: 600;

    line-height: 1.7;
}

.sas-eyebrow,
.sas-section-eyebrow,
.sas-card-label
{
    margin-bottom: 0.5rem;

    color: var(--sas-blue);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


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

.sas-section
{
    margin-top: 5.5rem;
}

.sas-section-heading
{
    margin-bottom: 2rem;
}

.sas-section-heading h2
{
    margin-bottom: 0.8rem;
}

.sas-section-heading > p:last-child
{
    max-width: 760px;

    margin-bottom: 0;

    line-height: 1.7;
}


/* =========================================================
   SHARED CARD STYLING
   ========================================================= */

.sas-definition-card,
.sas-idea-card,
.sas-formula-card,
.sas-definition-large-card,
.sas-example-card,
.sas-warning-card,
.sas-important-card,
.sas-equivalence-card,
.sas-tip-card,
.sas-checklist-card,
.sas-final-card,
.sas-practice-cta,
.sas-visual-card
{
    border: 1px solid var(--sas-border);

    border-radius: 18px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);
}


/* =========================================================
   DEFINITION CARD
   ========================================================= */

.sas-definition-card
{
    display: flex;

    align-items: center;

    gap: 1.4rem;

    padding: 1.7rem 1.8rem;

    border-left: 5px solid var(--sas-blue);
}

.sas-definition-icon
{
    display: flex;

    flex: 0 0 54px;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    border-radius: 14px;

    background: var(--sas-blue-soft);

    color: var(--sas-blue);

    font-size: 1.35rem;
}

.sas-definition-math
{
    font-size: 1.05rem;
}


/* =========================================================
   BIG IDEA CARD
   ========================================================= */

.sas-idea-card
{
    padding: 1.7rem 1.8rem;

    border-left: 5px solid var(--sas-teal);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-teal-soft) 100%
        );
}

.sas-idea-heading,
.sas-warning-heading
{
    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.1rem;
}

.sas-idea-heading h3,
.sas-warning-heading h3
{
    margin-bottom: 0;
}

.sas-idea-icon,
.sas-warning-icon
{
    display: flex;

    flex: 0 0 48px;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    font-size: 1.15rem;
}

.sas-idea-icon
{
    background: #d8f3f1;

    color: var(--sas-teal-dark);
}


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

.sas-formula-card,
.sas-definition-large-card,
.sas-equivalence-card
{
    padding: 1.8rem 1.5rem;

    overflow-x: auto;

    text-align: center;
}

.sas-formula-card
{
    border-top: 4px solid var(--sas-blue);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbfe 100%
        );
}

.sas-definition-large-card
{
    border-top: 4px solid var(--sas-teal);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--sas-teal-soft) 100%
        );
}

.sas-equivalence-card
{
    border-left: 5px solid var(--sas-purple);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-purple-soft) 100%
        );
}


/* =========================================================
   EXAMPLE CARDS
   ========================================================= */

.sas-example-card
{
    position: relative;

    padding: 2rem;

    overflow: hidden;
}

.sas-example-card::before
{
    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: var(--sas-green);

    content: "";
}

.sas-example-card h3
{
    margin-bottom: 1.25rem;
}

.sas-example-card p
{
    line-height: 1.7;
}

.sas-answer-box
{
    margin-top: 1.5rem;

    padding: 1.15rem 1rem;

    border: 1px solid #cce9d9;

    border-radius: 12px;

    background: var(--sas-green-soft);

    text-align: center;
}


/* =========================================================
   COMPARISON / METHOD GRIDS
   ========================================================= */

.sas-comparison-grid,
.sas-method-grid,
.sas-rule-grid
{
    display: grid;

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

    gap: 1.25rem;
}

.sas-comparison-card,
.sas-method-card,
.sas-rule-card
{
    padding: 1.6rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);
}

.sas-comparison-card:nth-child(1),
.sas-method-card:nth-child(1)
{
    border-top: 4px solid var(--sas-blue);
}

.sas-comparison-card:nth-child(2),
.sas-method-card:nth-child(2)
{
    border-top: 4px solid var(--sas-teal);
}

.sas-rule-good
{
    border-top: 4px solid var(--sas-green);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--sas-green-soft) 100%
        );
}

.sas-rule-bad
{
    border-top: 4px solid var(--sas-red);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--sas-red-soft) 100%
        );
}


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

.sas-warning-card
{
    padding: 1.7rem 1.8rem;

    border-left: 5px solid var(--sas-red);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-red-soft) 100%
        );
}

.sas-warning-icon
{
    background: #f8dede;

    color: var(--sas-red);
}

.sas-warning-card .sas-card-label
{
    color: var(--sas-red);
}


/* =========================================================
   IMPORTANT / CAREFUL CARD
   ========================================================= */

.sas-important-card
{
    padding: 1.6rem 1.8rem;

    border-left: 5px solid var(--sas-orange);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-orange-soft) 100%
        );
}

.sas-important-card .sas-card-label
{
    color: var(--sas-orange);
}


/* =========================================================
   TIP CARD
   ========================================================= */

.sas-tip-card
{
    display: flex;

    align-items: flex-start;

    gap: 1.1rem;

    padding: 1.5rem 1.7rem;

    border-left: 5px solid var(--sas-orange);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-orange-soft) 100%
        );
}

.sas-tip-icon
{
    display: flex;

    flex: 0 0 46px;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #ffe5c5;

    color: var(--sas-orange);

    font-size: 1.1rem;
}

.sas-tip-card .sas-card-label
{
    color: var(--sas-orange);
}


/* =========================================================
   CHECKLIST CARD
   ========================================================= */

.sas-checklist-card
{
    padding: 1.6rem 1.8rem;

    border-left: 5px solid var(--sas-teal);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--sas-teal-soft) 100%
        );
}

.sas-mini-list
{
    margin-bottom: 0;

    padding-left: 1.4rem;
}

.sas-mini-list li
{
    margin-bottom: 0.6rem;

    line-height: 1.6;
}

.sas-mini-list li:last-child
{
    margin-bottom: 0;
}


/* =========================================================
   TEST RESULT GRID
   ========================================================= */

.sas-test-result-grid
{
    display: grid;

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

    gap: 1rem;
}

.sas-test-result-card
{
    padding: 1.4rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);

    text-align: center;
}

.sas-test-result-card span
{
    display: block;

    margin-bottom: 0.7rem;

    color: var(--sas-blue);

    font-size: 1.05rem;
    font-weight: 800;
}

.sas-test-result-card strong
{
    color: var(--sas-navy);
}


/* =========================================================
   TEST CHOICE GRID
   ========================================================= */

.sas-choice-grid
{
    display: grid;

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

    gap: 1.15rem;
}

.sas-choice-card
{
    padding: 1.5rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );

    box-shadow: var(--sas-shadow);
}


/* =========================================================
   VISUAL CARDS / GRAPHING LAB
   ========================================================= */

.sas-visual-card
{
    padding: 1.5rem;
}

.sas-visual-heading
{
    margin-bottom: 1.25rem;
}

.sas-visual-heading p:last-child
{
    line-height: 1.6;
}

.sas-graph
{
    width: 100%;
    height: 420px;

    border: 1px solid var(--sas-border);

    border-radius: 12px;

    background: var(--sas-white);
}

.sas-number-line-graph
{
    height: 260px;
}


/* =========================================================
   QUICK REFERENCE
   ========================================================= */

.sas-reference-grid
{
    display: grid;

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

    gap: 1.15rem;
}

.sas-reference-card
{
    display: flex;

    min-height: 150px;

    flex-direction: column;

    justify-content: center;

    padding: 1.4rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );

    box-shadow: var(--sas-shadow);

    text-align: center;
}

.sas-reference-card .sas-card-label
{
    text-align: left;
}


/* =========================================================
   COMMON MISTAKES
   ========================================================= */

.sas-mistake-grid
{
    display: grid;

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

    gap: 1.15rem;
}

.sas-mistake-card
{
    position: relative;

    min-height: 180px;

    padding:
        1.55rem
        1.55rem
        1.55rem
        4.7rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);
}

.sas-mistake-number
{
    position: absolute;

    top: 1.45rem;
    left: 1.4rem;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--sas-red-soft);

    color: var(--sas-red);

    font-weight: 800;
}

.sas-mistake-card h3
{
    margin-bottom: 0.65rem;

    font-size: 1.02rem;
}


/* =========================================================
   STRATEGY ROADMAP
   ========================================================= */

.sas-roadmap
{
    display: flex;

    flex-direction: column;
}

.sas-roadmap-step
{
    display: flex;

    align-items: center;

    gap: 1.25rem;

    padding: 1.5rem 1.7rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);
}

.sas-roadmap-step h3
{
    margin-bottom: 0.4rem;
}

.sas-roadmap-number
{
    display: flex;

    flex: 0 0 48px;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--sas-blue);

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 800;
}

.sas-roadmap-arrow
{
    padding: 0.55rem 0;

    color: var(--sas-blue);

    text-align: center;
}


/* =========================================================
   FINAL CHECKLIST
   ========================================================= */

.sas-final-card
{
    padding: 2rem;

    border-top: 5px solid var(--sas-blue);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fafe 100%
        );
}

.sas-final-card h2
{
    margin-bottom: 1.6rem;
}

.sas-final-list
{
    display: grid;

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

    gap:
        0.85rem
        2rem;

    margin: 0;

    padding-left: 1.5rem;
}

.sas-final-list li
{
    padding-left: 0.25rem;

    line-height: 1.55;
}

.sas-final-list li::marker
{
    color: var(--sas-blue);

    font-weight: 800;
}


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

.sas-practice-cta
{
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding: 2rem;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--sas-blue-dark) 0%,
            var(--sas-blue) 60%,
            var(--sas-teal) 100%
        );

    box-shadow:
        0 16px 40px
        rgba(
            15,
            95,
            143,
            0.2
        );
}

.sas-practice-cta h2,
.sas-practice-cta p
{
    color: #ffffff;
}

.sas-practice-cta h2
{
    margin-bottom: 0.65rem;
}

.sas-practice-cta p
{
    max-width: 580px;

    margin-bottom: 0;

    opacity: 0.9;
}

.sas-practice-cta .sas-card-label
{
    color:
        rgba(
            255,
            255,
            255,
            0.8
        );
}

.sas-practice-cta .btn
{
    flex-shrink: 0;

    border-color: #ffffff;

    background: #ffffff;

    color: var(--sas-blue-dark);

    font-weight: 700;
}

.sas-practice-cta .btn:hover
{
    border-color: #ffffff;

    background: #f4f9fc;

    color: var(--sas-blue-dark);
}


/* =========================================================
   RELATED RESOURCES
   ========================================================= */

.sas-related-section
{
    padding-top: 1rem;
}

.sas-related-section > h2
{
    margin-bottom: 1.7rem;
}

.sas-related-grid
{
    display: grid;

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

    gap: 1.25rem;
}

.sas-related-card
{
    display: block;

    padding: 1.6rem;

    border: 1px solid var(--sas-border);

    border-radius: 16px;

    background: var(--sas-white);

    box-shadow: var(--sas-shadow);

    color: var(--sas-slate);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.sas-related-card:hover
{
    transform: translateY(-3px);

    border-color: #a9cfe3;

    box-shadow: var(--sas-shadow-hover);

    color: var(--sas-slate);

    text-decoration: none;
}

.sas-related-icon
{
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 1rem;

    border-radius: 12px;

    background: var(--sas-blue-soft);

    color: var(--sas-blue);

    font-size: 1.1rem;
}

.sas-related-card h3
{
    margin-bottom: 0.6rem;

    font-size: 1.08rem;
}

.sas-related-card p
{
    margin-bottom: 0;

    line-height: 1.6;
}


/* =========================================================
   HOVER EFFECTS
   ========================================================= */

.sas-comparison-card,
.sas-method-card,
.sas-rule-card,
.sas-test-result-card,
.sas-choice-card,
.sas-mistake-card,
.sas-reference-card
{
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.sas-comparison-card:hover,
.sas-method-card:hover,
.sas-rule-card:hover,
.sas-test-result-card:hover,
.sas-choice-card:hover,
.sas-mistake-card:hover,
.sas-reference-card:hover
{
    transform: translateY(-2px);

    box-shadow: var(--sas-shadow-hover);
}


/* =========================================================
   MATHJAX SAFETY
   ========================================================= */

.sas-formula-card,
.sas-definition-large-card,
.sas-equivalence-card,
.sas-example-card,
.sas-reference-card,
.sas-comparison-card,
.sas-method-card,
.sas-rule-card,
.sas-test-result-card
{
    overflow-x: auto;
}

#sequences-series-guide mjx-container[display="true"]
{
    margin: 1rem 0 !important;
}


/* =========================================================
   CONTACT CTA COLOR PROTECTION
   ========================================================= */

#sequences-series-guide #guideContactCtaTitle
{
    color: #ffffff !important;
}

#sequences-series-guide #guideContactCtaTitle ~ p
{
    color:
        rgba(
            255,
            255,
            255,
            0.78
        ) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px)
{

    .sas-section
    {
        margin-top: 4.5rem;
    }

    .sas-test-result-grid
    {
        grid-template-columns: 1fr;
    }

    .sas-practice-cta
    {
        align-items: flex-start;

        flex-direction: column;
    }

    .sas-practice-cta .btn
    {
        width: 100%;
    }

}


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

@media (max-width: 767.98px)
{

    #sequences-series-guide
    {
        font-size: 0.98rem;
    }

    .sas-section
    {
        margin-top: 4rem;
    }

    .sas-section-heading
    {
        margin-bottom: 1.5rem;
    }

    .sas-section-heading h2,
    .sas-intro h2,
    .sas-final-card h2,
    .sas-practice-cta h2,
    .sas-related-section > h2
    {
        font-size: 1.65rem;
    }


    .sas-definition-card
    {
        align-items: flex-start;

        flex-direction: column;

        padding: 1.5rem;
    }

    .sas-definition-icon
    {
        flex-basis: 50px;

        width: 50px;
        height: 50px;
    }


    .sas-comparison-grid,
    .sas-method-grid,
    .sas-rule-grid,
    .sas-choice-grid,
    .sas-mistake-grid,
    .sas-reference-grid,
    .sas-related-grid,
    .sas-final-list
    {
        grid-template-columns: 1fr;
    }


    .sas-example-card,
    .sas-idea-card,
    .sas-warning-card,
    .sas-important-card,
    .sas-checklist-card,
    .sas-final-card,
    .sas-practice-cta,
    .sas-visual-card
    {
        padding: 1.5rem;
    }


    .sas-formula-card,
    .sas-definition-large-card,
    .sas-equivalence-card
    {
        padding:
            1.5rem
            1rem;
    }


    .sas-tip-card
    {
        padding: 1.4rem;
    }


    .sas-mistake-card
    {
        min-height: 0;
    }


    .sas-roadmap-step
    {
        align-items: flex-start;

        padding: 1.35rem;
    }

    .sas-roadmap-number
    {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }


    .sas-graph
    {
        height: 340px;
    }

    .sas-number-line-graph
    {
        height: 220px;
    }


    .sas-final-list
    {
        display: block;
    }

    .sas-final-list li
    {
        margin-bottom: 0.8rem;
    }

}


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

@media (max-width: 575.98px)
{

    .sas-section
    {
        margin-top: 3.5rem;
    }

    .sas-section-heading h2,
    .sas-intro h2,
    .sas-final-card h2,
    .sas-practice-cta h2,
    .sas-related-section > h2
    {
        font-size: 1.5rem;
    }

    .sas-example-card,
    .sas-idea-card,
    .sas-warning-card,
    .sas-important-card,
    .sas-tip-card,
    .sas-checklist-card,
    .sas-final-card,
    .sas-practice-cta,
    .sas-visual-card
    {
        border-radius: 14px;
    }

    .sas-idea-heading,
    .sas-warning-heading
    {
        align-items: flex-start;
    }

    .sas-idea-icon,
    .sas-warning-icon
    {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

    .sas-tip-card
    {
        flex-direction: column;
    }

    .sas-mistake-card
    {
        padding:
            4.4rem
            1.35rem
            1.35rem;
    }

    .sas-mistake-number
    {
        top: 1.2rem;
        left: 1.3rem;
    }

    .sas-reference-card
    {
        min-height: 130px;
    }

    .sas-graph
    {
        height: 300px;
    }

    .sas-number-line-graph
    {
        height: 200px;
    }

    #sequences-series-guide mjx-container
    {
        font-size: 95% !important;
    }

}