/* Chtio Stage433: one geometry system for public and authentication pages. */

:root {
    --stage433-shell-width: 1180px;
    --stage433-shell-gutter: 40px;
    --stage433-shell-gutter-tablet: 28px;
    --stage433-shell-gutter-mobile: 20px;
    --stage433-page-top: 30px;
    --stage433-landing-hero-height: 540px;
    --stage433-compact-hero-height: 360px;
    --stage433-section-gap: 72px;
    --stage433-auth-frame-height: 704px;
}

html {
    scrollbar-gutter: stable;
}

.chtio_stage433_public,
.chtio_stage433_auth {
    min-width: 320px;
}

/*
 * Public shell.
 * Every public page, the header and the footer use the same horizontal line.
 */
.chtio_stage433_public .chtio_public_header_inner,
.chtio_stage433_public .chtio_public_footer_inner,
.chtio_stage433_public .stage429_home,
.chtio_stage433_public .chtio_public_main > :where(
    .public-inner-page,
    .stage279_marketing_page,
    .stage281_guides_index,
    .stage281_guide_page,
    .chtio_blog_page,
    .chtio_blog_article,
    .chtio_download_page,
    .public-not-found
) {
    width: min(
        var(--stage433-shell-width),
        calc(100% - var(--stage433-shell-gutter))
    );
    margin-right: auto;
    margin-left: auto;
}

.chtio_stage433_public .chtio_public_header_inner {
    min-height: 72px;
}

.chtio_stage433_public .chtio_public_main {
    min-height: 68vh;
}

/*
 * Home page.
 * The home page used a wider 1220px shell than the rest of the site.
 * Stage433 locks it to the same 1180px grid as every other public page.
 */
.chtio_stage433_public .stage429_hero {
    padding-top: 54px;
}

.chtio_stage433_public .stage429_hero_grid {
    min-height: var(--stage433-landing-hero-height);
}

.chtio_stage433_public .stage429_preview_section,
.chtio_stage433_public .stage429_value_section,
.chtio_stage433_public .stage429_use_cases,
.chtio_stage433_public .stage429_guides,
.chtio_stage433_public .stage429_steps_section,
.chtio_stage433_public .stage429_after_section,
.chtio_stage433_public .stage429_faq_section,
.chtio_stage433_public .stage429_final_section {
    margin-top: var(--stage433-section-gap);
}

/*
 * Landing page first screens.
 * Pages with a visual block now start from one baseline and one minimum height.
 */
.chtio_stage433_public.chtio_stage432_public :where(
    .public-inner-hero,
    .stage279_marketing_hero,
    .stage281_guides_hero,
    .chtio_blog_hero
) {
    min-height: var(--stage433-landing-hero-height);
    margin-top: var(--stage433-page-top);
    padding: 48px;
}

.chtio_stage433_public .chtio_download_hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--stage433-compact-hero-height);
    margin-top: var(--stage433-page-top);
    padding: 48px;
}

.chtio_stage433_public .stage281_article,
.chtio_stage433_public .chtio_blog_article {
    margin-top: var(--stage433-page-top);
}

.chtio_stage433_public .stage281_article_header,
.chtio_stage433_public .chtio_blog_article_header {
    width: 100%;
    max-width: none;
    min-height: var(--stage433-compact-hero-height);
    margin-right: auto;
    margin-left: auto;
    padding: 46px 48px;
}

.chtio_stage433_public .stage281_article_header > :where(h1, p, div),
.chtio_stage433_public .chtio_blog_article_header > :where(h1, p, div) {
    max-width: 860px;
}

/*
 * Vertical rhythm.
 * Old page families had slightly different section gaps, which made page changes
 * feel like the whole layout was moving.
 */
.chtio_stage433_public.chtio_stage432_public :where(
    .public-page-section,
    .stage279_section,
    .stage330_product_facts,
    .stage287_quick_answer,
    .stage288_conversion_path,
    .stage281_guides_intro,
    .stage281_guide_grid,
    .chtio_integrations_section,
    .stage287_related_section,
    .stage281_related,
    .chtio_blog_grid,
    .chtio_blog_cta,
    .stage279_final_cta
) {
    margin-top: var(--stage433-section-gap);
}

.chtio_stage433_public.chtio_stage432_public :where(
    .public-page-heading,
    .stage279_section_head,
    .stage330_product_facts_head,
    .stage288_conversion_head,
    .chtio_integrations_head,
    .stage287_related_head,
    .stage281_guides_intro
) {
    margin-bottom: 28px;
}

/*
 * Card grids use equal row heights. Cards in one row no longer end on different
 * baselines simply because one title wrapped to an extra line.
 */
.chtio_stage433_public.chtio_stage432_public :where(
    .public-feature-cards,
    .stage279_card_grid,
    .stage280_scenario_grid,
    .stage288_conversion_steps,
    .stage330_product_facts_grid,
    .stage283_metric_grid,
    .stage280_fit_grid,
    .stage287_related_grid,
    .stage281_guide_grid,
    .stage281_related_grid,
    .chtio_download_grid,
    .chtio_integrations_grid,
    .chtio_blog_grid,
    .chtio_stage398_plan_grid,
    .public-plan-grid-modern
) {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.chtio_stage433_public.chtio_stage432_public :where(
    .public-feature-cards > article,
    .stage279_card,
    .stage280_scenario_grid > article,
    .stage288_conversion_steps > article,
    .stage330_product_facts_grid > article,
    .stage283_metric_group,
    .stage280_fit_card,
    .stage287_related_grid > a,
    .stage281_guide_card,
    .stage281_related_grid > a,
    .chtio_download_card,
    .chtio_integration_card,
    .chtio_blog_card,
    .chtio_stage398_plan_grid > article,
    .public-plan-grid-modern > article
) {
    height: 100%;
}

/*
 * Footer starts from the same baseline on all page families.
 */
.chtio_stage433_public .chtio_public_footer {
    margin-top: 80px;
}

/*
 * Authentication shell.
 * Login, registration, password recovery and activation use exactly the same
 * desktop frame size. Short forms stay vertically centered. Long forms scroll
 * only inside the form column instead of changing the dimensions of the page.
 */
.chtio_stage433_auth .stage431_auth_page {
    width: min(
        var(--stage433-shell-width),
        calc(100% - var(--stage433-shell-gutter))
    );
    min-height: 100dvh;
    padding-top: 18px;
    padding-bottom: 14px;
}

.chtio_stage433_auth .stage431_auth_topbar {
    min-height: 58px;
    margin-bottom: 14px;
}

.chtio_stage433_auth .stage431_auth_frame {
    align-self: center;
    width: 100%;
    height: var(--stage433-auth-frame-height);
    min-height: var(--stage433-auth-frame-height);
    max-height: var(--stage433-auth-frame-height);
}

.chtio_stage433_auth .stage431_auth_story,
.chtio_stage433_auth .stage431_auth_form_area {
    height: 100%;
    min-height: 0;
}

.chtio_stage433_auth .stage431_auth_story {
    padding: 42px;
}

.chtio_stage433_auth .stage431_auth_form_area {
    overflow: hidden;
    padding: 38px 46px;
}

.chtio_stage433_auth .stage431_auth_form_wrap {
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 460px;
}

.chtio_stage433_auth .auth-card,
.chtio_stage433_auth .activation-card,
.chtio_stage433_auth .project-draft-card {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #c7d7e8 transparent;
}

.chtio_stage433_auth .auth-card::-webkit-scrollbar,
.chtio_stage433_auth .activation-card::-webkit-scrollbar,
.chtio_stage433_auth .project-draft-card::-webkit-scrollbar {
    width: 6px;
}

.chtio_stage433_auth .auth-card::-webkit-scrollbar-thumb,
.chtio_stage433_auth .activation-card::-webkit-scrollbar-thumb,
.chtio_stage433_auth .project-draft-card::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c7d7e8;
}

.chtio_stage433_auth .stage431_auth_footer {
    min-height: 42px;
    padding-top: 8px;
}

@media (max-width: 1080px) {
    :root {
        --stage433-shell-gutter: var(--stage433-shell-gutter-tablet);
        --stage433-landing-hero-height: 0px;
    }

    .chtio_stage433_public .stage429_hero_grid,
    .chtio_stage433_public.chtio_stage432_public :where(
        .public-inner-hero,
        .stage279_marketing_hero,
        .stage281_guides_hero,
        .chtio_blog_hero
    ) {
        min-height: 0;
    }
}

@media (max-width: 980px) {
    .chtio_stage433_auth .stage431_auth_page {
        width: min(760px, calc(100% - var(--stage433-shell-gutter-tablet)));
    }

    .chtio_stage433_auth .stage431_auth_frame {
        height: auto;
        min-height: 680px;
        max-height: none;
    }

    .chtio_stage433_auth .stage431_auth_form_area {
        min-height: 680px;
        overflow: visible;
        padding: 46px 56px;
    }

    .chtio_stage433_auth .stage431_auth_form_wrap {
        height: auto;
        max-width: 500px;
    }

    .chtio_stage433_auth .auth-card,
    .chtio_stage433_auth .activation-card,
    .chtio_stage433_auth .project-draft-card {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 820px) {
    :root {
        --stage433-shell-gutter: var(--stage433-shell-gutter-tablet);
        --stage433-section-gap: 56px;
    }

    .chtio_stage433_public.chtio_stage432_public :where(
        .public-inner-hero,
        .stage279_marketing_hero,
        .stage281_guides_hero,
        .chtio_blog_hero,
        .chtio_download_hero
    ) {
        min-height: 0;
        padding: 34px;
    }

    .chtio_stage433_public .stage281_article_header,
    .chtio_stage433_public .chtio_blog_article_header {
        min-height: 0;
        padding: 34px;
    }
}

@media (max-width: 620px) {
    :root {
        --stage433-shell-gutter: var(--stage433-shell-gutter-mobile);
        --stage433-page-top: 18px;
        --stage433-section-gap: 50px;
    }

    html {
        scrollbar-gutter: auto;
    }

    .chtio_stage433_public .chtio_public_header_inner,
    .chtio_stage433_public .chtio_public_footer_inner,
    .chtio_stage433_public .stage429_home,
    .chtio_stage433_public .chtio_public_main > :where(
        .public-inner-page,
        .stage279_marketing_page,
        .stage281_guides_index,
        .stage281_guide_page,
        .chtio_blog_page,
        .chtio_blog_article,
        .chtio_download_page,
        .public-not-found
    ) {
        width: calc(100% - var(--stage433-shell-gutter));
    }

    .chtio_stage433_public.chtio_stage432_public :where(
        .public-inner-hero,
        .stage279_marketing_hero,
        .stage281_guides_hero,
        .chtio_blog_hero,
        .chtio_download_hero
    ) {
        margin-top: var(--stage433-page-top);
        padding: 26px 22px;
    }

    .chtio_stage433_public .stage281_article_header,
    .chtio_stage433_public .chtio_blog_article_header {
        padding: 26px 22px;
    }

    .chtio_stage433_public .chtio_public_footer {
        margin-top: 58px;
    }

    .chtio_stage433_auth .stage431_auth_page {
        width: 100%;
        padding: 0;
    }

    .chtio_stage433_auth .stage431_auth_frame {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .chtio_stage433_auth .stage431_auth_form_area {
        min-height: 0;
        padding: 34px 20px 44px;
    }
}