/* The scrollable viewport (you can also apply this to body) */
.snap-container {
    height: 100dvh;
    /* use dynamic viewport height (better on mobile than 100vh) */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* turn on vertical snapping */
    scroll-behavior: smooth;
    /* smooth scroll for in-page links */
    overscroll-behavior: auto;
    /* avoid bouncing/refresh on mobile */
}

/* Each full-screen section */
section {
    height: 100dvh;
    /* full screen height per section */
    scroll-snap-align: start;
    /* snap each section to the top */
    display: grid;
    /* easy centering */
    place-items: center;
    box-sizing: border-box;
    font: 600 1rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: white;
    position: relative;
}

.s1,
.s2,
.s3 {
    padding: 2rem;
}

/* Remove background-attachment: fixed from .s1 */
.s1 {
    background: none;
    position: relative;
    overflow: hidden;
    color: white;
}

/* New: performant fixed background layer just for this section */
.s1::before {
    content: "";
    position: fixed;
    /* replaces background-attachment: fixed */
    inset: 0;
    z-index: -1;
    /* sits behind content */
    background: url(./../images/Section1Background.svg) center / cover no-repeat;
    will-change: transform;
    /* hint for Safari compositor */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.s1-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 94pt;
    height: 116pt;
    margin-bottom: 38pt;
}

.s1 h1 {
    margin: 0 0 .5rem
}

.s1 p {
    margin: 0 0 1rem;
    max-width: 363pt;
    text-align: left;
    width: 100%;
}

.s1-download-icon {
    width: 120pt;
    height: 40pt;
    display: block;
    margin-left: 0;
    margin-right: auto;
    margin-top: 20pt;
}

.contentBlock {
    display: flex;
    align-items: center;
    gap: 36pt;
}

.s1-iPhone-image img {
    width: 100%;
    height: 27.5rem;
    margin-bottom: -5rem;
    margin-top: -3.75rem;
}

.s1 .section-anchor-link img::before {
    content: '';
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
}

.s1 .section-anchor-link img {

    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.75);

}

.s2 {
    background: linear-gradient(160deg, #B5D74D, #B8EE39, #53DD8C);
    color: #0D0D0D;
}

.s2 img {
    max-width: 300pt;
}

.s3 {
    background: #1A1A1A;
    color: white;
}

.s3 h2 {
    color: #B8EE39
}

.s3 .section-image {
    max-width: 424pt;
}

.s4 {
    background: linear-gradient(160deg, #B5D74D, #B8EE39, #53DD8C);
    color: #0D0D0D;
    display: flex;
    flex-flow: column;
}

.s4 .contentBlock {
    padding: 2rem 1.25rem;
    height: calc(100vh - 8.875rem);
    justify-content: center;
}

.s4 .section-image {
    max-width: 41.625rem;
}

.s4-download {
    width: 120pt;
    height: 40pt;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.glassContainerWrapper {
    position: relative;
    border-radius: 3rem;
    display: grid;
    place-items: center;
    isolation: isolate;
    /* critical for blending/blur */
    overflow: visible;
    /* allow border pseudo to show */
    background: rgba(0, 0, 0, 0.06);
    /* translucent fill helps Safari blur */
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 8px 16px 0px rgba(0, 0, 0, 0.2), 0px 16px 32px 0px rgba(0, 0, 0, 0.25);
}

/* Keep the decorative background light (no extra blur here) */
.glassContainerBackground {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(330deg, #0000004D, #0000000d, #ffffff0d);
    /* remove backdrop-filter here to avoid double-blurring cost */
}

.glassContainerContent {
    position: relative;
    z-index: 1;
    /* above the background */
    color: white;
    text-align: center;
    font-family: system-ui, sans-serif;
    padding: 2rem;
}

.glassContainerWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1.5pt;
    /* border thickness */
    background: linear-gradient(330deg, #00000033, #0000001a, #FFFFFF1a);
    /* blend with the backdrop */
    pointer-events: none;

    /* Safari-friendly ring cutout */
    mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    /* Safari */
    mask-composite: exclude;
    /* Others */
}

.section-anchor-link {
    position: absolute;
    bottom: 1.25rem;
    left: 1rem;
    right: 1rem;
    text-align: center;
}

.section-anchor-link img {
    width: 2.25rem;
    height: 2.25rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .snap-container {
        scroll-behavior: auto;
    }
}


/*      Tablet      */
@media (min-width: 48rem) and (max-width: 63.9375rem) {

    .s1 .section-image img {
        width: 100%;
        height: auto;
        margin-top: 0;
    }

    .s3 .section-image,
    .s4 .section-image {
        max-width: calc(100%/2);
    }
}

@media (min-width: 48rem) {

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

/*      Mobile     */
@media (max-width: 47.9375rem) {

    section {
        overflow: hidden;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

    .s1-logo {
        width: 100%;
        max-width: 6.25rem;
        height: auto;
        margin-bottom: 1.75rem;
    }

    .s1-download-icon {
        width: 100%;
        margin-top: 0.3rem;
    }

    .s1,
    .s2,
    .s3 {
        padding: 2rem 1.25rem;
    }

    .contentBlock {
        width: 100%;
        gap: 2.5rem;
    }

    .s1 .contentBlock,
    .s2 .contentBlock {
        flex-flow: column-reverse;
    }

    .s3 .contentBlock,
    .s4 .contentBlock {
        flex-flow: column;
    }

    .s3 .section-image,
    .s4 .section-image,
    .s2 .section-image {
        max-width: 100%;
    }

    .s4 .section-text,
    .s3 .section-text,
    .s1 .section-text,
    .s2 .section-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }

    .s1 h1 {
        margin-bottom: 1rem;
    }

    .s1 .section-text p {
        text-align: center;
    }

    .s1 .glassContainerContent {
        padding: 2rem 1.125rem 4.25rem;
    }

    .s1-iPhone-image {
        max-height: 15.25rem;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .s1-iPhone-image img {
        margin: 0;
        height: auto;
        width: 100%;
    }

    .s1 .section-image {
        margin-top: -4rem;
        position: relative;
    }

    .s1 .section-image img {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        width: 90%;
    }

    .s3 h2,
    .s2 h2 {
        margin: 3rem 0 1.25rem;
        text-align: center;
    }

    .s3 .preamble,
    .s2 .preamble {
        text-align: center;
        width: 100%;
        margin: 0 0 1.125rem;
    }

    .s4 .contentBlock {
        height: calc(100vh - 10.25rem);
    }

    .s4 .section-image {
        max-height: 16.875rem;
    }

    .s4 h2 {
        text-align: center;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

}