.product-hero{grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:54px}.product-film{min-width:0;width:100%;margin:0;align-self:center}.product-film-picture{display:flex;justify-content:center;background:none;border:0;box-shadow:none}.product-film-picture video{width:auto;height:420px;max-width:100%;object-fit:contain;border:0;border-radius:0;background:none}.product-film.is-walkthrough .product-film-picture video{width:100%;height:auto;aspect-ratio:16/9;mix-blend-mode:lighten}.product-film figcaption,.story-compare figcaption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:17px;color:var(--mute);font-size:12px}.product-film figcaption{max-width:520px;margin:auto}.quiet-control{background:none;padding:8px 0;color:var(--mute);font-size:12px;text-decoration:underline;text-underline-offset:4px}.quiet-control:hover{color:#fff}.talking-how .section-head{align-items:center}.talking-flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:38px}.talking-moment{min-width:0}.moment-visual{height:360px;position:relative;display:flex;align-items:center;justify-content:center}.moment-caption{display:flex;gap:14px;margin-top:32px;align-items:baseline}.moment-caption>span{font-size:12px;color:#77777e;font-variant-numeric:tabular-nums}.moment-caption h3{font-size:23px}.moment-caption p{font-size:14px;color:var(--mute);margin-top:11px;max-width:29ch}.raw-take{position:absolute;width:43%;max-width:166px;transition:transform .3s}.raw-take video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:5px}.raw-take figcaption{font-size:9px;letter-spacing:.07em;color:#b9b9bc;margin-top:9px;text-align:center}.raw-take.take-1{transform:translate(-63%,15px) rotate(-9deg);z-index:1}.raw-take.take-2{z-index:3;transform:translateY(-14px)}.raw-take.take-3{transform:translate(63%,15px) rotate(9deg);z-index:2}.raw-takes:hover .take-1{transform:translate(-68%,15px) rotate(-11deg)}.raw-takes:hover .take-3{transform:translate(68%,15px) rotate(11deg)}.prompt-stage{flex-direction:column;align-items:center;padding:0}.prompt-chat{width:100%;max-width:340px;padding:22px;border:1px solid #39393f;border-radius:14px;background:#1b1b1e}.prompt-chat-agents{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:22px;color:#d8d8df;font-size:11px;line-height:24px}.prompt-chat-agents>span{display:flex;align-items:center;gap:7px;white-space:nowrap}.prompt-chat-agents img{width:21px;height:21px;object-fit:contain}.prompt-chat-agents img[src$="/grok.svg"]{filter:invert(1)}.prompt-attachment{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.04em;color:#c1c1c9;margin-bottom:16px}.prompt-attachment img{width:23px;height:32px;object-fit:cover;border-radius:3px}.typed-request{font-size:25px;font-weight:500;letter-spacing:-.025em;line-height:1.35;min-height:70px;max-width:100%;overflow-wrap:anywhere}.typed-request [data-typed-request]{white-space:pre-wrap}.typing-caret{display:inline-block;width:2px;height:.95em;background:#e88970;margin-left:3px;vertical-align:-.1em;animation:story-caret 1s steps(1) infinite}.prompt-chat-tools{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.prompt-chat-tools>.icon{width:20px;height:20px;color:#b0b0b8}.prompt-send{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--red);transform:rotate(-90deg)}.prompt-send .icon{width:17px}.finished-stage{gap:18px}.finished-stage>video{height:326px;width:183px;object-fit:cover;border-radius:5px;flex:none}.finished-checks{display:flex;flex-direction:column;gap:15px;font-size:13px;line-height:1.2}.finished-checks span{display:flex;align-items:center;gap:8px}.finished-checks .icon{width:16px;height:16px;stroke-width:2.5;color:#ef7373}.talking-result{grid-template-columns:1fr 1fr;gap:100px}.result-details{display:grid;gap:15px;font-size:14px;margin:28px 0 32px;color:#d9d9df}.result-details span{display:flex;align-items:center;gap:12px}.result-details .icon{width:18px;color:#ec7474}.talking-result .text-link{padding:0;background:none}.story-compare{width:min(100%,342px);justify-self:center}.story-compare-picture{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:6px;isolation:isolate}.story-compare canvas{display:block;width:100%;height:100%;object-fit:cover}.comparison-decoder{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.story-compare-labels{position:absolute;left:14px;right:14px;top:15px;display:flex;justify-content:space-between;pointer-events:none;font-size:10px;font-weight:500;text-shadow:0 1px 5px #000}.story-compare-labels span{padding:4px 6px;background:#0005;border-radius:3px}.story-compare-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;transform:translate(-50%)}.story-compare-line>span{position:absolute;top:50%;left:50%;width:41px;height:41px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#151516;box-shadow:0 2px 12px #0003;font-size:24px;letter-spacing:2px;padding-left:2px}.story-compare-range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:none}.story-compare-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1px;height:100%;background:transparent}.story-compare-range::-moz-range-thumb{width:1px;height:100%;border:0;background:transparent}.story-compare-picture:has(input:focus-visible){outline:3px solid #ff9292;outline-offset:5px}.story-compare figcaption>div{display:flex;gap:18px}.story-eyebrow{display:block;color:var(--mute);font-size:13px;margin-bottom:18px}.talking-handoff{gap:88px}.talking-handoff .actions{margin-top:27px}.talking-handoff .small{margin-top:14px}.handoff-animation{position:relative;min-width:0;height:370px}.zip-arrival{position:absolute;top:12px;left:15%;z-index:3;animation:zip-handoff 8s infinite both}.zip-object{position:relative;width:105px;height:129px;background:#ebebed;color:#232326;border-radius:8px;padding:20px 12px;box-shadow:0 8px 25px #0004;transform:rotate(-9deg)}.zip-object b{font-size:18px;line-height:1.1;letter-spacing:-.04em;font-weight:600;display:block}.zip-object small{font-size:11px;position:absolute;bottom:12px;left:12px;color:#77777e}.zip-mark{position:absolute;right:20px;top:0;width:8px;height:90px;background:repeating-linear-gradient(0deg,#888 0 3px,transparent 3px 6px)}.zip-mark:after{content:"";position:absolute;width:12px;height:19px;top:88px;left:-2px;border:3px solid #888;border-radius:3px}.folder-arrival{position:absolute;top:25px;left:45%;z-index:4;animation:folder-handoff 8s infinite both}.context-folder{text-align:center;position:relative}.context-folder>span{display:block;font-size:14px;color:#d3d3da;margin-top:14px}.folder-object{position:relative;width:112px;height:87px;filter:drop-shadow(0 12px 14px #0003)}.folder-back{position:absolute;top:10px;right:0;bottom:0;left:0;border-radius:5px;background:linear-gradient(135deg,#328bd6,#096eb9)}.folder-back:before{content:"";position:absolute;top:-9px;left:0;width:47%;height:17px;border-radius:5px 8px 0 0;background:#328bd6}.folder-paper{position:absolute;top:15px;right:7px;bottom:8px;left:7px;border-radius:2px;background:#d5eaff;transform:rotate(-5deg);transition:transform .5s,opacity .5s}.folder-front{position:absolute;top:25px;right:0;bottom:0;left:0;border-radius:5px 5px 7px 7px;background:linear-gradient(165deg,#78caff,#369ee9 56%,#2689d5);box-shadow:inset 0 1px #fff7;transform:skew(-3deg);transform-origin:bottom}.agent-destination{position:absolute;left:10%;right:4%;bottom:46px;min-height:130px;border-radius:16px;background:#1b1b1e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}.destination-logos{display:flex;gap:18px;align-items:center}.destination-logos img{height:26px;width:26px;object-fit:contain}.agent-destination>span:not(.drop-cursor){font-size:12px;color:#b4b4bb}.destination-rest{animation:destination-rest 8s infinite both}.destination-ready{position:absolute;bottom:24px;animation:destination-ready 8s infinite both}.drop-cursor{position:absolute;top:-89px;left:62%;width:25px;height:29px;animation:cursor-handoff 8s infinite both}.handoff-caption{position:absolute;bottom:0;left:10%;right:4%;display:flex;justify-content:center;gap:24px;color:var(--mute);font-size:12px}.context-story{max-width:960px;margin:auto}.context-story .section-head{margin-bottom:52px}.context-story .section-head p{max-width:470px}.context-animation{max-width:840px;margin:auto}.context-note{width:fit-content;max-width:100%;min-height:44px;display:flex;align-items:center;gap:13px;margin:0 auto 40px;font-size:15px;color:#dddde1}.note-dot{width:7px;height:7px;background:#e5896f;border-radius:50%;flex:none}.context-saved{font-size:11px;display:flex;align-items:center;gap:5px;color:#92929b;white-space:nowrap}.context-saved .icon{height:14px;width:14px}.context-folders{display:flex;justify-content:space-around;gap:24px}.context-folders .context-folder{transition:transform .45s cubic-bezier(.22,1,.36,1);opacity:.78}.context-folders .context-folder.is-active{transform:translateY(-7px);opacity:1}.context-folders .context-folder.is-active .folder-paper{transform:translateY(-9px) rotate(-6deg)}.context-close{text-align:center;font-size:14px;color:var(--mute);margin:40px auto 0}.talking-style .specimens{border:0;background:none;padding:30px 0}.talking-style .specimen-words{font-size:clamp(36px,4vw,55px)}[data-motion-scene] *,[data-motion-scene]{animation-play-state:paused!important}[data-motion-scene].is-in-view *,[data-motion-scene].is-in-view{animation-play-state:running!important}.story-motion-paused [data-motion-scene] *,.story-motion-paused [data-motion-scene]{animation-play-state:paused!important}@keyframes story-caret{50%{opacity:0}}@keyframes zip-handoff{0%,12%{opacity:1;transform:translateY(0) rotate(0)}25%,82%{opacity:0;transform:translate(24px,9px) scale(.75)}96%,to{opacity:1;transform:translateY(0)}}@keyframes folder-handoff{0%,16%{opacity:0;transform:translate(-40px,4px) scale(.8)}30%,40%{opacity:1;transform:translate(0)}60%,76%{opacity:0;transform:translateY(130px) scale(.6)}90%,to{opacity:0;transform:translate(-40px,4px) scale(.8)}}@keyframes cursor-handoff{0%,28%{opacity:0;transform:translate(25px,25px)}38%,42%{opacity:1;transform:translate(0)}62%,72%{opacity:1;transform:translateY(130px)}80%,to{opacity:0;transform:translateY(130px)}}@keyframes destination-rest{0%,48%{opacity:1}60%,80%{opacity:0}94%,to{opacity:1}}@keyframes destination-ready{0%,53%{opacity:0;transform:translateY(5px)}64%,80%{opacity:1;transform:translateY(0)}91%,to{opacity:0;transform:translateY(0)}}@media(max-width:1100px){.product-hero{gap:35px;grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr)}.talking-flow{gap:22px}.moment-visual{height:310px}.raw-take{width:44%}.finished-stage{gap:10px}.finished-stage>video{width:147px;height:262px}.finished-checks{font-size:11px;gap:13px}.finished-checks span{gap:5px}.prompt-chat{padding:18px}.prompt-chat-agents{gap:14px;font-size:10px}.prompt-chat-agents>span{gap:5px}.prompt-chat-agents img{width:19px;height:19px}.typed-request{font-size:23px}.talking-result,.talking-handoff{gap:50px}}@media(max-width:800px){.product-hero{display:flex;flex-direction:column-reverse;gap:35px;align-items:stretch}.product-film{max-width:650px;margin:auto}.buy-copy{max-width:600px}.talking-flow{grid-template-columns:1fr;gap:46px}.talking-moment{display:grid;grid-template-columns:minmax(0,1.1fr) 1fr;align-items:center;gap:40px}.moment-caption{margin:0}.moment-visual{height:310px}.prompt-stage{padding:0}.finished-stage>video{width:150px;height:267px}.finished-checks{font-size:12px}.talking-result{gap:35px}.story-compare{width:min(100%,300px)}.talking-result h2,.talking-handoff h2{font-size:38px}.result-details{font-size:12px}.talking-handoff{gap:20px}.zip-arrival{left:5%}.agent-destination,.handoff-caption{left:0;right:0}.context-note{font-size:13px;gap:9px}.context-folders{gap:16px}.context-folders .folder-object{width:95px;height:74px}}@media(max-width:600px){.product-film-picture video{height:390px;max-height:110vw}.product-film figcaption{font-size:11px}.talking-how .section-head{align-items:flex-start}.talking-how .section-head h2{max-width:16ch}.talking-how .section-head .quiet-control{padding-top:0}.talking-flow{gap:48px}.talking-moment{display:flex;flex-direction:column;gap:0}.moment-visual{width:100%;height:300px;max-width:380px}.moment-caption{margin-top:16px;width:100%;max-width:350px}.moment-caption h3{font-size:23px}.moment-caption p{max-width:31ch}.raw-take{width:40%;max-width:135px}.prompt-stage{height:260px;padding:0}.typed-request{font-size:25px;max-width:100%}.prompt-chat-agents{gap:20px;font-size:11px}.prompt-chat-agents img{width:21px;height:21px}.finished-stage{height:335px;gap:25px}.finished-stage>video{height:320px;width:180px}.finished-checks{font-size:13px}.talking-result{grid-template-columns:1fr}.talking-result h2,.talking-handoff h2{font-size:36px}.result-details{font-size:14px}.story-compare{width:min(100%,320px)}.talking-handoff{display:flex;flex-direction:column-reverse;gap:24px;align-items:stretch}.handoff-animation{height:350px;max-width:400px;width:100%;margin:auto}.zip-arrival{left:13%}.agent-destination,.handoff-caption{left:6%;right:2%}.folder-arrival{left:46%}.context-story .section-head{margin-bottom:32px}.context-story .section-head h2{font-size:33px;max-width:17ch}.context-note{font-size:12px;margin-bottom:28px;flex-wrap:wrap;justify-content:center;gap:8px}.context-saved{flex-basis:100%;justify-content:center}.context-folders{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px;max-width:300px;margin:auto}.context-folders .folder-object{margin:auto;width:99px;height:78px}.context-folder>span{font-size:13px}.context-close{font-size:13px;margin-top:30px}.talking-style .specimens{padding-top:5px}}@media(prefers-reduced-motion:reduce){[data-motion-scene] *{animation:none!important;transition:none!important}.typing-caret{display:none}.zip-arrival,.folder-arrival{opacity:1;transform:none}.drop-cursor,.destination-ready{display:none}.destination-rest{opacity:1}.context-folders .context-folder{opacity:1;transform:none}.raw-takes:hover .take-1{transform:translate(-63%,15px) rotate(-9deg)}.raw-takes:hover .take-3{transform:translate(63%,15px) rotate(9deg)}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/product-story.css.map */