/* Site-wide mobile layout — arbitrary Tailwind widths may not ship in dist CSS */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
}

.ivy-site-nav,
.ivy-pricing-nav {
    width: calc(100% - 1rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .ivy-site-nav,
    .ivy-pricing-nav {
        width: 100%;
    }
}

.ivy-table-scroll,
.ivy-comparison-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.prose table,
.blog-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

footer {
    overflow-x: hidden;
}

@media (max-width: 767px) {
    .flip-card,
    .ivy-flip-card {
        min-height: 300px;
        height: auto;
        max-height: 380px;
    }

    .flip-card__hint-hover,
    .ivy-flip-card__hint-hover {
        display: none;
    }

    .flip-card__hint-tap,
    .ivy-flip-card__hint-tap {
        display: inline;
    }
}

@media (hover: hover) and (pointer: fine) {
    .flip-card__hint-hover,
    .ivy-flip-card__hint-hover {
        display: inline;
    }

    .flip-card__hint-tap,
    .ivy-flip-card__hint-tap {
        display: none;
    }
}