@media (max-width: 1199px) {
    .site-nav,
    .site-header-actions {
        display: none;
    }

    .menu {
        display: block;
        position: relative;
    }
}

@media (max-width: 899px) {
    :root {
        --h1-size: 38px;
        --h1-line: 44px;
        --h1-track: -1px;
        --h2-size: 30px;
        --h2-line: 36px;
        --h2-track: -0.6px;
        --h3-size: 22px;
        --h3-line: 28px;
        --h4-size: 18px;
        --h4-line: 24px;
        --lede-size: 17px;
        --lede-line: 26px;
        --body-size: 15px;
        --body-line: 23px;
        --small-size: 13px;
        --small-line: 19px;
        --mono-size: 11px;
        --mono-line: 15px;
        --bubble-size: 15px;
        --bubble-line: 22px;

        --gutter: 20px;
        --section-pad: 56px;
        --stack-gap: 28px;
        --radius-card: 20px;
        --radius-chat: 22px;
        --radius-bubble: 16px;
        --radius-button: 14px;
        --card-pad: 22px;
        --button-height: 52px;
        --button-sm-height: 42px;
        --input-height: 50px;
        --area-height: 96px;

        --header-height: 72px;
        --logo-width: 132px;
        --logo-height: 48px;
        --mascot-width: 172px;
        --mascot-visible: 104px;
        --contacts-mascot-width: 166px;
        --contacts-mascot-visible: 100px;
    }

    .hero {
        padding-top: 20px;
    }

    .hero-grid,
    .split,
    .split-top,
    .modes,
    .compare,
    .custom-demo,
    .control,
    .roles,
    .faq-grid,
    .pilot,
    .lead-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        grid-template-areas:
            'eyebrow'
            'title'
            'pitch'
            'chat';
        row-gap: 20px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
    }

    .hero-actions .video-link {
        align-self: center;
    }

    .hero-chat {
        margin-top: calc(var(--mascot-visible) - 12px);
    }

    .ad-pill {
        display: none;
    }

    .mode-note {
        width: auto;
        margin-left: 0;
    }

    .stack-center {
        align-items: flex-start;
        text-align: left;
    }

    .story-step {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .story-note,
    .story-aside,
    .story-main {
        grid-column: 1;
    }

    .story-note {
        flex-direction: row;
        align-items: center;
    }

    .story-note::after {
        display: none;
    }

    .mode {
        padding: var(--card-pad);
    }

    .mode-head .h3 {
        font-size: 26px;
        line-height: 32px;
    }

    .mode .body {
        font-size: var(--body-size);
        line-height: var(--body-line);
    }

    .mode-example {
        padding: 14px;
    }

    .tip {
        align-items: flex-start;
        padding: 18px;
    }

    .listing-field {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 18px;
    }

    .listing-head {
        padding: 18px;
    }

    .listing-head .chip {
        display: none;
    }

    .photos-four .photo img {
        width: 140px;
    }

    .custom-demo {
        gap: 32px;
    }

    .custom-chat {
        order: -1;
    }

    .custom-action {
        align-items: stretch;
    }

    .lookup {
        grid-template-columns: 22px 1fr;
    }

    .lookup-result {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .faq-q {
        font-size: 17px;
        line-height: 24px;
    }

    .faq-q::after {
        width: 30px;
        height: 30px;
    }

    .lead-form,
    .contacts-card {
        padding: var(--card-pad);
    }

    .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: 12px 32px;
    }

    .footer-legal {
        align-items: flex-start;
    }
}