/* ==================================================
   New Homepage
   ================================================== */
html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.km-homepage,
.km-homepage *,
.km-homepage *::before,
.km-homepage *::after {
    box-sizing: border-box;
}

/* ==================================================
   Homepage hero
   ================================================== */

.km-hero {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    background-color: #74664d;
    background-image:
        url("https://keto-mojo.com/wp-content/uploads/2026/09/Homepage_HeaderImage_Desktop-scaled.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;

    color: #ffffff;
}

.km-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.km-hero__inner {
    position: relative;
    z-index: 2;
    width: min(100% - 48px, 1200px);
    min-height: 700px;
    margin: 0 auto;
}

/* Hero content */

.km-hero__content {
    position: absolute;
    left: 0;
    bottom: 62px;
    width: min(100%, 700px);
}

.km-hero__title {
    max-width: 540px;
    margin: 0 0 98px;
    color: #ffffff;
    font-family: Lato, Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;

    text-shadow:
        0 0 20px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(0, 0, 0, 0.3)
}

.km-hero__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 638px);
}

.km-hero__button {
    display: inline-flex;
    min-height: 46px;
    padding: 10px 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #0aa6c1;
    font-family: Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.km-hero__button:hover,
.km-hero__button:focus-visible {
    background: #DEF4F7;
    color: #078ba2;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-hero__quiz {
    margin: 25px 0 0;
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.18;
}

.km-hero__quiz a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.km-hero__quiz a:hover,
.km-hero__quiz a:focus-visible {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

/* Focus */

.km-hero a:focus-visible,
.km-hero button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

/* Mobile */

@media (max-width: 767.98px) {
    .km-hero {
        min-height: 696px;
        background-position: center center;
        background-image:
        url("https://keto-mojo.com/wp-content/uploads/2026/09/Homepage_HeaderImage_Mobile.jpg");
    }

    .km-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.12) 0%,
                rgba(0, 0, 0, 0.02) 30%,
                rgba(0, 0, 0, 0.34) 70%,
                rgba(0, 0, 0, 0.62) 100%
            );
    }

    .km-hero__inner {
        width: 100%;
        min-height: 696px;
        padding: 0 17px;
    }

    .km-hero__content {
        position: absolute;
        right: 17px;
        bottom: 24px;
        left: 17px;
        width: auto;
    }

    .km-hero__title {
        max-width: 350px;
        margin: 0 0 40px;
        font-size: 44px;
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .km-hero__buttons {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .km-hero__button {
        width: 100%;
        min-height: 46px;
        padding: 11px 20px;
        font-size: 18px;
    }

    .km-hero__quiz {
        margin-top: 25px;
        font-size: 16px;
        line-height: 1.25;
    }
}

@media (max-width: 359px) {
    .km-hero__inner {
        padding-right: 14px;
        padding-left: 14px;
    }

    .km-hero__title {
        font-size: 44px;
    }

    .km-hero__button {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .km-hero__button {
        transition: none;
    }
}

/* ==================================================
   Shared slider controls
   (health / recipes / research / doctor-videos sliders)
   ================================================== */

.km-health-slider__arrow,
.km-recipes__arrow,
.km-research__arrow,
.km-doctor-videos__arrow {
    display: inline-flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #000000;
    cursor: pointer;
}

/* Research keeps the section's darker text tone on its arrows. */
.km-research__arrow {
    color: #212529;
}

.km-health-slider__arrow:disabled,
.km-recipes__arrow:disabled,
.km-research__arrow:disabled,
.km-doctor-videos__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.km-health-slider__dots,
.km-recipes__dots,
.km-research__dots,
.km-doctor-videos__dots {
    display: flex;
    align-items: center;
    gap: 12px;
}

.km-health-slider__dot,
.km-recipes__dot,
.km-research__dot,
.km-doctor-videos__dot {
    display: block;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 2px solid #212529;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.km-health-slider__dot.is-active,
.km-recipes__dot.is-active,
.km-research__dot.is-active,
.km-doctor-videos__dot.is-active {
    background-color: #212529;
}

/* ==================================================
   Keto health benefits slider
   ================================================== */

.km-health-slider {
    --km-health-gutter: max(
        40px,
        calc((100% - 1280px) / 2)
    );

    width: 100%;
    padding: 68px 0 58px;
    overflow: hidden;
    background-color: #f6f6f6;
    color: #212529;
}

.km-health-slider__header {
    display: flex;
    width: 100%;
    margin: 0;
    padding-right: var(--km-health-gutter);
    padding-left: var(--km-health-gutter);
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.km-health-slider__title {
    margin: 0;
    color: #0D8FA6;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: left;
}

.km-health-slider__viewport {
    width: 100%;
    margin-top: 42px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--km-health-gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.km-health-slider__track {
    display: flex;
    width: max-content;
    padding-right: var(--km-health-gutter);
    padding-left: var(--km-health-gutter);
    gap: 40px;
}

.km-health-slider__view-all {
    display: inline-flex;
    min-width: 126px;
    min-height: 44px;
    padding: 10px 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #212529;
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.km-health-slider__view-all:hover,
.km-health-slider__view-all:focus-visible {
    background-color: #343A40;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-health-slider__viewport::-webkit-scrollbar {
    display: none;
}

.km-health-card {
    display: block;
    flex: 0 0 clamp(320px, 26.53vw, 382px);
    color: #000000;
    scroll-snap-align: start;
    text-decoration: none;
}

.km-health-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 382 / 483;
    overflow: hidden;
    border-radius: 20px;
    background-color: #d9d8d6;
}

.km-health-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 250ms ease;
}

.km-health-card__title {
    display: block;
    margin-top: 23px;
    color: #000000;
    font-family: Lato, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.km-health-card:hover,
.km-health-card:focus-visible {
    color: #000000;
    text-decoration: none;
}

.km-health-card:hover .km-health-card__image img,
.km-health-card:focus-visible .km-health-card__image img {
    transform: scale(1.025);
}

.km-health-card:hover .km-health-card__title,
.km-health-card:focus-visible .km-health-card__title {
    color: #0aa6c1;
}

.km-health-slider__controls {
    display: flex;
    margin-top: 39px;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.km-health-slider a:focus-visible,
.km-health-slider button:focus-visible,
.km-health-slider__viewport:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

@media (max-width: 1279.98px) and (min-width: 1100px) {

    .km-health-slider__track {
        gap: 25px;
    }

    .km-health-card__title {
        font-size: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .km-health-slider__viewport {
        scroll-behavior: auto;
    }

    .km-health-slider__view-all,
    .km-health-card__image img {
        transition: none;
    }
}

.km-health-slider__view-all--mobile {
    display: none;
}

@media (max-width: 767.98px) {

    .km-health-slider__header {
        display: block;
        padding-right: 24px;
        padding-left: 24px;
    }

    .km-health-slider__title {
        font-size: 36px;
        line-height: 1.1;
    }

    .km-health-slider__view-all--desktop {
        display: none;
    }

    .km-health-slider__view-all--mobile {
        display: flex;
        width: calc(100% - 48px);
        min-width: 0;
        min-height: 44px;
        margin: 31px auto 0;
        padding: 10px 24px;
        font-size: 18px;
    }

    .km-health-card__title {
        font-size: 22px;
        line-height: 1.2;
    }
}

/* ==================================================
   Recipes section
   ================================================== */

.km-recipes {
    width: 100%;
    padding: 76px 0 72px;
    background-color: #ffffff;
    color: #212529;
}

.km-recipes__inner {
    width: min(calc(100% - 160px), 1200px);
    margin: 0 auto;
}

.km-recipes__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.km-recipes__title {
    margin: 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: clamp(36px, 3vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: left;
}

.km-recipes__view-all {
    display: inline-flex;
    min-width: 190px;
    min-height: 44px;
    padding: 10px 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #bdebf2;
    color: #111111;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.km-recipes__view-all:hover,
.km-recipes__view-all:focus-visible {
    background-color: #a7e2eb;
    color: #111111;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-recipes__grid {
    display: grid;
    width: 100%;
    margin-top: 44px;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 24px;
}

.km-recipe-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.km-recipe-card__image-link {
    display: block;
    width: 100%;
    height: 225px;
    overflow: hidden;
    border-radius: 14px;
    background-color: #eeeeee;
    text-decoration: none;
}

.km-recipe-card__image-link img,
img.km-recipe-card__image {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease;
}

.km-recipe-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 282 / 225;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease;
}

.km-recipe-card__title {
    margin: 14px 0 0;
    padding: 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.km-recipe-card__title a {
    color: #212529;
    text-decoration: none;
}

.km-recipe-card__link {
    display: inline-flex;
    margin-top: 9px;
    align-items: center;
    gap: 5px;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.km-recipe-card__link svg {
    display: block;
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.km-recipe-card:hover .km-recipe-card__image {
    transform: scale(1.025);
}

.km-recipe-card__title a:hover,
.km-recipe-card__title a:focus-visible,
.km-recipe-card__link:hover,
.km-recipe-card__link:focus-visible {
    color: #0aa6c1;
    text-decoration: none;
}

.km-recipe-card__link:hover svg,
.km-recipe-card__link:focus-visible svg {
    transform: translateX(3px);
}

.km-recipes a:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

.km-recipes__controls,
.km-recipes__view-all--mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .km-recipes {
        width: 100%;
        padding: 74px 0 72px;
        overflow: hidden;
    }

    .km-recipes__inner {
        width: 100%;
        margin: 0;
    }

    .km-recipes__header {
        display: block;
        padding-right: 24px;
        padding-left: 24px;
    }

    .km-recipes__title {
        max-width: 330px;
        margin: 0;
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .km-recipes__view-all--desktop {
        display: none;
    }

    .km-recipes__grid {
        display: flex;
        width: 100%;
        margin-top: 38px;
        padding-right: 20px;
        padding-left: 20px;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        grid-template-columns: none;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .km-recipes__grid::-webkit-scrollbar {
        display: none;
    }

    .km-recipe-card {
        display: block;
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .km-recipe-card__image-link {
        width: 100%;
        height: auto;
        aspect-ratio: 336 / 269;
        border-radius: 24px;
    }

    .km-recipe-card__image-link img,
    img.km-recipe-card__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .km-recipe-card__title {
        margin-top: 24px;
        font-size: 18px;
        line-height: 1.3;
    }

    .km-recipe-card__link {
        margin-top: 14px;
        font-size: 20px;
        line-height: 1.2;
    }

    .km-recipes__controls {
        display: flex;
        margin-top: 38px;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .km-recipes__view-all--mobile {
        display: flex;
        width: calc(100% - 48px);
        min-width: 0;
        min-height: 44px;
        margin: 31px auto 0;
        padding: 10px 24px;
        font-size: 18px;
    }
}

/* ==================================================
   GK+ meter promo
   ================================================== */

.km-meter-promo {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #9FE1EC;
    color: #212529;
}

.km-meter-promo__inner {
    display: flex;
    width: min(calc(100% - 160px), 1280px);
    min-height: 720px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.km-meter-promo__content {
    position: relative;
    z-index: 2;
    flex: 0 1 560px;
    width: 100%;
    max-width: 560px;
}

.km-meter-promo__visual {
    position: relative;
    display: flex;
    flex: 1 1 600px;
    min-width: 0;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
}

.km-meter-promo__visual::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3000px;
    height: 3000px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(220, 247, 251, 0.55) 35%,
            rgba(159, 225, 236, 0) 72%
        );

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.km-meter-promo__image {
    position: relative;
    z-index: 1;

    display: block;
    width: min(100%, 650px);
    height: auto;
    max-width: none;
}

.km-meter-promo__badge {
    display: inline-flex;
    min-width: 127px;
    min-height: 31px;
    padding: 8px 16px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #ffffff;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.km-meter-promo__title {
    margin: 50px 0 0;
    color: #000000;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-align: left;
}

.km-meter-promo__text {
    max-width: 550px;
    margin: 18px 0 0;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.km-meter-promo__actions {
    display: flex;
    margin-top: 48px;
    align-items: center;
    gap: 24px;
}

.km-meter-promo__button {
    display: inline-flex;
    width: 200px;
    min-height: 53px;
    padding: 12px 25px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.km-meter-promo__button--learn {
    border: 2px solid #212529;
    background-color: transparent;
    color: #212529;
}

.km-meter-promo__button--shop {
    border: 2px solid #212529;
    background-color: #212529;
    color: #ffffff;
}

.km-meter-promo__button--learn:hover,
.km-meter-promo__button--learn:focus-visible {
    background-color: #212529;
    color: #ffffff;
    text-decoration: none;
}

.km-meter-promo__button--shop:hover,
.km-meter-promo__button--shop:focus-visible {
    background-color: #363b3f;
    border-color: #363b3f;
    color: #ffffff;
    text-decoration: none;
}

.km-meter-promo__button:hover {
    transform: translateY(-1px);
}

.km-meter-promo a:focus-visible {
    outline: 2px solid #212529;
    outline-offset: 4px;
}

@media (max-width: 767.98px) {
    .km-meter-promo {
        width: 100%;
        min-height: 0;
        overflow: hidden;
        background-color: #9FE1EC;
    }

    .km-meter-promo__inner {
        display: flex;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 24px 24px 32px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .km-meter-promo__visual {
        order: -1;
        display: flex;
        width: 100%;
        min-width: 0;
        align-self: auto;
        align-items: center;
        justify-content: center;
    }

    .km-meter-promo__visual::before {
        width: 1500px;
        height: 1500px;
    }

    .km-meter-promo__image {
        display: block;
        width: min(100%, 430px);
        height: auto;
        max-width: none;
    }

    .km-meter-promo__content {
        width: 100%;
        max-width: none;
        margin-top: 44px;
    }

    .km-meter-promo__badge {
        display: inline-flex;
        width: 145px;
        min-width: 0;
        min-height: 34px;
        padding: 7px 16px;
        color: #0c8ba1;
        font-size: 14px;
        font-weight: 700;
    }

    .km-meter-promo__title {
        margin-top: 50px;
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .km-meter-promo__text {
        max-width: none;
        margin-top: 20px;
        font-size: 20px;
        line-height: 1.5;
    }

    .km-meter-promo__actions {
        display: flex;
        width: 100%;
        margin-top: 44px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .km-meter-promo__button {
        width: 100%;
        min-height: 44px;
        padding: 10px 20px;
        font-size: 16px;
    }
}

@media (max-width: 1279.98px) and (min-width: 1100px) {
    .km-meter-promo__inner {
        width: calc(100% - 80px);
    }

    .km-meter-promo__content {
        max-width: 500px;
    }

    .km-meter-promo__title {
        font-size: 46px;
    }

    .km-meter-promo__text {
        max-width: 490px;
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .km-meter-promo__button {
        transition: none;
    }
}

/* ==================================================
   MyMojoHealth app promo
   ================================================== */

.km-app-promo {
    width: 100%;
    min-height: 720px;
    padding: 60px 0;
    background-color: #ffffff;
    color: #212529;
}

.km-app-promo__inner {
    display: grid;
    width: min(calc(100% - 160px), 1200px);
    min-height: 600px;
    margin: 0 auto;
    grid-template-columns: 600px minmax(0, 1fr);
    align-items: center;
    gap: 100px;
}

.km-app-promo__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.km-app-promo__phone {
    display: block;
    width: 600px;
    max-width: 100%;
    height: auto;
}

.km-app-promo__content {
    min-width: 0;
}

.km-app-promo__badge {
    display: inline-flex;
    min-width: 144px;
    min-height: 46px;
    padding: 8px 16px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #0c8ba1;
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.km-app-promo__title {
    margin: 43px 0 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: left;
}

.km-app-promo__text {
    max-width: 440px;
    margin: 22px 0 0;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.km-app-promo__learn-more {
    display: inline-flex;
    margin-top: 29px;
    align-items: center;
    gap: 3px;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.km-app-promo__learn-more svg {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.km-app-promo__learn-more:hover,
.km-app-promo__learn-more:focus-visible {
    color: #0c8ba1;
    text-decoration: none;
}

.km-app-promo__learn-more:hover svg,
.km-app-promo__learn-more:focus-visible svg {
    transform: translateX(3px);
}

/* Desktop QR */

.km-app-promo__qr {
    display: block;
    width: 356px;
    max-width: 100%;
    height: auto;
    margin-top: 44px;
}

/* Mobile store buttons hidden by default */

.km-app-promo__store-links {
    display: none;
}

.km-app-promo__store-link {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.km-app-promo__store-link img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 48px;
}

.km-app-promo a:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

@media (max-width: 767.98px) {

    .km-app-promo {
        display: block;
        width: 100%;
        min-height: 0;
        padding: 72px 24px 72px;
        background-color: #ffffff;
        overflow: clip;
    }

    .km-app-promo__inner {
        display: flex;
        width: 100%;
        min-height: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .km-app-promo__visual {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .km-app-promo__phone {
        display: block;
        width: 125%;
        max-width: none;
        height: auto;
        margin: 0;
    }

    /* Not shown in the mobile design. */
    .km-app-promo__badge,
    .km-app-promo__learn-more {
        display: none;
    }

    .km-app-promo__content {
        width: 100%;
        min-width: 0;
        margin-top: 36px;
    }

    .km-app-promo__title {
        margin: 0;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.03em;
        text-align: left;
    }

    .km-app-promo__text {
        width: 100%;
        max-width: none;
        margin: 16px 0 0;
        font-size: 18px;
        line-height: 1.3;
    }

    /*
     * QR makes sense on desktop, but not when
     * the visitor is already using a phone.
     */
    .km-app-promo__qr {
        display: none;
    }

    .km-app-promo__store-links {
        display: flex;
        width: 100%;
        margin-top: 34px;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .km-app-promo__store-link img {
        height: 48px;
    }
}

@media (max-width: 1279.98px) and (min-width: 1100px) {

    .km-app-promo__inner {
        width: calc(100% - 100px);
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 110px;
    }

    .km-app-promo__phone {
        width: 270px;
    }

    .km-app-promo__title {
        font-size: 36px;
    }

    .km-app-promo__text {
        font-size: 18px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {

    .km-app-promo__learn-more svg {
        transition: none;
    }
}

/* ==================================================
   Keto quiz CTA
   ================================================== */

.km-quiz-cta {
    width: 100%;
    min-height: 504px;
    padding: 121px 24px 80px;
    background-color: #f6f6f6;
    color: #212529;
}

.km-quiz-cta__inner {
    width: min(100%, 994px);
    margin: 0 auto;
}

.km-quiz-cta__eyebrow {
    margin: 0;
    color: #54565a;
    font-family: Inter, Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

.km-quiz-cta__title {
    width: max-content;
    max-width: calc(100vw - 48px);
    margin: 24px 50% 0;
    color: #000000;
    font-family: Lato, Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.km-quiz-cta__choices {
    display: grid;
    margin-top: 47px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
}

.km-quiz-cta__choice {
    display: flex;
    width: 100%;
    min-height: 51px;
    padding: 10px 28px;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background-color: #0EA1BA;
    color: #FFFFFF;

    font-family: Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.km-quiz-cta__choice:hover,
.km-quiz-cta__choice:focus-visible {
    background-color: #F6F6F6;
    color: #212529;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-quiz-cta__choice:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

@media (max-width: 767.98px) {
    .km-quiz-cta {
        min-height: 587px;
        padding: 53px 24px 54px;
    }

    .km-quiz-cta__inner {
        width: 100%;
    }

    .km-quiz-cta__eyebrow {
        display: none;
    }

    .km-quiz-cta__title {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;

        font-size: 40px;
        line-height: 1;
        letter-spacing: -0.035em;
        white-space: normal;
        transform: none;
    }

    .km-quiz-cta__choices {
        display: flex;
        width: 100%;
        margin-top: 40px;
        flex-direction: column;
        gap: 23px;
    }

    .km-quiz-cta__choice {
        width: 100%;
        min-height: 49px;
        padding: 11px 18px;

        font-size: 18px;
        line-height: 1.15;
    }

    /*
     * The second answer wraps to two lines
     * in the supplied mobile design.
     */
    .km-quiz-cta__choice:nth-child(2) {
        min-height: 68px;
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .km-quiz-cta__choice {
        transition: none;
    }
}

/* ==================================================
   Keto-Mojo Community
   ================================================== */

.km-community-promo {
    width: 100%;
    min-height: 721px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 76% 40%,
            #e4f6c4 0%,
            #f4fce7 100%
        );

    color: #212529;
}

.km-community-promo__inner {
    display: grid;
    width: min(calc(100% - 160px), 1200px);
    min-height: 721px;
    margin: 0 auto;

    grid-template-columns: minmax(0, 590px) minmax(0, 1fr);
    align-items: center;
    gap: 70px;
}

.km-community-promo__content {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 560px;
}

.km-community-promo__visual {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
}

.km-community-promo__image {
    display: block;
    width: 100%;
    max-width: 590px;
    height: auto;
}

.km-community-promo__badge {
    display: inline-flex;
    min-width: 123px;
    min-height: 31px;
    padding: 8px 16px;

    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background-color: #58a600;
    color: #ffffff;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.km-community-promo__title {
    margin: 38px 0 0;

    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-align: left;
}

.km-community-promo__text {
    max-width: 550px;
    margin: 22px 0 0;

    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.km-community-promo__actions {
    display: flex;
    margin-top: 47px;
    align-items: center;
    gap: 24px;
}

.km-community-promo__button {
    display: inline-flex;
    width: 205px;
    min-height: 53px;
    padding: 12px 24px;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-family: Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.km-community-promo__button--learn {
    border: 2px solid #212529;
    background-color: transparent;
    color: #212529;
}

.km-community-promo__button--join {
    border: 2px solid #212529;
    background-color: #212529;
    color: #ffffff;
}

.km-community-promo__button--learn:hover,
.km-community-promo__button--learn:focus-visible {
    background-color: #212529;
    color: #ffffff;
    text-decoration: none;
}

.km-community-promo__button--join:hover,
.km-community-promo__button--join:focus-visible {
    border-color: #363b3f;
    background-color: #363b3f;
    color: #ffffff;
    text-decoration: none;
}

.km-community-promo__button:hover {
    transform: translateY(-1px);
}

.km-community-promo a:focus-visible {
    outline: 2px solid #58a600;
    outline-offset: 4px;
}

@media (max-width: 767.98px) {
    .km-community-promo {
        min-height: 1002px;

        background:
            radial-gradient(
                ellipse at 76% 38%,
                #e4f6c4 0%,
                #f4fce7 100%
            );
    }

    .km-community-promo__inner {
        display: flex;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 64px 24px 64px;

        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .km-community-promo__visual {
        display: flex;
        width: calc(100% + 24px);
        margin-left: -12px;

        align-items: center;
        justify-content: center;
        order: 1;
    }

    .km-community-promo__image {
        display: block;
        width: 100%;
        max-width: 345px;
        height: auto;
    }

    .km-community-promo__content {
        width: 100%;
        max-width: none;
        margin-top: 52px;
        order: 2;
    }

    .km-community-promo__badge {
        min-width: 123px;
        min-height: 31px;
        padding: 7px 20px;

        font-size: 14px;
    }

    .km-community-promo__title {
        max-width: 320px;
        margin-top: 43px;

        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .km-community-promo__text {
        width: 100%;
        max-width: none;
        margin-top: 24px;

        font-size: 18px;
        line-height: 1.5;
    }

    .km-community-promo__actions {
        display: flex;
        width: 100%;
        margin-top: 46px;

        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .km-community-promo__button {
        width: 100%;
        min-height: 44px;
        padding: 10px 20px;

        font-size: 16px;
    }
}

/* ==================================================
   LCU Videos - Doctors sharing keto breaktrhoughs
   ================================================== */

.km-doctor-videos {
    width: 100%;
    padding: 76px 0 72px;
    background-color: #f6f6f6;
    color: #212529;
}

.km-doctor-videos__inner {
    width: min(calc(100% - 160px), 1200px);
    margin: 0 auto;
}

.km-doctor-videos__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.km-doctor-videos__title {
    margin: 0;
    color: #0D8FA6;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.km-doctor-videos__view-all {
    display: inline-flex;
    min-width: 183px;
    min-height: 44px;
    padding: 10px 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #bde9f0;
    color: #111111;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.km-doctor-videos__view-all:hover,
.km-doctor-videos__view-all:focus-visible {
    background-color: #a7e2eb;
    color: #111111;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-doctor-videos__grid {
    display: grid;
    width: 100%;
    margin-top: 44px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.km-doctor-video-card {
    width: 100%;
    min-width: 0;
}

.km-doctor-video-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
    background-color: #dddddd;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.km-doctor-video-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease;
}

.km-doctor-video-card__badge {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: inline-flex;
    min-height: 28px;
    padding: 6px 13px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: #ffffff;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.km-doctor-video-card__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.86);
    color: #ffffff;
    transform: translate(-50%, -50%);
}

.km-doctor-video-card__play svg {
    margin-left: 4px;
    color: #ffffff;
}

.km-doctor-video-card__title {
    margin: 27px 0 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.km-doctor-video-card__title a {
    color: inherit;
    text-decoration: none;
}

.km-doctor-video-card__link {
    display: inline-flex;
    margin-top: 17px;
    align-items: center;
    gap: 7px;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.km-doctor-video-card__link svg {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.km-doctor-video-card:hover .km-doctor-video-card__image {
    transform: scale(1.025);
}

.km-doctor-video-card__title a:hover,
.km-doctor-video-card__title a:focus-visible,
.km-doctor-video-card__link:hover,
.km-doctor-video-card__link:focus-visible {
    color: #0aa6c1;
    text-decoration: none;
}

.km-doctor-video-card__link:hover svg,
.km-doctor-video-card__link:focus-visible svg {
    transform: translateX(3px);
}

.km-doctor-videos a:focus-visible,
.km-doctor-videos button:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

.km-doctor-videos__controls,
.km-doctor-videos__view-all--mobile {
    display: none;
}


/* Mobile */

@media (max-width: 767.98px) {

    .km-doctor-videos {
        padding: 74px 0 72px;
        overflow: hidden;
    }

    .km-doctor-videos__inner {
        width: 100%;
        margin: 0;
    }

    .km-doctor-videos__header {
        display: block;
        padding-right: 24px;
        padding-left: 24px;
    }

    .km-doctor-videos__title {
        max-width: 340px;
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .km-doctor-videos__view-all--desktop {
        display: none;
    }

    .km-doctor-videos__grid {
        display: flex;
        width: 100%;
        margin-top: 38px;
        padding-right: 20px;
        padding-left: 20px;
        gap: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        grid-template-columns: none;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .km-doctor-videos__grid::-webkit-scrollbar {
        display: none;
    }

    .km-doctor-video-card {
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .km-doctor-video-card__media {
        width: 100%;
        border-radius: 20px;
    }

    .km-doctor-video-card__badge {
        top: 14px;
        left: 14px;
        font-size: 11px;
    }

    .km-doctor-video-card__play {
        width: 48px;
        height: 48px;
    }

    .km-doctor-video-card__title {
        margin-top: 24px;
        font-size: 18px;
        line-height: 1.3;
    }

    .km-doctor-video-card__link {
        margin-top: 14px;
        font-size: 20px;
    }

    .km-doctor-videos__controls {
        display: flex;
        margin-top: 38px;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .km-doctor-videos__view-all--mobile {
        display: flex;
        width: calc(100% - 48px);
        min-width: 0;
        min-height: 44px;
        margin: 31px auto 0;
        padding: 10px 24px;
        font-size: 18px;
    }
}

/* ==================================================
   Enjoy Keto / Market + Events
   ================================================== */

.km-daily {
    width: 100%;
    padding: 64px 0 72px;
    background-color: #ffffff;
    color: #212529;
}

.km-daily__inner {
    width: min(calc(100% - 160px), 1200px);
    margin: 0 auto;
}

.km-daily__title {
    margin: 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: left;
}

.km-daily__grid {
    display: grid;
    margin-top: 38px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}


/* ==================================================
   MyMojoMarket card
   ================================================== */

.km-market-card {
    position: relative;
    display: flex;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffddb5;
}

.km-homepage article.km-market-card a.km-market-card__button:hover,
.km-homepage article.km-market-card a.km-market-card__button:focus-visible {
    background-color: #343A40 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.km-market-card__content {
    position: relative;
    z-index: 2;
    width: 48%;
    padding: 62px 0 44px 44px;
}

.km-market-card__title {
    margin: 0;
    color: #000000;
    font-family: Lato, Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}

.km-market-card__title span {
    color: #e47925;
}

.km-market-card__text {
    max-width: 245px;
    margin: 20px 0 0;
    color: #111111;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.km-market-card__button {
    display: inline-flex;
    min-width: 120px;
    min-height: 45px;
    margin-top: 29px;
    padding: 10px 24px;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background-color: #212529;
    color: #ffffff;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
}

.km-market-card__visual {
    position: absolute;
    top: 30px;
    right: 25px;
    bottom: 24px;
    width: 55%;
}

.km-market-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}


/* ==================================================
   Upcoming events card
   ================================================== */

.km-events-card {
    min-height: 280px;
    padding: 37px 42px 32px;
    border-radius: 18px;
    background-color: #b5e5ed;
}

.km-events-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.km-events-card__title {
    margin: 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.km-events-card__view-all {
    display: inline-flex;
    min-width: 126px;
    min-height: 44px;
    padding: 10px 22px;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background-color: #212529;
    color: #ffffff;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
}

.km-events-card__view-all:hover,
.km-events-card__view-all:focus-visible {
    background-color: #343A40;
    color: #ffffff;
    text-decoration: none;
}

.km-events-card__view-all--mobile {
    display: none;
}

.km-events-card__list {
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    gap: 20px;
}

.km-event {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.km-event__date {
    display: flex;
    min-height: 92px;
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.72);

    color: #000000;
    text-align: center;
}

.km-event__month {
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.km-event__days {
    margin-top: 7px;
    font-family: Inter, Arial, sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

.km-event__content {
    min-width: 0;
}

.km-event__title {
    margin: 0;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.18;
}

.km-event__description {
    margin: 7px 0 0;
    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.km-event__link {
    display: inline-flex;
    margin-top: 7px;
    gap: 4px;
    align-items: center;

    color: #212529;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
}


/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 767.98px) {
    .km-daily {
        padding: 54px 24px 72px;
    }

    .km-daily__inner {
        width: 100%;
    }

    .km-daily__title {
        max-width: 320px;
        font-size: 32px;
        line-height: 1.1;
    }

    .km-daily__grid {
        display: flex;
        margin-top: 27px;
        flex-direction: column;
        gap: 24px;
    }


    /* Market */

    .km-market-card {
        display: flex;
        min-height: 405px;
        padding: 0;
        flex-direction: column;
        border-radius: 17px;
    }

    .km-market-card__visual {
        position: static;
        order: 1;
        width: 100%;
        height: 235px;
        padding: 38px 25px 0;
    }

    .km-market-card__image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    .km-market-card__content {
        order: 2;
        width: 100%;
        padding: 22px 24px 28px;
    }

    .km-market-card__title {
        font-size: 28px;
        line-height: 1.2;
    }

    .km-market-card__text {
        max-width: none;
        margin-top: 18px;
        font-size: 18px;
        line-height: 1.3;
    }

    .km-market-card__button {
        width: 100%;
        min-height: 44px;
        margin-top: 25px;
    }


    /* Events */

    .km-events-card {
        min-height: 0;
        padding: 34px 24px 28px;
        border-radius: 17px;
    }

    .km-events-card__header {
        display: block;
    }

    .km-events-card__title {
        font-size: 28px;
        line-height: 1.2;
    }

    .km-events-card__view-all--desktop {
        display: none;
    }

    .km-events-card__list {
        margin-top: 23px;
        gap: 27px;
    }

    .km-event {
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: start;
        gap: 16px;
    }

    .km-event__date {
        min-height: 91px;
        padding: 11px 5px;
    }

    .km-event__month {
        font-size: 12px;
    }

    .km-event__days {
        font-size: 25px;
    }

    .km-event__title {
        font-size: 16px;
        line-height: 1.18;
    }

    .km-event__description {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.32;
    }

    .km-event__link {
        margin-top: 8px;
        font-size: 14px;
    }

    .km-events-card__view-all--mobile {
        display: flex;
        width: 100%;
        min-width: 0;
        margin-top: 28px;
    }
}


@media (max-width: 1279.98px) and (min-width: 768px) {
    .km-daily__inner {
        width: calc(100% - 80px);
    }

    .km-daily__grid {
        gap: 22px;
    }

    .km-market-card__content {
        padding-left: 30px;
    }

    .km-events-card {
        padding-right: 30px;
        padding-left: 30px;
    }
}

/* ==================================================
   Latest Research
   ================================================== */

.km-research {
    width: 100%;
    padding: 76px 0 78px;
    background-color: #f6f6f6;
    color: #212529;
}

.km-research__inner {
    width: min(calc(100% - 160px), 1200px);
    margin: 0 auto;
}

.km-research__title {
    margin: 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: left;
}

.km-research__grid {
    display: grid;
    width: 100%;
    margin-top: 42px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 34px;
}


/* Individual research card */

.km-research-card {
    display: grid;
    min-width: 0;
    margin: 0;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.km-research-card__image-link {
    display: block;
    width: 220px;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #e5e5e5;
    text-decoration: none;
}

.km-research-card__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 220ms ease;
}

.km-research-card__content {
    display: flex;
    min-width: 0;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
}

.km-research-card__topics {
    margin: 2px 0 0;
    color: #73767a;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.km-research-card__title {
    margin: 12px 0 0;
    color: #212529;
    font-family: Lato, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.km-research-card__title a {
    color: inherit;
    text-decoration: none;
}

.km-research-card__button {
    display: inline-flex;
    min-width: 124px;
    min-height: 36px;
    margin-top: 25px;
    padding: 8px 20px;
    align-items: center;
    justify-content: center;

    border: 2px solid #212529;
    border-radius: 999px;
    background-color: transparent;
    color: #212529;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.km-research-card:hover .km-research-card__image {
    transform: scale(1.025);
}

.km-research-card__title a:hover,
.km-research-card__title a:focus-visible {
    color: #0aa6c1;
    text-decoration: none;
}

.km-research-card__button:hover,
.km-research-card__button:focus-visible {
    background-color: #212529;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.km-research a:focus-visible {
    outline: 2px solid #10a8c3;
    outline-offset: 4px;
}

.km-research__controls {
    display: none;
}

@media (max-width: 767.98px) {
    .km-research {
        padding: 46px 24px 60px;
    }

    .km-research__inner {
        width: 100%;
    }

    .km-research__title {
        max-width: 280px;
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .km-research__grid {
        display: flex;
        width: 100%;
        margin-top: 36px;
        gap: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .km-research__grid::-webkit-scrollbar {
        display: none;
    }

    .km-research-card {
        display: block;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .km-research-card__image-link {
        width: 100%;
        height: auto;
        aspect-ratio: 327 / 225;
        border-radius: 12px;
    }

    .km-research-card__content {
        display: block;
        min-height: 0;
        margin-top: 26px;
    }

    .km-research-card__topics {
        margin: 0;
        font-size: 14px;
        line-height: 1.25;
    }

    .km-research-card__title {
        margin-top: 12px;
        font-size: 18px;
        line-height: 1.3;
    }

    .km-research-card__button {
        min-width: 126px;
        min-height: 36px;
        margin-top: 23px;
        font-size: 14px;
    }
    .km-research__controls {
    display: flex;
    margin-top: 38px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    }

}


@media (max-width: 1279.98px) and (min-width: 768px) {
    .km-research__inner {
        width: calc(100% - 80px);
    }

    .km-research__grid {
        column-gap: 35px;
    }

    .km-research-card {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
    }

    .km-research-card__image-link {
        width: 190px;
        height: 190px;
    }

    .km-research-card__content {
        min-height: 190px;
    }

    .km-research-card__title {
        font-size: 18px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .km-research-card__image,
    .km-research-card__button {
        transition: none;
    }
}

/* ==================================================
   Mission statement
   ================================================== */

.km-mission {
    display: flex;
    width: 100%;
    min-height: 376px;
    padding: 70px 40px;
    align-items: center;
    justify-content: center;

    background-color: #ffffff;
    color: #212529;
}

.km-mission__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.km-mission__text {
    margin: 0;
    font-family: Lato, Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: center;
}

.km-mission__highlight,
.km-mission__statement {
    display: block;
}

.km-mission__highlight {
    background: linear-gradient(
        90deg,
        #10B3CF 0%,
        #0D8FA6 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.km-mission__statement {
    color: #212529;
}

@media (max-width: 767.98px) {
    .km-mission {
        min-height: 533px;
        padding: 62px 24px;
        align-items: center;
    }

    .km-mission__inner {
        max-width: 327px;
    }

    .km-mission__text {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -0.035em;
    }

    .km-mission__highlight {
        margin-bottom: 8px;
    }
}

body.home .km-homepage-wrapper #main-content.km-homepage {
    padding-top: 0 !important;
    margin-top: 0;
}