/* Isolated intro system for Product, Solutions, How It Works, and Security.
   Loaded last so legacy section/header rules do not affect these text blocks. */

:root {
    --section-intro-max-width: 1000px;
    --section-intro-top-desktop: 1rem;
    --section-intro-top-mobile: 0;
    --section-intro-overlay-offset-desktop: 1rem;
    --section-intro-overlay-offset-mobile: 84px;
}

#product-page .page-content-wrapper,
#solutions-page .page-content-wrapper,
#how-it-works-page .workflow-wrapper,
#security-page .security-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0 !important;
}

#product-page .section-intro,
#solutions-page .section-intro,
#how-it-works-page .section-intro,
#security-page .section-intro {
    position: absolute;
    top: var(--section-intro-overlay-offset-desktop);
    left: 0;
    right: 0;
    z-index: 40;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    margin: 0 auto;
    box-sizing: border-box;
    pointer-events: none;
}

#product-page .section-intro__inner,
#solutions-page .section-intro__inner,
#how-it-works-page .section-intro__inner,
#security-page .section-intro__inner {
    width: 100%;
    max-width: var(--section-intro-max-width);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

#product-page .section-intro__text,
#solutions-page .section-intro__text,
#how-it-works-page .section-intro__text,
#security-page .section-intro__text {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
    opacity: 0;
}

/* Decouple intro text from the UI region so widgets can stay perfectly centered. */
#product-page .page-ui,
#solutions-page .page-ui,
#how-it-works-page .workflow-ui,
#security-page .security-ui {
    position: absolute !important;
    inset: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 0;
}

#product-page .section-intro__text.is-visible,
#solutions-page .section-intro__text.is-visible,
#how-it-works-page .section-intro__text.is-visible,
#security-page .section-intro__text.is-visible {
    opacity: 1;
}

.section-intro__cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 4px;
    vertical-align: text-bottom;
    background-color: var(--accent);
    animation: blink 0.7s infinite;
}

@media (max-width: 768px) {
    :root {
        --mobile-section-content-padding: clamp(16px, 3vh, 24px);
        --mobile-intro-ui-gap: clamp(18px, 3.5vh, 32px);
    }

    #product-page.page-canvas,
    #solutions-page.page-canvas,
    #how-it-works-page.page-canvas,
    #security-page.page-canvas {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden;
    }

    #product-page .page-content-wrapper,
    #solutions-page .page-content-wrapper,
    #how-it-works-page .workflow-wrapper,
    #security-page .security-wrapper {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: var(--mobile-section-content-padding) 20px 20px !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    #product-page .section-intro,
    #solutions-page .section-intro,
    #how-it-works-page .section-intro,
    #security-page .section-intro {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: 40;
        flex: 0 0 auto;
        padding-top: 0;
    }

    #product-page .page-ui,
    #solutions-page .page-ui,
    #how-it-works-page .workflow-ui,
    #security-page .security-ui {
        position: relative !important;
        inset: auto;
        flex: 1 1 auto;
        min-height: 0;
        margin-top: var(--mobile-intro-ui-gap) !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    #solutions-page .page-ui {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #product-page .ui-center-stage,
    #solutions-page .ui-center-stage,
    #how-it-works-page .ui-center-stage,
    #security-page .ui-center-stage {
        height: 100%;
        min-height: 0;
        align-items: flex-start;
        transform: none !important;
    }

    #product-page .section-intro__text,
    #solutions-page .section-intro__text,
    #how-it-works-page .section-intro__text,
    #security-page .section-intro__text {
        font-size: 1.1rem;
        font-weight: 300;
    }

    #security-page {
        --mobile-intro-ui-gap: 0rem;
    }

    #security-page .security-ui {
        flex: 0 0 auto;
    }

    #security-page .ui-center-stage,
    #security-page .shield-stack-container {
        height: auto;
        flex: 0 0 auto;
        align-items: flex-start;
    }

    #security-page .shield-stack-container {
        min-height: clamp(300px, 42vh, 390px);
    }
}