/**
 * ==========================================================================
 * StabilityTest Theme - Homepage Styles
 * ==========================================================================
 *
 * Styles for the front page experience.
 *
 * Responsibilities:
 *
 * - Hero section
 * - Homepage messaging
 * - Tool section layout
 * - Homepage content blocks
 * - Future marketing sections
 *
 * This file should contain styles specific to front-page
 * presentation only.
 *
 * @package StabilityTest_Theme
 * @since 1.0.0
 * ==========================================================================
 */

 .hero {
    padding: 88px 24px 42px;
    text-align: center;
}

.hero__inner {
    max-width: 820px;
    margin: 0 auto;
}

.hero__title {
    margin: 0 0 18px;
    color: var(--stabilitytest-color-text);
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.hero__description {
    margin: 0 auto;
    max-width: 680px;
    color: var(--stabilitytest-color-text-subtle);
    font-size: 1.1rem;
}

.tool-section {
    max-width: var(--stabilitytest-container-width);
    margin: 0 auto;
    padding: 72px 24px 96px;
}

@media (max-width: 640px) {

    .tool-section {
        padding: 32px 0 64px;
    }

}