@media screen and (min-width: 768px) {
    html,
    body {
        font-size: 22px;
    }
}

ul.benefit-list {
    list-style: '✓';
}

.benefit-list li {
    padding: 0.3em;
}

/* Keyframes for the subtle floating animation for the app logo */
@keyframes subtle-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.25em); /* Adjust the float height as desired */
    }
}

.top-logo {
    text-align: center;

    & img {
        /* Apply the continuous floating animation */
        max-width: 150px;
        box-shadow: 0 0 6px 4px #00000047;
        border-radius: var(--bradius5);

        &:hover {
            animation: subtle-float var(--animation-speed10) ease-in-out infinite;
        }
    }
}

.hero__image-container {
    padding: var(--gap);
    .hero__overview-image {
        display: block;
        width: 100%;
    }
}

.check-list {
    list-style-type: '\2713';
    padding-left: 0.5em;
}

.check-list li {
    padding-left: 0.3em;
}

.apps-container {
}

.app-item {
    text-decoration: none;

    .app-item__logo {
        width: 3em;
    }

    &:hover {
        filter: brightness(135%);
    }

    .app-item__title {
        color: var(--primary-color);
    }
}

.surface--cta {
    border-color: var(--primary-color);
}