.shot-frame{overflow:hidden;border-radius:18px;background:var(--color-ink-900);border:1px solid var(--glass-line);box-shadow:0 30px 80px -40px #f0614a59,var(--glass-shadow)}.shot-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--glass-line);background:var(--glass-card)}.shot-bar span{width:10px;height:10px;border-radius:999px;background:var(--color-ink-700)}.shot-bar p{margin-left:10px;flex:1;max-width:320px;height:24px;padding:0 12px;border-radius:999px;font-family:var(--font-mono);font-size:12px;line-height:24px;color:var(--color-fg-dim);background:var(--color-ink-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shot-view{position:relative;aspect-ratio:16 / 11;overflow:hidden;container-type:size;background:var(--color-ink-800)}.shot-pan img{animation:shot-pan 48s ease-in-out infinite alternate;will-change:transform}.shot-pan-slow img{animation-duration:70s}.shot-scroll{aspect-ratio:16 / 12;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.shot-scroll:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-2px}.shot-still{aspect-ratio:auto}.phone-frame{padding:10px;border-radius:44px;background:var(--color-ink-900);border:1px solid var(--glass-line);box-shadow:0 30px 80px -40px #f0614a59,var(--glass-shadow)}.phone-frame .shot-view{aspect-ratio:9 / 19;border-radius:34px}@keyframes shot-pan{0%{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}.shot-wall{position:relative;height:clamp(460px,56vw,860px);overflow:hidden;border-top:1px solid var(--glass-line);border-bottom:1px solid var(--glass-line);background:var(--color-ink-900)}.shot-wall-plane{position:absolute;left:50%;top:50%;display:grid;grid-template-columns:2.5fr .95fr 2.5fr .95fr 2.5fr;gap:28px;width:max(125vw,1700px);height:190%;transform:translate(-50%,-50%) perspective(2600px) rotateX(22deg) rotate(-9deg);transform-origin:center}.shot-col{display:flex;flex-direction:column;min-width:0}.shot-col-track{display:flex;flex:none;flex-direction:column;padding-bottom:28px;animation:shot-rise 90s linear infinite;will-change:transform}.shot-col-mobile .shot-col-track{animation-duration:70s}.shot-col-reverse .shot-col-track{animation-direction:reverse}.shot-tile{overflow:hidden;border-radius:22px;border:1px solid var(--glass-line);background:var(--color-ink-800);box-shadow:0 40px 80px -30px #0000008c}.shot-col-mobile .shot-tile{border-radius:30px;border-width:6px;border-color:var(--color-ink-950)}@keyframes shot-rise{to{transform:translateY(-100%)}}[data-shots]:hover .shot-pan img,[data-shots]:hover .shot-col-track,[data-shots-paused] .shot-pan img,[data-shots-paused] .shot-col-track{animation-play-state:paused}@media(max-width:767px){.shot-wall-plane{width:260vw;gap:16px;transform:translate(-50%,-50%) perspective(1600px) rotateX(18deg) rotate(-8deg)}.shot-col-track{padding-bottom:16px}.shot-tile{border-radius:12px}.shot-col-mobile .shot-tile{border-radius:16px;border-width:3px}}@media(prefers-reduced-motion:reduce){.shot-pan img,.shot-col-track{animation:none}.shot-pan{overflow-y:auto}.shot-col-track[aria-hidden=true]{display:none}}.device-duo{position:relative;padding:0 9% 13% 0}.device-duo-solo{padding:0}.device-duo-phone{position:absolute;right:0;bottom:0;width:31%;min-width:118px;filter:drop-shadow(0 24px 40px rgb(0 0 0 / .45))}.device-duo-phone .phone-frame{padding:6px;border-radius:28px}.device-duo-phone .phone-frame .shot-view{border-radius:22px}.quote-mark{width:56px;height:56px;fill:currentColor;color:var(--color-brand-500)}.quote-avatar{display:flex;flex:none;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f7c948 -10%,#f0614a 55%,#a81e5a 130%)}.legal-body h2+p,.legal-body p+p,.legal-body ul+p,.legal-body p+ul{margin-top:.9rem}.flow-action{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass-card);font-size:14.5px;line-height:1.4;color:var(--color-fg)}.flow-action .flow-icon{display:flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:999px;background:var(--color-ink-800);color:var(--color-brand-500)}.flow-action .flow-check{width:13px;height:13px;fill:currentColor}[data-flow-ready] .flow-action[data-state=active]{background:color-mix(in srgb,var(--color-brand-500) 10%,transparent)}
/*# sourceMappingURL=/cdn/shop/t/28/assets/component-case-study.css.map */