/* =========================================================
   ToolZen Hub
   About Page
========================================================= */

:root {

    --about-green: #00A651;
    --about-green-dark: #008C45;
    --about-green-light: #E6F6ED;

    --about-bg: #F8FAFC;
    --about-white: #FFFFFF;

    --about-heading: #0F172A;
    --about-body: #64748B;
    --about-muted: #94A3B8;

    --about-border: #E2E8F0;

}


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

#about-page {

    background: var(--about-bg);
    color: var(--about-heading);

}


/* =========================================================
   CONTAINER
========================================================= */

.about-container {

    width: min(
        1120px,
        calc(100% - 32px)
    );

    margin: 0 auto;

}


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

.about-intro {

    padding: 28px 0 34px;

    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #FFFFFF 100%
        );

    border-bottom: 1px solid var(--about-border);

}


.about-breadcrumb {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

    font-size: 12px;

    color: var(--about-muted);

}


.about-breadcrumb .calculator-breadcrumb {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: inherit;

    color: inherit;

}


.about-breadcrumb .calculator-breadcrumb a {

    color: var(--about-green);

    text-decoration: none;

}


.about-breadcrumb .calculator-breadcrumb a:hover {

    color: var(--about-green-dark);

}


.about-breadcrumb .calculator-breadcrumb strong {

    color: var(--about-muted);

    font-weight: 500;

}


.about-breadcrumb > .calculator-breadcrumb > span {

    color: var(--about-muted);

}


/* =========================================================
   INTRO CONTENT
========================================================= */

.about-intro-content {

    max-width: 760px;

}


.about-eyebrow {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--about-green);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;

}


.about-intro-content h1 {

    margin: 0;

    font-size: clamp(
        32px,
        4vw,
        44px
    );

    line-height: 1.12;

    letter-spacing: -.04em;

}


.about-intro-content h1 span {

    color: var(--about-green);

}


.about-intro-content p {

    max-width: 740px;

    margin: 13px 0 0;

    color: var(--about-body);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   FEATURES
========================================================= */

.about-features-section {

    padding: 24px 0 0;

}


.about-features {

    display: grid;

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

    gap: 1px;

    overflow: hidden;

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

    border-radius: 12px;

    background: var(--about-border);

    box-shadow:
        0 3px 12px rgba(
            15,
            23,
            42,
            .04
        );

}


.about-feature-card {

    min-height: 190px;

    padding: 25px 20px;

    background: var(--about-white);

    text-align: center;

}


.about-feature-icon {

    display: grid;

    place-items: center;

    width: 46px;

    height: 46px;

    margin: 0 auto 13px;

    border-radius: 11px;

    background: var(--about-green-light);

    color: var(--about-green);

}


.about-feature-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.about-feature-card h2 {

    margin: 0;

    font-size: 15px;

    line-height: 1.4;

}


.about-feature-card p {

    max-width: 220px;

    margin: 7px auto 0;

    color: var(--about-body);

    font-size: 12px;

    line-height: 1.55;

}


/* =========================================================
   GENERAL CONTENT SECTION
========================================================= */

.about-content-section {

    padding: 24px 0 0;

}


.about-content-card {

    padding: 30px;

    background: var(--about-white);

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

    border-radius: 12px;

}


.about-section-heading > span {

    display: block;

    margin-bottom: 7px;

    color: var(--about-green);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;

}


.about-section-heading h2 {

    margin: 0;

    font-size: 22px;

    line-height: 1.3;

}


.about-section-heading > p {

    max-width: 760px;

    margin: 8px 0 0;

    color: var(--about-body);

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   TEXT GRID
========================================================= */

.about-text-grid {

    display: grid;

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

    gap: 22px 35px;

    margin-top: 25px;

}


.about-text-grid h3 {

    margin: 0 0 6px;

    font-size: 14px;

}


.about-text-grid p {

    margin: 0;

    color: var(--about-body);

    font-size: 12px;

    line-height: 1.65;

}


/* =========================================================
   OFFER
========================================================= */

.about-offer-section {

    padding: 24px 0 0;

}


.about-offer-card {

    padding: 30px;

    background: var(--about-white);

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

    border-radius: 12px;

}


.about-category-grid {

    display: grid;

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

    gap: 12px;

    margin-top: 22px;

}


.about-category {

    padding: 17px;

    border: 1px solid #EEF2F7;

    border-radius: 9px;

    background: #FCFDFC;

}


.about-category strong {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

}


.about-category p {

    margin: 0;

    color: var(--about-body);

    font-size: 11px;

    line-height: 1.55;

}


.about-offer-action {

    margin-top: 24px;

}


.about-primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 18px;

    border: 1px solid var(--about-green);

    border-radius: 7px;

    background: var(--about-green);

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;

}


.about-primary-button:hover {

    background: var(--about-green-dark);

    transform: translateY(-1px);

}


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

.about-disclaimer-section {

    padding: 24px 0 55px;

}


.about-disclaimer {

    padding: 20px 22px;

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

    border-radius: 10px;

    background: #F1F5F9;

}


.about-disclaimer h2 {

    margin: 0 0 8px;

    font-size: 14px;

}


.about-disclaimer p {

    margin: 7px 0 0;

    color: var(--about-body);

    font-size: 11px;

    line-height: 1.6;

}


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

@media (max-width: 900px) {

    .about-features {

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

    }


    .about-category-grid {

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

    }

}


@media (max-width: 600px) {

    .about-container {

        width: min(
            100% - 24px,
            1120px
        );

    }


    .about-intro {

        padding: 22px 0 28px;

    }


    .about-intro-content h1 {

        font-size: 31px;

    }


    .about-intro-content p {

        font-size: 13px;

    }


    .about-features {

        grid-template-columns: 1fr;

    }


    .about-feature-card {

        min-height: auto;

        padding: 23px 18px;

    }


    .about-content-card,
    .about-offer-card {

        padding: 22px 18px;

    }


    .about-text-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .about-category-grid {

        grid-template-columns: 1fr;

    }


    .about-primary-button {

        width: 100%;

    }


    .about-disclaimer-section {

        padding-bottom: 40px;

    }

}

/* =========================================================
   OFFER CATEGORY LINKS
========================================================= */

.about-offer-list li a {
    color: var(--about-heading);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}


.about-offer-list li a:hover {
    color: var(--about-green);
}


.about-offer-list li > span:last-child {
    color: #475569;
}