.snp-fov {
    background: #f9f4f2;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.snp-fov__curve {
    display: block;
    height: auto;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.snp-fov__curve.is-mobile {
    display: none;
}

.snp-fov__wrap {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 1280px;
    padding: 64px 64px 32px;
    width: 100%;
}

.snp-fov__intro {
    margin: 0 auto 48px;
    max-width: 780px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.snp-fov__heading {
    color: #2a2f30;
    font-family: 'Sentient', 'Lora', Georgia, serif;
    font-size: 40px;
    font-weight: 100;
    line-height: 120%;
    margin: 32px 0 16px;
}

.snp-fov__subtext {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

/* Hero image + overlapping card (desktop) */
.snp-fov__media {
    position: relative;
    width: 100%;
}

.snp-fov__img {
    border-radius: 16px;
    display: block;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}

.snp-fov__img.is-mobile {
    display: none;
}

.snp-fov__img-ph {
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.06);
}

.snp-fov__card {
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    bottom: 24px;
    box-sizing: border-box;
    left: 24px;
    padding: 32px;
    position: absolute;
    right: 24px;
    border: 2px solid #fff;
}

.snp-fov__cols {
    display: flex;
    gap: 0;
}

.snp-fov__col {
    box-sizing: border-box;
    flex: 1 0 0;
    padding: 0 32px;
    text-align: center;
}

.snp-fov__col + .snp-fov__col {
    border-left: 1px solid #fff;
}

.snp-fov__icon {
    background-color: rgba(42, 47, 48, 0.08);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    box-sizing: border-box;
    height: 64px;
    margin: 0 auto 16px;
    width: 64px;
}

.snp-fov__col-title {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 140%;
    margin: 0 0 8px;
}

.snp-fov__col-text {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

/* Card layout: split — copy on the left, headed pill list on the right */
.snp-fov__split {
    align-items: flex-start;
    display: flex;
    gap: 48px;
}

.snp-fov__split-copy,
.snp-fov__split-list {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.snp-fov__split-title,
.snp-fov__split-list-heading {
    color: #2a2f30;
    font-family: 'Sentient', 'Lora', Georgia, serif;
    font-size: 24px;
    font-weight: 100;
    line-height: 130%;
    margin: 0 0 16px;
}

.snp-fov__split-text {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.snp-fov__pills {
    display: flex;
    gap: 16px;
}

.snp-fov__pill {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    box-sizing: border-box;
    color: #2a2f30;
    flex: 1 1 0;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    padding: 16px 12px;
    text-align: center;
}

/* CTA */
.snp-fov__cta {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.snp-fov__btn {
    background: #0a1849;
    border-radius: 50px;
    color: #fff !important;
    display: inline-flex;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 27px;
    padding: 12px 28px;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .snp-fov__wrap {
        padding: 72px 40px;
    }
    .snp-fov__col {
        padding: 0 20px;
    }
}

/* Mobile: card drops below image, columns stack as bordered boxes */
@media (max-width: 767px) {
    /* :not(.is-mobile) also hides the single curve saved by v1 markup */
    .snp-fov__curve:not(.is-mobile) {
        display: none;
    }
    .snp-fov__curve.is-mobile {
        display: block;
    }
    .snp-fov__wrap {
        display: flex;
        flex-direction: column;
        padding: 48px 24px;
    }
    /* flatten media so image can reorder above intro */
    .snp-fov__media {
        display: contents;
    }
    .snp-fov__intro {
        order: 2;
    }
    .snp-fov__heading {
        font-size: 30px;
    }
    .snp-fov__media:has(.snp-fov__img.is-mobile) .snp-fov__img.is-desktop {
        display: none;
    }
    .snp-fov__img.is-mobile {
        display: block;
    }
    .snp-fov__img {
        aspect-ratio: 1 / 1;
        border-radius: 0;
        height: auto;
        margin-left: -24px;
        margin-right: -24px;
        max-width: none;
        order: 1;
        width: calc(100% + 48px);
    }
    .snp-fov__card {
        /* background: transparent; */
        order: 3;
        margin-top: 0 px;
        border-radius: 16px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        bottom: auto;
        left: auto;
        padding: 24px 0 0;
        position: static;
        right: auto;
    }
    .snp-fov__cols {
        flex-direction: column;
        gap: 16px;
    }
    .snp-fov__col {
        border: 0px solid rgba(42, 47, 48, 0.15);
        border-radius: 12px;
        padding: 24px;
    }
    /* .snp-fov__col + .snp-fov__col {
        border-left: 1px solid rgba(42, 47, 48, 0.15);
    } */
    .snp-fov__card--split,
    .snp-fov__card--custom {
        padding: 24px;
    }
    .snp-fov__split {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .snp-fov__pills {
        flex-direction: column;
        gap: 12px;
    }
    .snp-fov__pill {
        background: #d8e8d9;
        border-color: transparent;
        width: 100%;
    }
    .snp-fov__cta {
        order: 4;
        margin-top: 32px;
    }
}

/* ==========================================================================
   layout: callout — snapshot/feature-callout's STRUCTURE only (heading,
   media row, icon items). The skin stays the overlay's: cream background,
   arch curve, dark text, navy button, 1280px wrap. Nothing here restates a
   font/colour the overlay base rules already give us — the callout's own
   navy panel, white text and blue button are deliberately not ported.
   Shared class names (__wrap, __media) get layout-only overrides.
   ========================================================================== */
.snp-fov--callout .snp-fov__wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.snp-fov--callout .snp-fov__heading {
    margin: 0;
    text-align: center;
    z-index: 1;
}

.snp-fov--callout .snp-fov__inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
}

/* base .snp-fov__media is the overlay's positioning context — reset it */
.snp-fov--callout .snp-fov__media {
    align-items: center;
    display: flex;
    gap: 64px;
    position: static;
    width: 100%;
}

.snp-fov--callout .snp-fov__media-img {
    border-radius: 8px;
    flex-shrink: 0;
    height: 410px;
    overflow: hidden;
    width: 718px;
}

.snp-fov--callout .snp-fov__media-img img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}

.snp-fov--callout .snp-fov__media-img .is-desktop {
    display: block;
    position: relative;
    z-index: 1;
}

.snp-fov--callout .snp-fov__media-img .is-mobile {
    display: none;
}

.snp-fov--callout .snp-fov__img-placeholder {
    background: rgba(0, 0, 0, 0.06);
    height: 100%;
    width: 100%;
}

.snp-fov--callout .snp-fov__media-copy {
    align-items: flex-start;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 32px;
    justify-content: center;
}

.snp-fov--callout .snp-fov__features {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.snp-fov--callout .snp-fov__features-heading {
    color: #2a2f30;
    font-family: 'Sentient', 'Lora', Georgia, serif;
    font-size: 32px;
    font-weight: 100;
    line-height: 120%;
    margin: 0;
    text-align: center;
}

.snp-fov--callout .snp-fov__icons {
    display: flex;
    gap: 16px;
}

.snp-fov--callout .snp-fov__icon-item {
    align-items: center;
    display: flex;
    flex: 1 0 0;
    gap: 24px;
    background-color: #d8e8d9;
    border-radius: 16px;
    padding: 16px 24px;
}

.snp-fov--callout .snp-fov__icon-box {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    height: 80px;
    width: 80px;
}

.snp-fov--callout .snp-fov__icon-box img {
    display: block;
    max-height: 100%;
    max-width: 100%;
}

.snp-fov--callout .snp-fov__icon-copy {
    align-items: flex-start;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
}

/* icon copy mirrors the overlay card's column tokens */
.snp-fov--callout .snp-fov__icon-title {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 140%;
    margin: 0 0 8px;
}

.snp-fov--callout .snp-fov__icon-sub {
    color: #2a2f30;
    font-family: 'Menca', 'Poppins', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

@media (max-width: 1279px) {
    .snp-fov--callout .snp-fov__media {
        flex-direction: column;
    }
    /* the 718px fixed width would overflow once stacked */
    .snp-fov--callout .snp-fov__media-img {
        height: auto;
        width: 100%;
    }
    .snp-fov--callout .snp-fov__media-copy {
        align-items: center;
    }
    .snp-fov--callout .snp-fov__media-text {
        text-align: center;
    }
    .snp-fov--callout .snp-fov__icon-item {
        align-items: center;
        flex-direction: column;
    }
    .snp-fov--callout .snp-fov__icon-copy {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .snp-fov--callout .snp-fov__wrap {
        gap: 24px;
    }
    .snp-fov--callout .snp-fov__inner {
        gap: 32px;
    }
    /* base collapses __media to display:contents for the overlay reorder */
    .snp-fov--callout .snp-fov__media {
        display: flex;
        gap: 48px;
    }
    .snp-fov--callout .snp-fov__media-img .is-desktop {
        display: none;
    }
    .snp-fov--callout .snp-fov__media-img .is-mobile {
        display: block;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
    }
    .snp-fov--callout .snp-fov__media-copy {
        align-items: center;
        gap: 48px;
    }
    .snp-fov--callout .snp-fov__features {
        gap: 24px;
    }
    .snp-fov--callout .snp-fov__icons {
        flex-direction: column;
        gap: 16px;
    }
    .snp-fov--callout .snp-fov__icon-box {
        height: 96px;
        width: 96px;
    }
    .snp-fov--callout .snp-fov__icon-item {
        flex-direction: row;
        gap: 24px;
    }
    .snp-fov--callout .snp-fov__img-placeholder {
        height: 220px;
    }
}