/* Merchant ID story section */
.merchant-story {
    --story-ink: #2a2d33;
    --story-muted: #666b74;
    --story-line: #9ab6ff;
    position: relative;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    padding: clamp(28px, 4vh, 54px) 24px !important;
    background: #f7f7f7;
    color: var(--story-ink);
    overflow: hidden;
}
.merchant-story *, .merchant-story *::before, .merchant-story *::after { box-sizing: border-box; }
.merchant-story__inner { width: min(1220px, 100%); height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.merchant-story__intro { text-align: center; position: relative; z-index: 3; }
.merchant-story__title {
    margin: 0 auto 10px;
    max-width: 940px;
    font-size: clamp(30px, 3vw, 52px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.03em;
    text-transform: uppercase;
}
.merchant-story__lede {
    margin: 0 auto;
    max-width: 760px;
    color: var(--story-muted);
    font-size: clamp(10px, 0.85vw, 12px);
    line-height: 1.6;
    text-transform: uppercase;
}
.merchant-story__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(190px,1fr) minmax(400px, 530px) minmax(190px,1fr);
    align-items: center;
    gap: clamp(18px, 2.5vw, 42px);
    padding-top: clamp(18px, 3vh, 28px);
}
.merchant-story__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(80px, 11vh, 128px);
    position: relative;
}
.merchant-story__callout {
    position: relative;
    max-width: 290px;
    opacity: 0;
    visibility: hidden;
}
.merchant-story__column--left .merchant-story__callout { margin-right: auto; text-align: left; }
.merchant-story__column--right .merchant-story__callout { margin-left: auto; text-align: left; }
.merchant-story__callout h3 {
    margin: 0 0 10px;
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
}
.merchant-story__callout p {
    margin: 0;
    color: var(--story-muted);
    font-size: clamp(10px, 0.78vw, 12px);
    line-height: 1.55;
    text-transform: uppercase;
}
.merchant-story__column--left .merchant-story__callout::after,
.merchant-story__column--right .merchant-story__callout::after {
    content: "";
    position: absolute;
    top: 16px;
    width: clamp(34px, 5vw, 70px);
    border-top: 1.5px solid var(--story-line);
    opacity: .9;
}
.merchant-story__column--left .merchant-story__callout::after { right: calc(-1 * clamp(34px, 5vw, 70px)); }
.merchant-story__column--right .merchant-story__callout::after { left: calc(-1 * clamp(34px, 5vw, 70px)); }
.merchant-story__device-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.merchant-story__device {
    width: min(100%, 510px, 63vh);
}
.merchant-story__device-frame {
    position: relative;
    width: 100%;
}
.merchant-story__machine-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .22));
}
.merchant-story__real-card {
    position: absolute;
    left: 50%;
    bottom: -1%;
    width: 23%;
    height: auto;
    transform: translateX(-50%); /* GSAP handles vertical movement; final position just touches the slot. */
    transform-origin: 50% 0%;
    opacity: 0;
    visibility: hidden;
    z-index: 5; /* Card stays visibly in front of the terminal, touching the slot. */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
}
.merchant-story__screen-cardbox {
    position: absolute;
    left: 38.5%; /* Upper-left CARD tile on the real machine screen */
    top: 46.5%;
    width: 19.5%;
    height: auto;
    transform: translate(-50%, -50%) scale(.35);
    transform-origin: 50% 50%;
    opacity: 0;
    visibility: hidden;
    z-index: 6;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.14));
}

@media (max-width: 1100px) and (min-width: 761px) {
    .merchant-story__stage {
        grid-template-columns: minmax(155px,1fr) minmax(330px, 450px) minmax(155px,1fr);
        gap: 18px;
    }
    .merchant-story__callout { max-width: 240px; }
    .merchant-story__callout h3 { font-size: 13px; }
    .merchant-story__callout p { font-size: 10px; }
}

@media (max-width: 760px) {
    .merchant-story {
        min-height: 100svh;
        height: 100svh;
        padding: 22px 16px 24px !important;
    }
    .merchant-story__title {
        font-size: clamp(22px, 6vw, 34px);
        line-height: 1.08;
        margin-bottom: 8px;
    }
    .merchant-story__lede {
        font-size: clamp(9px, 2.3vw, 11px);
        line-height: 1.45;
        max-width: 560px;
    }
    .merchant-story__stage {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        padding-top: 18px;
        position: relative;
    }
    .merchant-story__device-wrap { order: 1; width: 100%; }
    .merchant-story__device { width: min(88vw, 390px, 48vh); }
    .merchant-story__column { display: contents; }
    .merchant-story__callout {
        order: 2;
        position: absolute;
        left: 50%;
        top: calc(min(108.4vw, 480.5px, 59.14vh) + 28px);
        width: min(100%, 420px);
        max-width: 420px;
        padding: 0 6px;
        text-align: center !important;
        transform: translateX(-50%);
    }
    .merchant-story__callout::after { display: none !important; }
    .merchant-story__callout h3 { font-size: clamp(14px, 3.8vw, 16px); margin-bottom: 8px; }
    .merchant-story__callout p { font-size: clamp(10px, 2.7vw, 12px); line-height: 1.5; }
    .merchant-story__real-card {
        width: 24%;
        bottom: -1%;
    }
    .merchant-story__screen-cardbox {
        width: 19.5%;
        top: 46.5%;
    }
}

@media (max-width: 760px) and (max-height: 720px) {
    .merchant-story { padding-top: 16px !important; }
    .merchant-story__title { font-size: clamp(20px, 5.5vw, 28px); }
    .merchant-story__lede { font-size: 9px; line-height: 1.35; }
    .merchant-story__device { width: min(76vw, 305px, 43vh); }
    .merchant-story__callout { top: calc(min(93.63vw, 375.8px, 52.98vh) + 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .merchant-story { height: auto; min-height: auto; }
    .merchant-story__stage { display: flex; flex-direction: column; gap: 18px; }
    .merchant-story__column { display: flex; gap: 18px; width: 100%; }
    .merchant-story__callout {
        position: static;
        max-width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none !important;
        text-align: left !important;
    }
    .merchant-story__callout::after { display: none; }
    .merchant-story__real-card,
    .merchant-story__screen-cardbox {
        opacity: 1;
        visibility: visible;
    }
    .merchant-story__real-card { transform: translateX(-50%) translateY(0); }
    .merchant-story__screen-cardbox { transform: translate(-50%, -50%) scale(1); }
}