#postcards-section{
    /* Pace of the scrub. 1 = one screen of scrolling per card; 1.1 moves the
       cards 10% further for the same scroll (a section 10% shorter to scroll
       through); below 1 slows it down. postcards.js reads the resulting
       height, so this is the only knob. */
    --postcard-scrub-speed: 1.25;
    /* steps between cards: 4 cards, so 3 */
    --postcard-steps: 3;

    position: relative;
    width: 100%;
    /* one screen for the pinned stage, plus the scroll that drives the steps */
    height: calc(100vh + var(--postcard-steps) * 100vh / var(--postcard-scrub-speed));
}

#postcards-stage{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.postcard-container{
    position: absolute;
    left: 50%;
    top: var(--site-margin);
    width: calc(100% - var(--site-margin) * 4);
    height: calc(100% - var(--site-margin) * 6);;
    transform: translateX(-50%);
    border-radius: 1.5rem;
    /* box-shadow: 0 12px 26px rgba(30, 25, 22, .20);   modest blur — cheap to repaint */
    overflow: hidden;
    will-change: transform, opacity;                 /* promote to its own GPU layer */
    backface-visibility: hidden;
    border: solid 1px var(--secondary-700);
}

.postcard-blank.postcard-container{
    background: repeating-linear-gradient(
        45deg,
        white 0 20px,
        var(--smp-orange) 20px 40px
    );
    padding: 1.25rem;
}
.postcard-blank .postcard-inner{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.75rem;
    background-color: white;
    font-size: calc(var(--h1-size) * 1.5);
}
.postcard-blank .stamp-icon{
    position: absolute;
    top: var(--site-margin);
    right: var(--site-margin);
    height: 20%;
    width: auto;
}
/* the "?" in the yellow circle, in upright Fraunces where the hero has its icon */
.postcard-blank .why-question{
    display: inline-block;   /* so the twirl's transform applies */
    line-height: 1;
    font-family: 'fraunces-heading';
    font-variation-settings: var(--fraunces-axes);
}
/* twirls once, like the hero icon, when it's halfway up the screen (section-reveal.js) */
.postcard-blank .why-question.twirl{
    animation: twirl 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.postcard-photo{ background: white; }

.postcard-img{
    width:100%;
    height:100%;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem;
    position: relative;
}

.postcard-image-gradient{
    width: 100%;
    height: 100%;
    z-index:10;

    border-radius: var(--curve-lg);
    background: linear-gradient(360deg,rgba(0, 0, 0, 0.47) 0%, rgba(255, 255, 255, 0) 50%);
}

.postcard-image-gradient-2{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;

    border-radius: var(--curve-lg);
    background: linear-gradient(166deg, rgba(255, 255, 255, 0.18) 11.43%, rgba(255, 255, 255, 0.00) 53.87%);
}

.postcard-photo.postcard-container{
    padding: 1.25rem;
}

.postcard-mat{
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 1rem;
    pointer-events: none;
}

.postcard-loc{
    position: absolute; left: 1rem; bottom: 0.75rem;
    color: var(--bg-color);
    font-family: 'quicksand-bold';
    font-size: 1rem;
}
.postcard-cred{
    position: absolute; right: 1rem; bottom: 0.75rem;
    color: var(--bg-color);
    font-family: 'quicksand-bold';
    font-size: 1rem;
    z-index: 99;
}
.postcard-cred img{ height: .7em; display: inline; vertical-align: baseline; }

.postcard-info-pill{
    position: absolute;
    left: 50%;
    bottom: calc(2 * var(--site-margin));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid var(--secondary-700);
    border-radius: 1rem;
    width: fit-content;                 /* JS overrides with px to animate */
    box-sizing: border-box;             /* so width includes the border */
    z-index: 999;
    overflow: hidden;                   /* clip the vertical roll */
    transition: width .35s cubic-bezier(.4,0,.2,1);
    padding-bottom: 1rem;               /* room for the progress segments */
}

/* Scrub progress under the text: one segment per card. Each is an outlined
   track whose fill grows left to right while that card is showing
   (postcards.js sets the scale). Display only, not a control. */
.postcard-progress{
    position: absolute;
    left: 50%;
    bottom: 0.375rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    pointer-events: none;
}

.postcard-progress-segment{
    position: relative;
    width: clamp(2.5rem, 7vw, 6.5rem);
    height: 0.25rem;
    border-radius: 999px;
    overflow: hidden;
    background-color: white;
    box-shadow: inset 0 0 0 1px var(--dark-text-color);
}

.postcard-progress-fill{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--dark-text-color);
    transform: scaleX(0);
    transform-origin: left center;
}

.postcard-info-roll{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-inline: 1rem;
}
.postcard-info-roll.roll{
    transition: transform .28s cubic-bezier(.5,0,.12,1);
}

.postcard-info-measure{           /* mimics the roll so its width == real content width */
    position: absolute;
    top: 0; left: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-inline: 1rem;
    white-space: nowrap;
}

.postcard-info-emphasis{
    font-family: 'fraunces-heading';
    font-variation-settings: 'wght' 600, var(--fraunces-axes);
    font-size: var(--h1-size);
    white-space: nowrap;
}

.postcard-info-body{
    display: block;
    font-size: 1.25rem;
    line-height: 1.35;
    text-wrap: balance;               /* even two lines */
    /* width is set by JS to the measured two-line width */
}

.postcard-info-emphasis,
.postcard-info-body{ transition: opacity .2s ease; }

.postcard-info-pill.is-visible{ opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce){
  .postcard-container{ transform: none !important; opacity: 1 !important; }
}

/* ---- persistent stat strip (always visible) ---- */
.postcard-stats{
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 6vh; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    width: min(560px, calc(100% - var(--site-margin) * 2));
}
.postcard-stat{ flex: 1; text-align: center; }
.postcard-stat b{
    display: block;
    font-family: 'fraunces-heading';
    font-variation-settings: 'wght' 900, var(--fraunces-axes);
    font-size: 1.25rem;
    line-height: 1;
}
.postcard-stat span{
    font-size: .65rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--secondary-500, #9a8560);
}
.postcard-stat-divider{ width: 1px; height: 26px; background: var(--secondary-300, #d8c4a0); }

/* ---- reduced motion: drop the peel, show a readable static list ---- */
@media (prefers-reduced-motion: reduce){
    #postcards-section{ height: auto; }
    #postcards-stage{ position: static; height: auto; overflow: visible; padding: var(--site-margin) 0; }
    .postcard-container{
        position: relative; left: auto; top: auto;
        transform: none !important; opacity: 1 !important;
        margin: 0 auto var(--site-margin);
        height: min(58vh, 440px);
    }
    .postcard-info-pill,
    .postcard-stats{ position: static; transform: none; margin: 1rem auto; }
    /* no scrubbing in this layout, so nothing to show progress through */
    .postcard-progress{ display: none; }
    .postcard-info-pill{ padding-bottom: 0; }
}

.postcard-text-tl{
    position: absolute;
    inset:1rem;
    height: 50%;
    width: auto;
    z-index: 20;
}

.postcard-text-br{
    position: absolute;
    bottom:2rem;
    right:2rem;
    height: 50%;
    width: auto;
    z-index: 20;
}

/* ---- phone: static "Why choose SnapMatePhoto?" stack (Figma 7809:3561) ----
   Everything drawn on a postcard panel (wordmarks, polaroids) is laid out in
   Figma px times --u, where --u is one Figma px of the 338px-wide photo area,
   so the artwork keeps its composition at any phone width. */
#postcards-section-mobile{
    display: none;
}

@media screen and (max-width: 768px){	/*	phone:	mobile	nav,	mobile	hero,	single	column	*/
    #postcards-section{
        display: none;
    }

    #postcards-section-mobile{
        --why-yellow-100: #FFF6E5;
        --why-outline: rgba(226, 232, 240, 0.6);

        display: flex;
        flex-direction: column;
        gap: 16px;

        box-sizing: border-box;
        margin: calc(var(--site-margin) * 2) var(--site-margin) var(--site-margin);
        padding: calc(var(--site-margin) * 2) var(--site-margin) var(--site-margin);

        background-color: var(--yellow-200);
        border-radius: 20px;
        color: black;
    }

    .why-heading{
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-left: 0.75rem;
    }

    .why-heading-row{
        display: flex;
        gap: 4px;
    }

    /* "SnapMatePhoto?" can't break, so it shrinks to fit beside the icon */
    .why-heading-row h2{
        flex: 1;
        min-width: 0;
        margin: 0;
        color: var(--dark-text-color);
        /* the room beside the icon (viewport less margins, paddings and the
           59px icon column) over the ~7.9em width of "SnapMatePhoto?" */
        font-size: clamp(1.25rem, calc((100vw - 139px) / 8.2), 2rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        font-variation-settings: 'wght' 600, 'SOFT' 100, 'WONK' 1;
    }

    .why-heading-icon{
        flex: 0 0 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .why-heading-icon img{ transform: rotate(4.72deg); }

    .why-heading-body{
        margin: 0;
        font-family: 'quicksand-regular';
        font-size: 1rem;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .why-card{
        display: flex;
        flex-direction: column;
        filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.1));
    }
    /* in the design these two cast their shadow from the caption only */
    .why-card--caption-shadow{ filter: none; }
    .why-card--caption-shadow .why-card-caption{ box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1); }

    .why-card-panel{
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        aspect-ratio: 354 / 336;
        padding: 8px;
        background-color: var(--bg-color);
        border-radius: 8px;
    }

    .why-card-photo,
    .why-cta-art{
        --u: calc(100cqw / 338);
    }

    .why-card-photo{
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 4px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
    }
    .why-card-photo::before{
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(167deg, rgba(110, 110, 110, 0.26) 11.428%, rgba(255, 255, 255, 0) 53.87%),
            linear-gradient(180deg, rgba(102, 102, 102, 0) 64.245%, rgba(0, 0, 0, 0.22) 94.837%);
    }
    .why-card-photo--occasion::before{
        background: linear-gradient(180deg, rgba(102, 102, 102, 0) 64.245%, rgba(0, 0, 0, 0.34) 94.837%);
    }
    .why-card-photo > *{ position: relative; }

    /* Each wordmark SVG overhangs its Figma box by its stroke; the negative
       margin puts that box back where Figma has it. Flex, so the stacking
       margins between wordmarks don't collapse. */
    .why-card-words,
    .why-card-price{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .why-card-words img,
    .why-card-price img{
        display: block;
        height: auto;
        max-width: none;
    }

    .why-card-words{ padding: calc(var(--u) * 11.384); }
    .why-card-photo--occasion .why-card-words{
        padding: calc(var(--u) * 12.071) 0 0 calc(var(--u) * 9.054);
    }
    .why-card-words--one-place.why-card-words{ padding: calc(var(--u) * 9.986); }

    .wm-every-occasion{ width: calc(var(--u) * 302.539); margin: calc(var(--u) * -0.754); }
    .wm-for{
        position: absolute;
        top: calc(var(--u) * 24.141);
        left: calc(var(--u) * 9.054);
        width: calc(var(--u) * 49.533);
        margin: calc(var(--u) * -0.754);
    }

    .wm-options-for{
        width: calc(var(--u) * 181.421);
        margin: calc(var(--u) * -0.688);
        margin-bottom: calc(var(--u) * (-37.866 - 0.688));
    }
    .wm-every-budget{ width: calc(var(--u) * 281.24); margin: calc(var(--u) * -0.688); }

    .why-card-bottom{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .why-card-price{
        align-self: flex-end;
        width: calc(var(--u) * 137.682);
        margin-right: calc(var(--u) * 18.271);
    }
    .wm-low-as{
        width: calc(var(--u) * 136.523);
        margin: calc(var(--u) * -0.554);
        margin-bottom: calc(var(--u) * (-6.607 - 0.554));
    }
    .wm-50-hr{ width: calc(var(--u) * 138.445); margin: calc(var(--u) * -1.043); }

    .wm-everything{
        width: calc(var(--u) * 194.101);
        margin: calc(var(--u) * -0.832);
        margin-bottom: calc(var(--u) * (-33.287 - 0.832));
    }
    .wm-one-place{ width: calc(var(--u) * 281.692); margin: calc(var(--u) * -0.833); }

    .why-card-credit{
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 6px;
        font-family: 'quicksand-bold';
        font-size: 12px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: var(--bg-color);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }

    .why-card-caption{
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8.76px;
        box-sizing: border-box;
        padding: 14px 11.678px;
        background-color: var(--bg-color);
        border: 1px solid var(--why-outline);
        border-radius: 8px;
        text-align: center;
    }
    .why-card-caption h3,
    .why-cta-art h3{
        margin: 0;
        font-family: 'fraunces-heading', serif;
        font-variation-settings: 'wght' 600, 'SOFT' 100, 'WONK' 1;
        line-height: 1;
        letter-spacing: -0.02em;
        color: black;
    }
    /* sized off the caption so the one-line titles still fit on narrow phones */
    .why-card-caption h3{
        font-size: min(2rem, 9.7cqw);
        white-space: nowrap;
    }
    .why-card-caption p{
        max-width: 334px;
        margin: 0;
        font-family: 'quicksand-medium';
        font-size: min(14.6px, 4.44cqw);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .why-cta-art{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(var(--u) * 16);
        padding-block: calc(var(--u) * 12);
        background-color: var(--why-yellow-100);
        border: 1px solid var(--why-outline);
        border-radius: 8px;
    }
    .why-cta-art h3{
        font-size: calc(var(--u) * 32);
        text-align: center;
    }

    .why-cta-polaroids{
        position: relative;
        flex: none;
        width: calc(var(--u) * 288.6);
        height: calc(var(--u) * 205.45);
    }
    .why-cta-polaroid{
        position: absolute;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: calc(var(--u) * 120);
        height: calc(var(--u) * 145.6);
        padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 12);
        background-color: white;
        border: 1px solid var(--why-outline);
        border-radius: calc(var(--u) * 12);
        box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
    }
    /* left/top are the Figma rotated-box centres less half a polaroid */
    .why-cta-polaroid:nth-child(1){ left: calc(var(--u) * 9.97);   top: calc(var(--u) * 27.78); transform: rotate(-8.39deg); }
    .why-cta-polaroid:nth-child(2){ left: calc(var(--u) * 70.39);  top: calc(var(--u) * 6.04);  transform: rotate(6.19deg); }
    .why-cta-polaroid:nth-child(3){ left: calc(var(--u) * 144.87); top: calc(var(--u) * 42.15); transform: rotate(23.08deg); }
    .why-cta-polaroid img{
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: cover;
        object-position: top;
        border-radius: calc(var(--u) * 8);
        background-color: #F5F7FF;
    }

    .why-card-caption .why-cta-button{
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 56px;
        border-radius: 8px;
        font-size: 18px;
        font-variation-settings: 'wght' 700;
        color: white;
    }
    .why-cta-button > img{
        margin-left: 0;
        height: 20px;
    }
    a.why-cta-button:hover{ text-decoration: none; }
}