.reference-home .home-showcase{--phone-card:260px;padding:64px 0 54px;background:linear-gradient(180deg,#faf6ff,#fff);overflow:hidden;text-align:center;color:#2d1e41}.reference-home .home-showcase-heading{padding:0 24px}.reference-home .home-showcase-heading h2{font:700 clamp(28px,4vw,40px)/1.2 Inter,system-ui,sans-serif;margin:0 0 14px}.reference-home .home-showcase-heading p{color:#746780;font-size:16px;margin:0 0 16px}.reference-home .home-showcase-track{display:flex;gap:36px;direction:ltr;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:28px max(24px,calc((100% - var(--phone-card))/2)) 24px;scrollbar-width:none;align-items:center}.reference-home .home-showcase-track::-webkit-scrollbar{display:none}.reference-home .home-showcase-card{flex:0 0 var(--phone-card);width:var(--phone-card);scroll-snap-align:center;opacity:.46;transform:scale(.9);transition:transform .35s ease,opacity .35s ease}.reference-home .home-showcase-card.is-current{opacity:1;transform:scale(1)}.reference-home .home-showcase-phone{display:block;position:relative;border:7px solid #24222b;border-radius:40px;background:#24222b;aspect-ratio:9/18.5;overflow:hidden;box-shadow:0 15px 32px #2b173126,0 0 0 2px #b9b3bd}.reference-home .home-showcase-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}.reference-home .home-showcase-island{position:absolute;z-index:1;top:10px;left:50%;transform:translateX(-50%);width:76px;height:21px;background:#16151b;border-radius:20px;box-shadow:inset -10px 0 0 #1d1e27}.reference-home .home-showcase-preview{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);padding:9px 17px;background:#ffffffeb;border:1px solid #fff9;border-radius:30px;color:#352642;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 3px 15px #0001}.reference-home .home-showcase-card h3{font:600 17px/1.4 Inter,system-ui,sans-serif;margin:20px 0 0;min-height:48px}.reference-home .home-showcase-controls{display:flex;align-items:center;justify-content:center;gap:23px;direction:ltr;margin:6px 0 23px}.reference-home .home-showcase-controls>button{width:44px;height:44px;border:1px solid #e5d7f2;border-radius:50%;background:white;color:#7422c5;font-size:22px;cursor:pointer}.reference-home .home-showcase-dots{display:flex;align-items:center;gap:4px}.reference-home .home-showcase-dots button{width:26px;height:30px;padding:0;background:transparent;cursor:pointer;border:0;position:relative}.reference-home .home-showcase-dots button:after{content:'';position:absolute;left:9px;top:11px;width:8px;height:8px;border-radius:50%;background:#d8cbe4;transition:background .2s,transform .2s}.reference-home .home-showcase-dots button[aria-current=true]:after{background:#8c2de2;transform:scale(1.3)}.reference-home .home-showcase-all{display:inline-flex;align-items:center;gap:10px;color:#7422c5;font-weight:600;padding:10px 20px}.reference-home .home-showcase a:focus-visible,.reference-home .home-showcase button:focus-visible,.reference-home .home-showcase-track:focus-visible{outline:3px solid #9333ea;outline-offset:4px}@media(max-width:600px){.reference-home .home-showcase{--phone-card:220px;padding:44px 0 36px}.reference-home .home-showcase-track{gap:14px}.reference-home .home-showcase-phone{border-radius:34px}.reference-home .home-showcase-heading h2{font-size:30px!important}.reference-home .home-showcase-controls{gap:12px}}@media(prefers-reduced-motion:reduce){.reference-home .home-showcase-card,.reference-home .home-showcase-dots button:after{transition:none}}

/* Compact phone gallery: controls stay close to the previews. */
.reference-home .home-showcase{--phone-card:174px;padding:28px 0 20px}
.reference-home .home-showcase-heading h2{font-size:28px;margin:0 0 8px}
.reference-home .home-showcase-heading p{font-size:14px;margin:0 0 4px}
.reference-home .home-showcase-track{gap:24px;padding-top:12px;padding-bottom:8px;scroll-behavior:auto}
.reference-home .home-showcase-track.is-moving{scroll-snap-type:none}
.reference-home .home-showcase-card,.reference-home .home-showcase-card.is-current{opacity:var(--focus-opacity,.45);transform:translateY(var(--focus-y,0px)) scale(var(--focus-scale,.86));transition:none}
.reference-home .home-showcase-card.is-current{--focus-opacity:1;--focus-scale:1}
.reference-home .home-showcase-phone{border-width:5px;border-radius:28px;box-shadow:0 10px 22px #2b17311f,0 0 0 1px #b9b3bd}
.reference-home .home-showcase-island{width:52px;height:15px;top:7px}
.reference-home .home-showcase-preview{bottom:16px;padding:7px 13px;font-size:11px}
.reference-home .home-showcase-card h3{font-size:14px;margin:10px 0 0;min-height:38px}
.reference-home .home-showcase-controls{gap:18px;margin:0 0 6px}
.reference-home .home-showcase-all{font-size:14px;padding:6px 16px}
@media(max-width:600px){.reference-home .home-showcase{--phone-card:158px;padding:24px 0 16px}.reference-home .home-showcase-track{gap:16px}.reference-home .home-showcase-heading h2{font-size:26px!important}.reference-home .home-showcase-phone{border-radius:26px}.reference-home .home-showcase-controls{gap:10px}}
@media(max-height:700px){.reference-home .home-showcase{--phone-card:145px;padding-top:20px}.reference-home .home-showcase-heading p{font-size:13px}}

.reference-home .home-showcase-phone iframe{position:absolute;top:0;left:0;border:0;max-width:none;transform-origin:top left;background:#fff;z-index:2}.reference-home .home-showcase-phone.is-playing>.home-showcase-preview{display:none}.reference-home .home-showcase-close{position:absolute;z-index:4;top:17px;right:5px;width:28px;height:28px;border:1px solid #ddd;border-radius:50%;background:#fffffff0;color:#352642;font:20px/1 sans-serif;cursor:pointer}

/* Balanced screen proportions: match the invitation canvas without letterboxing. */
.reference-home .home-showcase{--phone-card:220px;padding:24px 0 8px;min-height:0}
.reference-home .home-showcase-phone{aspect-ratio:auto;height:calc((var(--phone-card) - 10px)*16/9 + 10px)}
.reference-home .home-showcase-track{padding-top:12px;padding-bottom:0}
.reference-home .home-showcase-card h3{min-height:24px;margin-top:9px}
.reference-home .home-showcase-controls{margin:3px 0 0}
.reference-home .home-showcase-all{padding:4px 16px}
.reference-home .home-showcase+section{padding-top:28px}
.reference-home .home-showcase-close{top:10px;right:8px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #ffffff80;background:linear-gradient(145deg,#8436cbeF,#492278f5);color:white;box-shadow:0 3px 10px #29133e40,inset 0 1px 0 #ffffff30;backdrop-filter:blur(8px);transition:background .2s,box-shadow .2s}
.reference-home .home-showcase-close svg{width:22px;height:22px}
.reference-home .home-showcase-close:hover{background:#6c28a9;box-shadow:0 4px 12px #29133e60}
.reference-home .home-showcase-close:focus-visible{outline:2px solid #a855f7;outline-offset:3px}
@media(max-width:600px){.reference-home .home-showcase{--phone-card:200px;padding-top:20px}.reference-home .home-showcase-close{width:26px;height:26px}}
@media(max-height:700px) and (min-width:601px){.reference-home .home-showcase{--phone-card:200px}}
.reference-home .home-showcase-close{min-height:0;min-width:0;max-height:28px;aspect-ratio:1;box-sizing:border-box;line-height:1}.reference-home .home-showcase-close svg{display:block;flex:none}