/* ==========================================================================
   HOMEPAGE ELEMENTS
   ========================================================================== */


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

.section-header {

    max-width: var(--homepage-reading-width);

    margin-inline: auto;

   margin-bottom: calc(var(--homepage-space-2xl) - .5rem);

    text-align: center;

}

.section-header h2 {

    max-width: 16ch;

    margin-inline: auto;

    text-wrap: balance;

    line-height: 1.08;

    letter-spacing: -0.03em;

}

.section-header>* {

    margin: 0;

}

.section-header>*+* {

    margin-top: var(--homepage-space-md);

}

.section-header>*+* {

    margin-top: var(--homepage-space-md);

}



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

.content-container {

    max-width: var(--homepage-reading-width);

    margin-inline: auto;

}

.content-container>* {

    margin: 0;

}

.content-container>*+* {

    margin-top: calc(var(--homepage-space-md) + .25rem);

}


.content-container p {
    max-width: var(--homepage-text-width);
}


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

.hero-description {

    max-width: 52ch;

    margin: 0;

    line-height: 1.7;

    text-wrap: pretty;

}

.hero-content h1 {

    max-width: 14ch;

    font-size: clamp(2.5rem, 3.4vw, 3.7rem);

    line-height: 1.05;

    letter-spacing: -0.035em;

    text-wrap: balance;

}

.hero-content .hero-description {

    margin-top: 1.5rem;

}

.hero-content .hero-actions {

    margin-top: 1rem;

}


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

.section-lead {

    max-width: 62ch;

    margin-inline: auto;

    margin-bottom: 0;

    line-height: 1.8;

    text-wrap: pretty;

}



/* ==========================================================================
   FIGURES
   ========================================================================== */

.figure {

    margin-top: calc(var(--homepage-space-2xl) - .75rem);

    margin-bottom: var(--homepage-space-2xl);

}

.figure img {
    display: block;
    width: 100%;
    max-width: var(--homepage-figure-max-width);
    height: auto;
    margin-inline: auto;
}



/* ==========================================================================
   STRATEGIC STATEMENT
   ========================================================================== */

.strategic-statement {

    max-width: 58ch;

    margin-inline: auto;

    margin-top: calc(var(--homepage-space-2xl) - .75rem);

    margin-bottom: 0;

    text-align: center;

    line-height: 1.8;

}



/* ==========================================================================
   HOMEPAGE NAVIGATION
   ========================================================================== */

.navigation {

    margin-top: var(--homepage-space-xl);

}



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

@media (min-width:768px) {

    .section-header {

        margin-bottom: var(--homepage-space-3xl);

    }

}


/* ==========================================================================
   PLATFORM SPACING
   ========================================================================== */

.platform-overview {

    padding-top: 3.5rem;

}

.business-growth-loop {

    padding-top: 3.5rem;

}


/* ==========================================================================
   SIGNATURE
   ========================================================================== */

.homepage-signature {

    padding-top: 2rem;

    padding-bottom: 4rem;

    text-align: center;

}

.homepage-signature p {

    max-width: 42rem;

    margin-inline: auto;

    padding-top: 2rem;

    border-top: 1px solid rgba(0,0,0,.08);

    color: var(--ink-700);

    font-size: .95rem;

    line-height: 1.8;

    opacity: .8;

}


.homepage-reality .section-conclusion {

    max-width: 56ch;

    margin-inline: auto;

    text-align: center;

}


.homepage-problem .content-container {

    text-align: center;

}

.homepage-problem .content-container p {

    margin-inline: auto;

}