@import url("invitation.css");
/* Theme slider (full phone mockups), shared by the landing Showcase 01 and the digital product page hero. */
.ts{--pw:clamp(224px,20.5vw,296px);--tg:clamp(28px,3.4vw,56px);position:relative;width:min(1200px,100%);margin:clamp(32px,3.6vw,52px) auto 0;text-align:center}
.ts-track{padding:14px calc(50% - var(--pw) / 2) 6px;gap:var(--tg);align-items:flex-start;scroll-padding-inline:calc(50% - var(--pw) / 2)}
.ts-item{position:relative;flex:none;width:var(--pw);scroll-snap-align:center;text-align:center;transform:scale(.86);transform-origin:50% 42%;opacity:.5;transition:transform .7s var(--spring),opacity .5s var(--ease)}
.ts-item.is-active{transform:none;opacity:1}
.ts-phone{position:relative;aspect-ratio:9/19.5;border:10px solid #101418;border-radius:clamp(36px,3.4vw,48px);background:#101418;overflow:hidden;text-align:left}
.ts-isl{position:absolute;left:50%;top:9px;z-index:3;width:30%;height:20px;margin-left:-15%;border-radius:12px;background:#101418}
.ts-screen{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#fff}
.ts-scroll{width:360px;transform:scale(var(--s,.7));transform-origin:0 0;pointer-events:none}
.ts-page{will-change:transform}
.ts-ground{display:block;height:18px;margin:14px 10% 0;background:radial-gradient(ellipse at 50% 50%,rgba(14,26,43,.2),transparent 70%)}
.ts-cue{display:inline-flex;align-items:center;margin-top:8px;padding:5px 14px;border-radius:99px;background:#fff;border:1.5px solid var(--blue);color:var(--blue);font-size:12px;font-weight:600;opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.ts-item.is-active .ts-cue{opacity:1;transform:none}
.ts .slider-arrow{top:calc(var(--pw) * 19.5 / 18);margin-top:-22px}.ts .slider-arrow.prev{left:calc(50% - var(--pw) / 2 - var(--tg) - 56px)}.ts .slider-arrow.next{right:calc(50% - var(--pw) / 2 - var(--tg) - 56px)}
.ts-cap{display:grid;justify-items:center;gap:8px;margin-top:14px;min-height:150px}
.ts-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.ts-name b{font-size:clamp(28px,3vw,36px);font-weight:300;color:var(--ink);letter-spacing:-.02em}
.ts-chip{padding:4px 14px;border-radius:99px;background:#E8F1FE;color:var(--blue-deep);font-size:12px;font-weight:700}.ts-chip[data-t=reguler]{background:#EEF1F5;color:var(--text-3)}
.ts-price{font-size:15px;color:var(--text-3)}
.ts-act{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;align-items:center;margin-top:6px}
.ts-rail{margin-top:10px}.ts-rail button{min-width:96px;text-align:center}
@media (max-width:900px){.ts{--pw:232px;--tg:18px}.ts .slider-arrow{display:none}.ts-rail{gap:8px}.ts-rail button{min-width:84px}}
@media (prefers-reduced-motion:reduce){.ts-item,.ts-cue{transition:opacity .2s}}
.ts-track,.ts-cap,.ts-rail{position:relative;z-index:1}.ts .slider-arrow{z-index:5}

/* the track fades at both ends instead of cutting a phone with a straight line */
.ts-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}