main > .header-container {
    text-align: center;
    margin-bottom: 2rem;
}

main > .header-container > h1 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    margin-top: 0;
}

main > .header-container > .subheader {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

main > .header-container > .button {
    width: 100%;
    line-height: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: var(--color-neon-green);
    color: var(--color-black);
}

main > .logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: -1rem;
    margin-left: -1rem;
    overflow: hidden;
}

main > .logos-container > .logo-container {
    height: 100%;
}

main > .logos-container > .logo-container > img {
    height: 100%;
}

main > .feature-summaries-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

main > .feature-summaries-container > .feature-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--color-background-secondary);
    flex: 1;
}

main > .feature-summaries-container > .feature-summary > .title {
    font-weight: bold;
}

main > .feature-summaries-container > .feature-summary > .link {
    display: block;
    text-align: right;
}

main > .connection-options-container {
    text-align: center;
    margin-top: 2rem;
}

main > .secondary-actions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

main > .secondary-actions-container > .secondary-button {
    width: 100%;
}

main > .features-container > .feature {
    margin-top: 2rem;
}

main > .features-container > .feature:first-child {
    margin-top: 0;
}

main > .features-container > .feature > .top-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 2rem;
}

main > .features-container > .feature > .top-container > .left-container > h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main > .features-container > .feature > .top-container > .left-container > .description {
    font-size: 1.5rem;
}

main > .features-container > .feature > .top-container > .right-container {
    width: 100%;
}

main > .features-container > .feature > .top-container > .right-container > .secondary-button {
    width: 100%;
}

main > .features-container > .feature > .bottom-container {
    flex: 1;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-primary);
}

main > .features-container > .feature > .bottom-container > .feature-component  {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-border-primary);
}

main > .features-container > .feature > .bottom-container > .feature-component:last-child  {
    border-bottom: none;
}

main > .features-container > .feature > .bottom-container > .feature-component > .left-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-primary);
}

main > .features-container > .feature > .bottom-container > .feature-component > .left-container > h3 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0;
}
main > .features-container > .feature > .bottom-container > .feature-component > .left-container > .link {
    margin-top: auto;
}

main > .features-container > .feature > .bottom-container > .feature-component > .right-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
    pointer-events: none;
}

main > .features-container > .feature > .bottom-container > .feature-component > .right-container > .title {
    font-size: 1.25rem;
    font-weight: bold;
}

main > .get-started-container {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

main > .get-started-container > h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

main > .get-started-container > .description {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

main > .get-started-container > .button {
    width: 100%;
}

/* Overrides */

.chart-insight {
    margin-top: 0;
    margin-bottom: 0;
}

.timeline {
    margin-top: 1rem;
    margin-bottom: 0;
}

.alert {
    margin-top: 0rem;
    margin-bottom: 0;
}

.visit > .left-container > .agent-name-container > .agent-authentication-container > .hover-content.hidden {
    display: revert;
}

@container (min-width: 60rem) {
    main > .header-container {
        margin-bottom: 4rem;
    }

    main > .header-container > h1 {
        font-size: 4rem;
        line-height: 4rem;
        margin-top: 1rem;
    }
    
    main > .header-container > .button {
        width: revert;
    }

    main > .logos-container {
        height: 1.5rem;
        margin-right: revert;
        margin-left: revert;
        overflow: revert;
    }

    main > .feature-summaries-container {
        flex-direction: row;
        gap: 2rem;
    }

    main > .secondary-actions-container {
        flex-direction: row;
    }
    
    main > .secondary-actions-container > .secondary-button {
        width: revert;
    }
    
    main > .features-container > .feature > .top-container {
        flex-direction: row;
        gap: 10rem;
    }
    
    main > .features-container > .feature > .top-container > .right-container {
        width: revert;
    }
    
    main > .features-container > .feature > .top-container > .right-container > .secondary-button {
        width: revert;
    }

    main > .features-container > .feature > .bottom-container > .feature-component  {
        flex-direction: row;
    }

    main > .features-container > .feature > .bottom-container > .feature-component > .left-container {
        border-bottom: revert;
        border-right: 1px solid var(--color-border-primary);
        padding: 2rem;
    }

    main > .features-container > .feature > .bottom-container > .feature-component > .right-container {
        padding: 2rem;
    }

    main > .get-started-container > .button {
        width: revert;
    } 
    
    /* Overrides */
    
    .session-row {
        gap: 2rem;
    }

    .session-row > .left-container {
        width: revert;
        flex: 1;
    }

    .session-row > .right-container {
        width: revert;
        flex: 1;
    }
}