body {
            font-family: Arial, "Microsoft YaHei", sans-serif
        }

        .hero-grid {
            background-image: linear-gradient(#dbeafe 1px, transparent 1px), linear-gradient(90deg, #dbeafe 1px, transparent 1px);
            background-size: 36px 36px
        }

        @media (max-width:639px) {
            header .max-w-7xl {
                height: auto;
                min-height: 5rem;
                flex-wrap: wrap;
                gap: .75rem;
                padding-top: .75rem;
                padding-bottom: .75rem
            }
            header nav {
                order: 3;
                width: 100%;
                overflow-x: auto;
                white-space: nowrap;
                gap: 1rem;
                padding-bottom: .25rem
            }
            header nav a {
                flex: none
            }
            header>a:last-child {
                padding: .75rem 1rem
            }
            .hero-grid h1 {
                font-size: 2.5rem;
                line-height: 1.2
            }
            .hero-grid>div {
                padding-top: 4rem;
                padding-bottom: 4rem
            }
            main section>div {
                padding-left: 1rem;
                padding-right: 1rem
            }

            a,
            button {
                min-height: 44px
            }
            .grid {
                min-width: 0
            }
            section h2 {
                line-height: 1.35
            }

            main section>div {
                padding-left: 1rem;
                padding-right: 1rem
            }

            form input,
            form select,
            form textarea,
            form button {
                font-size: 16px;
                min-height: 44px
            }
              table {
                font-size: .8125rem
            }
        }