/* Story carousel: one slide visible, the rest stacked underneath */
.story { position: relative; aspect-ratio: 4 / 5; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); background: #0f2a38; }
@media (min-width: 640px) { .story { aspect-ratio: 4 / 3; } }
.story__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.story__slide.is-active { opacity: 1; pointer-events: auto; }
.story__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.story__slide.is-active .story__photo { transform: scale(1); }
.story__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,28,40,.94) 0%, rgba(8,28,40,.6) 30%, rgba(8,28,40,0) 58%); }
.story__beat { position: absolute; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem .35rem .4rem; border-radius: 999px; background: rgba(8,28,40,.62); backdrop-filter: blur(8px); color: #fff; font-size: .8rem; font-weight: 700; }
.story__beat b { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #2db6a2; color: #0b2230; font-size: .75rem; }
/* The headline sits beside the app screen, under the face */
.story__copy { position: absolute; bottom: 1.1rem; color: #fff; }
.story__headline { font-size: 1.2rem; line-height: 1.18; font-weight: 800; margin: 0; }
.story__text { display: none; font-size: .95rem; line-height: 1.35; color: #d5e6ec; margin: .35rem 0 0; }
@media (min-width: 640px) { .story__copy { bottom: 1.4rem; } .story__headline { font-size: 1.55rem; } .story__text { display: block; } }
.story__screen { position: absolute; bottom: 1rem; overflow: hidden; background: #fff; box-shadow: 0 25px 40px -15px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.18); transform: translateY(14px); opacity: 0; transition: transform .7s ease .2s, opacity .7s ease .2s; }
.story__screen img { display: block; width: 100%; height: auto; }
.story__slide.is-active .story__screen { transform: translateY(0); opacity: 1; }
.story__screen--phone { width: 33%; max-width: 200px; border-radius: 1rem; border: 3px solid #0b2230; }
.story__screen--laptop { right: 1rem; width: 50%; border-radius: .6rem; border: 3px solid #0b2230; }
/* Phone on the left when the face is on the right of the photo, and the reverse */
.story__slide--screen-left .story__screen--phone { left: 1rem; }
.story__slide--screen-left .story__copy { left: calc(33% + 1.9rem); right: 1rem; }
.story__slide--screen-right .story__screen--phone { right: 1rem; }
.story__slide--screen-right .story__copy { left: 1.1rem; right: calc(33% + 1.9rem); }
.story__slide--laptop .story__copy { left: 1.1rem; right: calc(50% + 1.9rem); }
/* The finished invoice, shown large enough to read */
.story__screen--doc { width: 46%; max-width: 330px; border-radius: .6rem; border: 3px solid #0b2230; }
.story__slide--screen-left .story__screen--doc { left: 1rem; }
.story__slide--screen-right .story__screen--doc { right: 1rem; }
.story__slide--doc.story__slide--screen-left .story__copy { left: calc(46% + 1.9rem); right: 1rem; }
.story__slide--doc.story__slide--screen-right .story__copy { left: 1.1rem; right: calc(46% + 1.9rem); }
/* The customer: words, then their total and Pay now across the bottom, the face left clear */
.story__stack { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.story__stack .story__copy { position: static; }
.story__stack .story__screen { position: static; width: 100%; max-width: 440px; border-radius: .7rem; }
.story__slide--stack .story__shade { background: linear-gradient(to top, rgba(8,28,40,.96) 0%, rgba(8,28,40,.7) 42%, rgba(8,28,40,0) 68%); }
/* Controls: small and out of the way of faces and screens */
.story__controls { position: absolute; top: .9rem; right: .9rem; display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 999px; background: rgba(8,28,40,.62); backdrop-filter: blur(8px); }
.story__nav { display: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; place-items: center; color: #fff; background: transparent; border: 0; cursor: pointer; }
.story__nav:hover, .story__nav:focus-visible { background: #2db6a2; outline: none; }
@media (min-width: 640px) { .story__nav { display: grid; } }
.story__dot { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.45); border: 0; padding: 0; cursor: pointer; transition: width .3s, background .3s; }
.story__dot.is-active { width: 1.3rem; background: #2db6a2; }
.story__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.story__bar span { display: block; height: 100%; width: 0; background: #2db6a2; }
.story.is-playing .story__bar span { animation: story-progress 5.5s linear forwards; }
@keyframes story-progress { from { width: 0 } to { width: 100% } }
/* The three steps mirror the first three slides */
.story-step { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: #fff; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; width: 100%; height: 100%; }
.story-step:hover { background: rgba(255,255,255,.09); }
.story-step.is-active { background: rgba(45,182,162,.16); border-color: rgba(45,182,162,.55); }
.story-step__num { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-weight: 800; font-size: .85rem; }
.story-step.is-active .story-step__num { background: #2db6a2; color: #0b2230; }
.story-step__title { display: block; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.story-step__text { display: block; font-size: .82rem; color: #c3d9e1; line-height: 1.32; margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) {
    .story__slide, .story__photo, .story__screen { transition: none; }
    .story.is-playing .story__bar span { animation: none; width: 100%; }
}
/* Wider screens: keep the customer's words and total in one low row, and the invoice clear of faces */
@media (min-width: 640px) {
    .story__stack { flex-direction: row; align-items: flex-end; gap: 1rem; }
    .story__stack .story__copy { flex: 1; min-width: 0; }
    .story__stack .story__screen { flex: none; width: 50%; }
    .story__slide--stack .story__shade { background: linear-gradient(to top, rgba(8,28,40,.94) 0%, rgba(8,28,40,.6) 30%, rgba(8,28,40,0) 58%); }
    .story__screen--doc { width: 38%; }
    .story__slide--doc.story__slide--screen-left .story__copy { left: calc(38% + 1.9rem); }
    .story__slide--doc.story__slide--screen-right .story__copy { right: calc(38% + 1.9rem); }
}