/* Existing browser windows revealed only by scroll or explicit steps. */ #landing-page .demo-scroll-shell.has-scroll-story{height:var(--story-height,6500px)!important;perspective:none;overflow:visible} #landing-page #product[data-scroll-story=active]{position:sticky!important;top:var(--story-nav,76px)!important;height:calc(100svh - var(--story-nav,76px))!important;padding:12px 4% 18px!important;min-height:0;max-height:none} #landing-page #product[data-scroll-story=active] .demo-sticky{height:100%;display:flex;flex-direction:column;gap:12px} #landing-page #product[data-scroll-story=active] .demo-top{flex:none;min-height:0;margin:0} #landing-page #product[data-scroll-story=active] .demo-top h2{font-size:clamp(23px,2.5vw,36px)} #landing-page #product[data-scroll-story=active] .demo-header-tools, #landing-page #product[data-scroll-story=active] .demo-mobile-tabs, #landing-page #product[data-scroll-story=active] .scenario-bar, #landing-page #product[data-scroll-story=active] .demo-actions, #landing-page #product[data-scroll-story=active] .demo-status, #landing-page #product[data-scroll-story=active] .mobile-demo-card-label, #landing-page #product[data-scroll-story=active] .mobile-demo-stack-controls, #landing-page #product[data-scroll-story=active] .mobile-demo-stack-hint{display:none!important} #landing-page #product .scroll-story-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:none} #landing-page #product .scroll-story-copy{min-width:0;max-width:680px} #landing-page #product .scroll-story-position{font:11px/1.5 ui-monospace,monospace;color:#b1b1bc;letter-spacing:.08em} #landing-page #product .scroll-story-copy h3{font-size:19px;font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:4px 0} #landing-page #product .scroll-story-copy p{font-size:13px;line-height:1.5;color:#bebec7;margin:0} #landing-page #product .scroll-story-controls{display:flex;gap:8px;align-items:center;flex:none} #landing-page #product .scroll-story-controls button{font-size:12px;line-height:1.3;color:#ededf1;background:#242429;border:1px solid #ffffff25;border-radius:8px;min-width:44px;min-height:44px;padding:8px 12px;cursor:pointer} #landing-page #product .scroll-story-controls button:disabled{opacity:.38;cursor:default} #landing-page #product .scroll-story-controls button:focus-visible{outline:2px solid #eee;outline-offset:3px} #landing-page #product .scroll-story-controls [hidden]{display:none!important} #landing-page #product[data-scroll-story=active] .browser-stage{height:auto!important;min-height:0!important;flex:1;perspective:none;padding:0!important;overflow:visible} #landing-page #product[data-scroll-story=active] .browser-board{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)!important;gap:18px;height:100%;padding:0} #landing-page #product[data-scroll-story=active] .real-window{display:flex!important;height:calc(64px + (100% - 64px) * var(--story-reveal,0));min-height:64px;margin:0!important;transform:none!important;transition:none;overflow:hidden} #landing-page #product[data-scroll-story=active] .window-body{height:auto!important;max-height:none!important;min-height:0!important;flex:1;display:grid!important;grid-template-columns:minmax(0,1fr) clamp(300px,28vw,410px);overflow:hidden} #landing-page #product[data-scroll-story=active] .second-window .window-body{display:flex!important} #landing-page #product[data-scroll-story=active] .assistant-pane{display:flex!important;flex-direction:column;min-height:0;width:auto} #landing-page #product[data-scroll-story=active] .provider-transcript{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:auto} #landing-page #product[data-scroll-story=active] .extension-dock{display:flex!important;width:auto;min-height:0} #landing-page #product[data-scroll-story=active] iframe{pointer-events:auto;touch-action:auto} #landing-page #product[data-scroll-story=active] .extension-label button{visibility:hidden} #landing-page #product[data-scroll-story=active] .browser-tabs{display:flex!important;flex:none} #landing-page #product[data-scroll-story=active] .browser-url{display:flex!important;flex:none} #landing-page #product[data-scroll-story=active] .url-field{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #landing-page #product[data-scroll-story=active] .demo-wire{display:none!important} #landing-page #product[data-scroll-story=active][data-story-index="0"] .window-body, #landing-page #product[data-scroll-story=active][data-story-index="1"] .window-body{visibility:hidden} #landing-page #product[data-scroll-story=active][data-story-index="0"] .extension-dock, #landing-page #product[data-scroll-story=active][data-story-index="1"] .extension-dock, #landing-page #product[data-scroll-story=active][data-story-index="2"] .extension-dock{display:none!important} #landing-page #product[data-scroll-story=active][data-story-index="2"] .first-window .window-body{grid-template-columns:1fr} #landing-page #product[data-scroll-story=active] .v12-demo-foot{display:block;flex:none;margin:0} #landing-page #product[data-scroll-story=active] .demo-script-note{margin:0;font-size:11px;line-height:1.4;color:#bdbdc8} @media(max-width:1000px){ #landing-page #product[data-scroll-story=active] .browser-board{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important} #landing-page #product[data-scroll-story=active] .first-window .assistant-pane{display:none!important} #landing-page #product[data-scroll-story=active] .first-window .window-body{grid-template-columns:1fr!important} #landing-page #product .scroll-story-bar{align-items:flex-start;gap:10px} #landing-page #product .scroll-story-controls [data-story-explore]{max-width:155px} } @media(max-width:650px){ #landing-page #product[data-scroll-story=active]{padding:10px 5% 18px!important} #landing-page #product[data-scroll-story=active] .demo-sticky{gap:9px} #landing-page #product[data-scroll-story=active] .demo-top h2{font-size:23px;line-height:1.18} #landing-page #product .scroll-story-bar{display:block} #landing-page #product .scroll-story-copy{min-height:88px} #landing-page #product .scroll-story-copy h3{font-size:18px} #landing-page #product .scroll-story-copy p{font-size:12px} #landing-page #product .scroll-story-controls{margin-top:8px;gap:6px} #landing-page #product .scroll-story-controls [data-story-explore]{max-width:none;flex:1;font-size:11px} #landing-page #product[data-scroll-story=active] .browser-board{grid-template-columns:1fr!important;gap:14px} #landing-page #product[data-scroll-story=active] .real-window{display:none!important;border-radius:9px} #landing-page #product[data-scroll-story=active] .browser-tab{max-width:160px} #landing-page #product[data-scroll-story=active] .first-window .window-body{display:flex!important;flex-direction:column} #landing-page #product[data-scroll-story=active] .extension-dock{display:none!important} #landing-page #product[data-scroll-story=active][data-story-view=extension] .first-window{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-view=extension] .extension-dock{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-view=source] .first-window{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-view=source] .first-window .assistant-pane{display:flex!important;height:100%} #landing-page #product[data-scroll-story=active][data-story-view=follower] .second-window{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-index="0"] .browser-board, #landing-page #product[data-scroll-story=active][data-story-index="1"] .browser-board, #landing-page #product[data-scroll-story=active][data-story-index="2"] .browser-board{grid-template-rows:1fr 1fr} #landing-page #product[data-scroll-story=active][data-story-index="0"] .real-window, #landing-page #product[data-scroll-story=active][data-story-index="1"] .real-window, #landing-page #product[data-scroll-story=active][data-story-index="2"] .real-window{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-index="2"] .real-window{height:calc(64px + (100% - 64px) * var(--story-reveal,0))} #landing-page #product[data-scroll-story=active][data-story-index="2"] .first-window .assistant-pane{display:flex!important} #landing-page #product[data-scroll-story=active] .provider-top{padding:10px 12px;font-size:12px} #landing-page #product[data-scroll-story=active] .provider-transcript{padding:12px} #landing-page #product[data-scroll-story=active] .provider-msg p{font-size:12px;line-height:1.6} } @media(prefers-reduced-motion:reduce){#landing-page #product[data-scroll-story=active] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} body.motion-paused #landing-page #product[data-scroll-story=active] *{animation:none!important;transition:none!important;scroll-behavior:auto!important} #landing-page #product[data-scroll-story=active] .demo-script-note{padding-left:70px;min-height:22px} /* Keep the original disclosure readable outside the existing collapsed phone options. */ #landing-page #product[data-scroll-story=active] .v12-demo-foot, #landing-page #product[data-scroll-story=active] #phone-demo-options{display:none!important} #landing-page #product[data-scroll-story=active] .demo-sticky>.demo-script-note{flex:none} #landing-page #product .scroll-story-copy h3, #landing-page #product .scroll-story-copy p{white-space:normal;overflow-wrap:break-word;max-width:100%} @media(max-width:650px){ #landing-page #product[data-scroll-story=active] .demo-script-note{padding-left:0;min-height:30px;line-height:1.4} #landing-page #product[data-scroll-story=active][data-story-index="0"] .browser-board, #landing-page #product[data-scroll-story=active][data-story-index="1"] .browser-board{grid-template-rows:64px 64px;align-content:start} #landing-page #product[data-scroll-story=active] .demo-sticky{gap:9px} } @media(min-width:651px) and (max-width:1000px){ #landing-page #product[data-scroll-story=active][data-story-view=source] .first-window .assistant-pane{display:flex!important} #landing-page #product[data-scroll-story=active][data-story-view=source] .extension-dock{display:none!important} #landing-page #product[data-scroll-story=active][data-story-index="2"] .first-window .assistant-pane{display:flex!important} } /* Reserved room for the original travelling Cyan; its established materials stay. */ #landing-page #product[data-scroll-story=active] .scroll-story-guide-space{height:110px;flex:none} #landing-page #product:not([data-scroll-story=active]) .scroll-story-guide-space{display:none} #landing-page #product[data-scroll-story=active][data-story-index]:not([data-story-index="0"]):not([data-story-index="1"]):not([data-story-index="2"]) .demo-top{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #tour-guide.scroll-story-cyan{display:block!important} #tour-guide.scroll-story-cyan:not(.introducing) .guide-bubble{left:auto!important;right:55px!important;top:auto!important;bottom:-45px!important;width:300px!important;max-height:110px!important;padding:8px 12px!important;overflow:auto;transform:none!important} #tour-guide.scroll-story-cyan:not(.introducing) .guide-bubble p{font-size:12px;line-height:1.4;margin:5px 0} #tour-guide.scroll-story-cyan:not(.introducing) .guide-action{min-height:32px;font-size:11px} #tour-guide.scroll-story-cyan.introducing .guide-bubble{max-height:none!important} @media(max-width:650px){ #tour-guide.scroll-story-cyan:not(.introducing) .guide-bubble{right:44px!important;width:calc(100vw - 110px)!important;bottom:-48px!important;padding:8px 10px!important} #tour-guide.scroll-story-cyan.introducing .guide-bubble{width:min(254px,calc(100vw - 32px))!important} } #landing-page #product[data-scroll-story=active] .provider-msg.is-story-typing p:after{content:"";display:inline-block;height:1em;border-right:1px solid currentColor;margin-left:2px;vertical-align:-.1em} /* Story speech must not inherit the ordinary phone tour's tucked/automatic state. */ #tour-guide.scroll-story-cyan #guide-bubble{visibility:visible!important;opacity:1!important;pointer-events:auto!important} #tour-guide.scroll-story-cyan.phone-cyan .guide-visual{width:270px!important;height:236px!important;left:-135px!important;top:-118px!important} #tour-guide.scroll-story-cyan.introducing #guide-bubble{left:50%!important;right:auto!important;top:109px!important;bottom:auto!important;transform:translateX(-50%)!important} /* Manual mode retains the new Replay row without consuming the native panel row. */ #landing-page #product[data-scroll-story=manual] .demo-sticky{grid-template-rows:auto auto minmax(0,1fr) auto} /* Keep the expanded native panel above later landing sections. */ body.demo-expanded #landing-page .demo-scroll-shell{z-index:160!important} @media(max-width:650px){ #landing-page #product[data-scroll-story=manual].is-focused .demo-sticky{grid-template-rows:auto auto auto minmax(max(360px,calc(100dvh - 400px)),1fr) auto} } /* Founder-approved install-first prelude. Existing browser nodes remain mounted. */ #landing-page #product .scroll-story-install{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:18px;opacity:var(--story-install-opacity,1)} #landing-page #product .scroll-story-install[hidden]{display:none!important} #landing-page #product .scroll-install-mark{width:70px;height:70px;display:grid;place-items:center;border:1px solid #ffffff24;border-radius:18px;background:#ffffff07;color:#f4f4f6} #landing-page #product .scroll-install-mark svg{width:38px;height:38px;fill:currentColor} #landing-page #product .scroll-install-kicker{font:10px/1.4 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#aaaab7} #landing-page #product .scroll-story-install h4{margin:0;font-size:24px;font-weight:500;letter-spacing:-.035em} #landing-page #product .scroll-story-install p{margin:0;max-width:310px;color:#b9b9c4;font-size:13px;line-height:1.5} #landing-page #product .scroll-install-access{font-size:10px;color:#92929f} #landing-page #product[data-scroll-story=active][data-story-layout=continuous][data-story-index="0"] .browser-board, #landing-page #product[data-scroll-story=active][data-story-layout=continuous][data-story-index="0"] .browser-board *, #landing-page #product[data-scroll-story=active][data-story-layout=continuous][data-story-index="1"] .browser-board, #landing-page #product[data-scroll-story=active][data-story-layout=continuous][data-story-index="1"] .browser-board *{visibility:hidden!important;pointer-events:none!important} body:has(#tour-guide.scroll-story-cyan.introducing:not([aria-hidden="true"])) #landing-page #product[data-scroll-story=active] .browser-board, body:has(#tour-guide.scroll-story-cyan.introducing:not([aria-hidden="true"])) #landing-page #product[data-scroll-story=active] .browser-board *{visibility:hidden!important;pointer-events:none!important} #landing-page #product[data-scroll-story=active][data-story-layout=continuous][data-story-index="2"] .window-body{visibility:hidden!important} #landing-page #product[data-scroll-story=active][data-story-index="2"] .browser-board{opacity:var(--story-address-opacity,1)} #landing-page #product[data-scroll-story=active] .provider-msg p{white-space:pre-wrap} @media(max-width:650px){#landing-page #product .scroll-story-install{gap:10px;padding:12px}#landing-page #product .scroll-install-mark{width:58px;height:58px;border-radius:15px}#landing-page #product .scroll-story-install h4{font-size:21px}#landing-page #product .scroll-story-install p{font-size:12px;max-width:260px}} /* Proposed narrow/short repair only. The frozen founder-selected A remains unchanged. */ @media(max-width:360px) and (max-height:720px){ #landing-page #product[data-scroll-story=active] .scroll-story-copy{min-height:0} #landing-page #product[data-scroll-story=active] .scroll-story-copy h3{font-size:16px;line-height:1.25} #landing-page #product[data-scroll-story=active] .scroll-story-copy p{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #landing-page #product[data-scroll-story=active] .scroll-story-guide-space{height:72px} #landing-page #product[data-scroll-story=active] .provider-composer{height:28px;min-height:28px;padding:4px 8px;display:flex;align-items:center;font-size:9px;line-height:1.2} #landing-page #product[data-scroll-story=active] .provider-composer>div{display:none} #landing-page #product[data-scroll-story=active] .provider-transcript{padding-top:6px;padding-bottom:6px} } /* Founder viewport correction: the existing stage owns the available screen. Story controls and the original travelling Cyan overlay it, never reserve rows. Manual/expanded interaction mode retains its original layout and handlers. */ #landing-page #product[data-scroll-story=active]{ width:100%!important;max-width:none!important;margin:0!important; height:calc(var(--story-layout-height,100dvh) - var(--story-nav,76px))!important;padding:0!important; } #landing-page #product[data-scroll-story=active] .demo-sticky{ position:relative!important;display:block!important;height:100%;width:100%;gap:0; } #landing-page #product[data-scroll-story=active] .browser-stage{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; margin:0!important;padding:0!important;min-height:0!important; } #landing-page #product[data-scroll-story=active] .scroll-story-guide-space{ position:absolute;right:0;bottom:12px;width:100%;height:88px;pointer-events:none; } #landing-page #product[data-scroll-story=active] .scroll-story-bar{ position:absolute;left:132px;bottom:10px;z-index:6;max-width:calc(100% - 560px); margin:0;pointer-events:none; } #landing-page #product[data-scroll-story=active] .scroll-story-controls{ pointer-events:auto;flex:1 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;gap:6px; } #landing-page #product[data-scroll-story=active] :is(.demo-top,.scroll-story-copy,.demo-script-note,.v12-demo-foot){ position:absolute!important;width:1px!important;height:1px!important;min-height:0!important; padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%)!important; } @media(min-width:651px) and (max-width:1100px){ #landing-page #product[data-scroll-story=active] .scroll-story-bar{left:132px;bottom:10px;max-width:calc(100% - 560px)} #landing-page #product[data-scroll-story=active] .scroll-story-controls [data-story-explore]{max-width:150px} } /* Supplied public Store pixels and a compact install-to-assistant prelude. */ #landing-page #product .scroll-story-install{inset:0;display:block;padding:0;text-align:left;transform:translateY(var(--story-install-lift,0px));pointer-events:none} #landing-page #product .story-store-browser{position:absolute;left:37%;top:50%;transform:translateY(-50%);width:min(58%,900px);max-height:calc(100% - 116px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #ffffff2c;border-radius:13px;background:#fff;box-shadow:0 22px 75px #0008;pointer-events:auto} #landing-page #product .story-store-tab{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:35px;padding:0 14px;color:#e4e4ea;background:#27272e;font-size:11px} #landing-page #product .story-store-tab>span:first-child{font-size:9px;letter-spacing:3px;color:#9c9aa6} #landing-page #product .story-store-address{display:flex;align-items:center;gap:9px;flex:none;height:35px;padding:0 12px;background:#202026;color:#bfc0cc;font-size:11px} #landing-page #product .story-store-address a{color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;min-width:0} #landing-page #product .story-store-pixels{position:relative;flex:1 1 auto;min-height:0;width:100%;aspect-ratio:1880/1180;overflow:hidden;background:#fff} #landing-page #product .story-store-pixels img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;transform-origin:0 0;transform:translate3d(var(--story-store-pan-x,0px),var(--story-store-pan-y,0px),0) scale(var(--story-store-zoom,1));will-change:transform} #landing-page #product .scroll-story-install .story-store-caption{flex:none;padding:9px 13px;margin:0!important;max-width:none!important;background:#f3f3f5;color:#4e4f59!important;font:10px/1.4 system-ui,sans-serif!important} #landing-page #product .scroll-story-install .story-store-instruction{position:absolute;left:37%;top:auto;bottom:14px;width:58%;max-width:none;margin:0;color:#d0d0da;font-size:12px;text-align:center} #landing-page #product[data-story-prelude=true] .scroll-story-bar{max-width:none;left:20px;bottom:12px} body:has(#product[data-scroll-story=active][data-story-prelude=true]) #tour-guide.scroll-story-cyan #guide-bubble{width:300px!important;max-height:140px!important} @media(max-width:650px){ #landing-page #product .story-store-browser{left:16px;top:28%;width:calc(100% - 32px);height:auto;max-height:calc(72% - 150px);transform:none;border-radius:10px} #landing-page #product .story-store-tab{height:29px;font-size:10px} #landing-page #product .story-store-address{height:30px;font-size:10px} #landing-page #product .scroll-story-install .story-store-caption{padding:7px 10px;font-size:9px!important} #landing-page #product .scroll-story-install .story-store-instruction{left:20px;bottom:132px;width:calc(100% - 40px);font-size:11px} body:has(#product[data-scroll-story=active][data-story-prelude=true]) #tour-guide.scroll-story-cyan #guide-bubble{width:min(300px,calc(100vw - 32px))!important;max-height:110px!important} } @media(min-width:651px) and (max-height:500px){ #landing-page #product .story-store-browser{left:39%;top:12px;transform:none;width:58%;max-height:calc(100% - 65px)} #landing-page #product .scroll-story-install .story-store-instruction{left:39%;width:58%;bottom:12px;font-size:10px} body:has(#product[data-scroll-story=active][data-story-prelude=true]) #tour-guide.scroll-story-cyan #guide-bubble{width:240px!important;max-height:110px!important} } /* Cyan joins the visible setup browser, without a long empty pre-section hold. */ body[data-cyan-setup-lead-in=waiting] #tour-guide{visibility:hidden!important} @media(max-width:650px){#landing-page #product .scroll-story-install .story-store-instruction{display:none}} /* A pane crossfade never captures the page ribbon or travelling companion. */ ::view-transition-group(b2b-story-pane),::view-transition-old(b2b-story-pane),::view-transition-new(b2b-story-pane){animation-duration:180ms;animation-timing-function:ease-in-out} ::view-transition{pointer-events:none} @media(prefers-reduced-motion:reduce){::view-transition-group(b2b-story-pane),::view-transition-old(b2b-story-pane),::view-transition-new(b2b-story-pane){animation-duration:0s}} /* Store entry follows scroll, leaving the page ribbon and Cyan outside the effect. */ #landing-page #product .story-store-browser{translate:0 var(--story-entry-lift,0px);scale:var(--story-entry-scale,1);filter:blur(var(--story-entry-blur,0px))} @media(prefers-reduced-motion:reduce){#landing-page #product .story-store-browser{translate:none;scale:none;filter:none}}