/* =========================================================
   MARAMATTA EXPERIENCE LANDING PAGE
   05 · WHY MARAMATTA / CONTEXTUAL PROOF
   ========================================================= */


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

.landing-proof {

    position: relative;

    width: 100%;

    background:
        var(--ms-bg);

    overflow: hidden;
}


/*
 * A little more breathing room than the homepage version.
 *
 * The landing page should feel editorial rather than compressed.
 */

.landing-proof .container {

    position: relative;
}


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

.landing-proof .section-header {

    max-width: 900px;

    margin-inline: auto;

    text-align: center;
}


.landing-proof .showcase-header {

    max-width: 820px;

    margin-inline: auto;
}


/*
 * The heading is deliberately restrained.
 *
 * This is proof, not another emotional climax.
 */

.landing-proof .showcase-title {

    max-width: 760px;

    margin-inline: auto;
}


.landing-proof .showcase-description {

    max-width: 680px;

    margin-inline: auto;
}


/* =========================================================
   EDITORIAL BODY
   ========================================================= */

.landing-proof .section-body {

    position: relative;

    margin-top:
        clamp(
            3.5rem,
            6vw,
            6rem
        );
}


/*
 * We deliberately inherit the main editorial system.
 *
 * Do NOT redefine:
 *
 * .maramatta-editorial
 * .editorial-chapter
 * .editorial-chapter__meta
 * .editorial-chapter__content
 *
 * here.
 *
 * Those belong to the global editorial language.
 */

.landing-proof__editorial {

    position: relative;

    width: 100%;
}


/* =========================================================
   CHAPTER REFINEMENT
   ========================================================= */

/*
 * The homepage has six chapters.
 *
 * Landing pages have fewer.
 *
 * Therefore the visual rhythm can be slightly more spacious.
 */

.landing-proof .editorial-chapter {

    padding-block:
        clamp(
            2.5rem,
            4.5vw,
            4.75rem
        );
}


/*
 * Keep the editorial content readable.
 */

.landing-proof .editorial-chapter__text {

    max-width: 620px;
}


/*
 * The title should carry authority without becoming
 * another oversized landing-page headline.
 */

.landing-proof .editorial-chapter__title {

    max-width: 680px;

    text-wrap: balance;
}


/* =========================================================
   META NUMBERS
   ========================================================= */

/*
 * Slightly quieter than the homepage.
 *
 * The landing page already has a strong visual hierarchy.
 */

.landing-proof .editorial-chapter__number {

    opacity: .65;
}


/* =========================================================
   SYMBOLS
   ========================================================= */

.landing-proof .editorial-chapter__symbol {

    opacity: .78;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


.landing-proof .editorial-chapter:hover
.editorial-chapter__symbol {

    opacity: 1;

    transform:
        translateY(-2px);
}


/*
 * Respect touch devices.
 */

@media (hover: none) {

    .landing-proof .editorial-chapter__symbol {

        transform: none;

        opacity: .78;
    }

}


/* =========================================================
   EDITORIAL DIVIDERS
   ========================================================= */

.landing-proof .editorial-divider {

    opacity: .7;
}


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

.landing-proof__cta {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    padding-top:
        clamp(
            1.75rem,
            3vw,
            3rem
        );

    border-top:
        1px solid
        rgba(39,73,33,.12);
}


/*
 * Quiet editorial link.
 *
 * This is intentionally NOT a large CTA button.
 *
 * The major conversion moment comes later.
 */

.landing-proof__link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    color:
        var(--ms-green);

    text-decoration: none;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .14em;

    line-height: 1.4;

    text-transform: uppercase;

    padding-bottom: .45rem;

    transition:
        color .3s ease,
        opacity .3s ease;
}


/*
 * Editorial underline.
 */

.landing-proof__link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        currentColor;

    transform-origin: left;

    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1);
}


.landing-proof__link span {

    display: inline-block;

    font-size: 1.05rem;

    line-height: 1;

    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1);
}


.landing-proof__link:hover {

    color:
        var(--ms-orange);

    opacity: .9;
}


.landing-proof__link:hover::after {

    transform:
        scaleX(.45);
}


.landing-proof__link:hover span {

    transform:
        translateX(4px);
}


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

@media (max-width: 1024px) {

    .landing-proof .section-body {

        margin-top:
            clamp(
                3rem,
                5vw,
                4.5rem
            );
    }


    .landing-proof .editorial-chapter {

        padding-block:
            3rem;
    }


    .landing-proof .editorial-chapter__text {

        max-width: 560px;
    }

}


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

@media (max-width: 767px) {

    .landing-proof .section-header {

        text-align: left;
    }


    .landing-proof .showcase-header {

        margin-inline: 0;
    }


    .landing-proof .showcase-title {

        margin-inline: 0;
    }


    .landing-proof .showcase-description {

        margin-inline: 0;
    }


    .landing-proof .section-body {

        margin-top:
            2.75rem;
    }


    /*
     * Preserve the editorial chapter structure
     * but give each proof point enough breathing room.
     */

    .landing-proof .editorial-chapter {

        padding-block:
            2.5rem;
    }


    .landing-proof .editorial-chapter__text {

        max-width: none;
    }


    .landing-proof .editorial-chapter__title {

        max-width: 100%;
    }


    /*
     * CTA becomes part of the editorial rhythm.
     */

    .landing-proof__cta {

        justify-content: flex-start;

        margin-top:
            2rem;

        padding-top:
            1.75rem;
    }


    .landing-proof__link {

        font-size: .65rem;

        letter-spacing: .13em;
    }

}


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

@media (max-width: 480px) {

    .landing-proof .section-body {

        margin-top:
            2.25rem;
    }


    .landing-proof .editorial-chapter {

        padding-block:
            2.15rem;
    }


    .landing-proof .editorial-chapter__number {

        font-size: .68rem;
    }


    .landing-proof .editorial-chapter__symbol {

        font-size: .9rem;
    }


    .landing-proof__cta {

        margin-top:
            1.5rem;

        padding-top:
            1.5rem;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .landing-proof .editorial-chapter__symbol,
    .landing-proof__link,
    .landing-proof__link::after,
    .landing-proof__link span {

        transition: none;
    }

}







/* =========================================================
   WHY MARAMATTA ¡ª EDITORIAL RHYTHM
   ========================================================= */

.landing-proof .maramatta-editorial {
    display: block;
}






/*.landing-proof .editorial-chapter {
    min-height: 0;
    height: auto;
    /*margin: 0;
    padding-block: clamp(2.5rem, 4vw, 4rem);
}*/
.landing-proof .editorial-chapter {
    min-height: 0;
    height: auto;
    padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}



.landing-proof .editorial-chapter + .editorial-chapter {
    margin-top: clamp(1rem, 2vw, 2rem);
}
/* Tighter separation between chapters */

.landing-proof .editorial-chapter + .editorial-chapter {
    margin-top: clamp(0.25rem, 0.75vw, 0.75rem);
}